AIエージェントの返答は、これまでテキストかMarkdownが中心でした。2026年6月15日、VercelのChris Tate氏が、Claude Code・Codex・Pi向けのGenerative UIを発表し、エージェントがサンドボックス内で作業しながらチャートやフォーム、3Dシーンなどの実UIをユーザーに返せる道が開きました。

この記事では、発表内容と、その裏側にあるAI SDKのHarnessAgentとjson-renderの仕組みを整理します。

この記事でわかること

  • Generative UIがClaude Code・Codex・Piで何を変えるか
  • HarnessAgentとjson-renderが担う役割
  • HTML直書き型との違いと、開発者が得るメリット

https://x.com/ctatedev/status/2066555279295008908

テキスト返答から「動くUI」へ

Chris Tate氏の発表（2026年6月15日）によると、Generative UIは「Charts, forms, 3D, anything」と幅広いUIをエージェントが描画できる機能です。ポイントは、エージェントがバックグラウンドのサンドボックスでコードを書きながら、ユーザー側には操作可能なUIを届ける点にあります。

従来のチャットUIでは、分析結果は表形式のMarkdown、グラフは説明文だけ、という場面が多くありました。Generative UIは、エージェントが状況に合わせてUIの構造そのものを組み立て、クライアントがそれをReactコンポーネントとして描画します。ユーザーはリンクを踏んだりコードをコピーしたりせず、その場で操作できます。

HarnessAgentがハーネスを一本化する

この機能の基盤のひとつが、Vercel AI SDK 7の実験的API「HarnessAgent」です。2026年6月12日のVercel公式changelogで公開され、Claude Code・Codex・Piといったエージェントハーネスを単一のAPIで動かせます。

ハーネス（harness）とは、モデル呼び出しの上に乗るエージェント実行環境のことです。ファイル操作、セッション管理、権限フロー、コンパクション（会話の圧縮）などをハーネス側が担います。HarnessAgentはこれらを正規化し、開発者はclaudeCodeをcodexやpiに差し替えるだけで同じコードを流用できます。

すべてのハーネスはサンドボックス内で動作します。Claude CodeやCodexは@ai-sdk/sandbox-vercelのようなネットワークサンドボックスが必要で、ホスト環境を汚染しません。Piは@ai-sdk/sandbox-just-bashでも動かせます。HarnessAgentのstream()はAI SDK互換の結果を返すため、既存のuseChatベースのフロントエンドに組み込みやすい設計です。

なおHarnessAgentはcanaryリリース段階で、APIは今後変わる可能性があります。

json-renderがUIを安全に制約する

もうひとつの柱が、Chris Tate氏が作成したオープンソースのGenerative UIフレームワーク「json-render」です。AIが生のHTMLやReactコードを書くのではなく、開発者が定義したコンポーネントカタログの範囲内でJSONを出力し、クライアントがそれを描画します。

json-render公式ドキュメントが説明する流れは3段階です。まずカタログで使えるコンポーネントとアクションを宣言し、次にAIがその制約内でJSONスペックを生成し、最後にレジストリ経由でReactなどのネイティブUIとして描画します。カタログにないコンポーネント名は出せないため、任意コード実行やXSSのリスクを抑えられます。

公式サイトのデモでは、Button・Input・Select・BarGraph・LineGraph・Table・Tabsなど41種類のコンポーネントが用意されています。3D表示には@json-render/react-three-fiberパッケージがあり、React Three Fiber向けに20種類のビルトインコンポーネント（GaussianSplatを含む）が提供されています。Chris Tate氏の発表が「3D」に言及している背景は、このパッケージ群にあります。

AI SDKとの統合では、Standaloneモード（JSONLのみ出力）とInlineモード（会話テキストとJSONLを混在）の2つが選べます。チャット型のエージェントUIにはInlineモードが向き、サーバー側でpipeJsonRenderを使い、クライアント側でuseJsonRenderMessageがメッセージからUIスペックを取り出します。JSONはRFC 6902形式のJSONLパッチとしてストリーミングされ、到着するたびにUIが段階的に更新されます。

Claude.aiのGenerative UIとの違い

2026年3月頃、Anthropicはclaude.ai向けにGenerative UIを公開しました。開発者のMichael Livs氏がリバースエンジニアリングした結果によると、claude.aiではshow_widgetというツール呼び出しでHTMLフラグメントを渡し、ブラウザがDOMに直接注入して描画します。Chart.jsやThree.jsはCDNから読み込み、トークンが届くたびにUIが伸びていく方式です。

Chris Tate氏の発表が示すアプローチは、HTML直書きではなくjson-renderのカタログ制約型です。エージェントハーネス（Claude Code・Codex・Pi）をHarnessAgentで統一し、出力をJSONスペックに限定する。開発者は自分のデザインシステムをカタログに登録すれば、エージェントがその範囲内でUIを組み立てます。claude.aiの体験をターミナルエージェントや自社アプリに持ち込みたい開発者向けの、より制御可能な設計と言えます。

開発者にとっての実用性

HarnessAgentとjson-renderの組み合わせは、実装系の読者にとって次の点が効きます。

まず、ハーネスの差し替えがコード数行で済みます。同じGenerative UIパイプラインをClaude CodeからCodexやPiに移せるため、エージェント選定の自由度が上がります。次に、UIの安全性がカタログで担保されます。フォームのバリデーションルールやデータバインディング（$stateパスによる双方向バインド）もスペックに含められるため、ダッシュボードや設定画面を会話の中で動的に生成するユースケースに向きます。

HarnessAgentのセッション管理も重要です。ハーネスは会話履歴を自分で保持するため、チャットルートではメッセージ全体を毎回リプレイするのではなく、session.detach()で返る不透明な再開状態を保存・復元する設計が推奨されています。Generative UIを組み込んだマルチターンのエージェントアプリを作る際は、このセッションライフサイクルを理解しておく必要があります。

現時点ではHarnessAgentもjson-render連携も実験段階です。ただ、エージェントが「説明する」から「見せる」へ移行する流れは、Vercel AI SDK・json-render・各ハーネスの方向性が一致しています。自社プロダクトにエージェントUIを組み込む開発者は、カタログ設計とハーネス選定を並行して検討する価値があります。