ClaudeのGenerative UIアーキテクチャをリバースエンジニアリングし、Coding Agent CLI ~ Piに移植する#

オリジナルリンク: https://x.com/shao__meng/status/2032649105852473365

AnthropicはClaude向けにGenerative UI機能をリリースしました。これは、静的な画像やコードブロックではなく、会話内にインタラクティブなHTMLコンポーネント（スライダー、チャート、アニメーション）を埋め込む機能です。@micLivsはその実装メカニズムをリバースエンジニアリングし、PiとGlimpseをベースに同じ機能をターミナル環境に移植しました。

一緒に見ていきましょう:

Claude Generative UIの実際の実装
PiターミナルでのGenerative UIの再構築
Claude Generative UIデザイン仕様（非常に重要！）

デザイン仕様リンク: https://t.co/5XFaX6ExBz

Claude Generative UIの実際の実装#

実装メカニズム: これはMarkdownレンダリングではなく、show_widgetという名前のツール呼び出しであり、そのパラメータにHTMLフラグメントが含まれ、フロントエンドがDOMインジェクションを実行します。証拠として、CSS変数がコンポーネント間で解決可能であり、コンテンツはトークンごとにリアルタイムでレンダリングされ、背景は透明でiframeの痕跡はありません。セキュリティ境界は、ロード可能なCDNを制限するCSPホワイトリストに依存しています。

Artifactsとの本質的な違い: Artifactsはサイドパネル内のダウンロード可能な成果物であり、事前パッケージ化されたライブラリを使用します。Generative UIは会話ストリーム内にインラインで配置される一時的なコンポーネントであり、CDNから任意のライブラリをリアルタイムでロードできます。

read_meモード: モデルがshow_widgetを呼び出す前に、まずread_meを呼び出して、対応するモジュールのデザイン仕様（図/チャート/インタラクティブ/モックアップ/アート）をオンデマンドでロードする必要があります。これはプログレッシブなコンテキストインジェクションであり、ベースプロンプトを軽量に保ち、必要に応じて専門知識を注入してトークンを節約します。

デザイン仕様の抽出: 会話JSONをエクスポートすることで、tool_resultからAnthropicによる完全な72KBのオリジナルデザインシステムテキストが抽出されました。コア要件には以下が含まれます: ストリーミングファースト（スタイル → HTML → スクリプト）、グラデーション/シャドウ/ぼかしの無効化、ダークモードの強制、9色スケールシステム、Chart.js/SVG固有の仕様など。

Piターミナルでの再構築#

問題: ターミナルはインタラクティブなHTMLをレンダリングできません。

解決策: レンダリングコンテナとしてGlimpse（macOSネイティブのWKWebView、50ms未満で起動、双方向JSON通信）を使用します。

ストリーミングレンダリングのための主要なイテレーション:

setHTML()による完全置換。ページのちらつきを引き起こします。
innerHTMLによるコンテナ置換。依然としてすべての子ノードを破棄・再構築します。
単純なDOM追加。ブラウザが不完全なタグを自動クローズするため、ツリー構造が毎回異なり、追跡に失敗します。
morphdomによるDOM差分検出。最終的な解決策であり、変更されたノードのみを更新し、新しいノードにはフェードインアニメーションを適用します。

PiのAIレイヤーには既に部分的なJSONパース機能が組み込まれており、拡張機能はストリーミングされるarguments.widget_codeを直接読み取るため、追加の依存関係は不要です。

Claude Generative UIデザイン仕様#

72KBの仕様、重複を除いて10章、5つのモジュール（インタラクティブ / チャート / モックアップ / アート / 図）を組み合わせてオンデマンドでロードされ、共有章は一度だけ注入されます。

コアレイヤー#

すべてがストリーミングレンダリングに奉仕します。ほぼすべてのルールが同じ目標を指しています—HTMLがトークンごとにDOMに注入される際の視覚的安定性の維持:

styleタグは最初に配置され、コンテンツは徐々に表示され、スクリプトは最後に実行されます。不完全なscriptタグはレンダリングをブロックする可能性があります。
グラデーション、シャドウ、ぼかしの無効化: これらはDOM差分検出中の再描画によるちらつきを引き起こします。
HTMLコメントの無効化: トークンの無駄であり、不完全な場合、閉じタグがコンテンツと曖昧になる可能性があります。
CSS変数がすべての色を駆動: ウィジェットはDOMインジェクションであり、iframeではないため、変数はホストページのカスケードから直接継承され、テーマに自然に適応します。
フォントウェイトは400/500のみ、すべてセンテンスケース、ダークモード強制: 変数を排除し、視覚的なジャンプを減らします。

カラーシステム#

9つのカラースケール、各スケールに7つのレベル。色は意味をエンコードし、順序ではありません。各ウィジェットは2〜3つのカラースケールに制限されます。色付き背景上のテキストは、同じスケールの800/900レベルを使用する必要があります。目標は、モデルが間違いを犯しにくい範囲に色の意思決定を圧縮することです。

SVG / 図#

図モジュールは59KBで、仕様の大部分を構成します。フォントのピクセル幅キャリブレーションテーブル、事前作成されたCSSクラス（モデルはインラインスタイルを書く代わりにクラス名を参照）、矢印のcontext-strokeは自動的に色を継承します。「ほとんどの図の失敗の原因となる」2つのルール: 矢印はノードを通過できず、ボックスの幅はテキストの長さによって決定されます。チャートタイプは名詞ではなく動詞で選択します。

チャート / UIコンポーネント#

Chart.js固有の仕様（デフォルトの凡例の無効化、明示的なCanvasコンテナの高さ、数値フォーマット）。UIコンポーネントはすべて固定仕様にトークン化されています（カード、ボタン、メトリックカード、スケルトンスクリーン）。モデルはこれらを組み合わせて使用できます。

デザイン意図#

モデルにデザインを教えるのではなく、デザインの意思決定空間を、モデルが間違いを犯しにくい範囲に圧縮することです。モデルの自由度は正確に2つのレベルに制限されています:「どのレイアウトを選択するか」と「どのカラースケールを使用してどの意味を表現するか」。それ以外のすべては仕様でカバーされています。

> 著者: Michael Livs (@micLivs) > URL: https://x.com/micLivs/status/2032244251464188184 > > AnthropicはClaude向けにGenerative UIをリリースしました。私はその仕組みをリバースエンジニアリングし、PI向けに再構築しました。 > > 会話エクスポートから完全なデザインシステムを抽出しました。morphdom DOM差分検出を介してネイティブmacOSウィンドウにHTMLをライブストリーミングしています。 > > 記事: https://t.co/BcYo94YqK3 > リポジトリ: https://t.co/EfMDX58NWc > > @badlogicgamesのpiと@DanielGriのGlimpseをベースに構築。