AIエージェントがテキスト応答だけでなくリッチなUIを動的に生成する「Generative UI」が、2026年に入りプロダクション品質に到達した。Google が2025年12月に公開した A2UI（Agent-to-User Interface）、CopilotKit 主導の AG-UI（Agent-User Interaction Protocol）、そして Anthropic の MCP と Google Cloud の A2A を組み合わせた4層プロトコルスタックが、エージェント駆動インターフェースの事実上の標準アーキテクチャを形成しつつある。本稿では各プロトコルの技術仕様と相互関係を整理し、React/Next.js との統合パターンを実装視点で解説する。

Generative UI とは何か ── テキストからUIコンポーネントへ

Generative UI は、AIエージェントが実行時にユーザーインターフェースの構造・コンポーネント・レイアウトを動的に生成するパラダイムである。従来の LLM アプリケーションがテキストやマークダウンを返すのに対し、Generative UI ではカード、グラフ、フォーム、インタラクティブなダッシュボードといったリッチなUI要素がエージェントの出力として提供される。

Google Research は2025年後半にこの概念を体系化し、Gemini アプリおよび Google 検索の AI Mode において「Dynamic View」として実装した。Gemini 3 Pro はプロンプトごとにJavaScript を含む完全なインタラクティブUIをゼロから生成し、タブ、カルキュレータ、スライダー、地図といった要素を動的に構築する。Google のYaniv Leviathan（Google Fellow）らの研究チームによる評価では、生成速度を除外した場合、人間の評価者はGenerative UIを従来のテキスト出力よりも強く選好したと報告されている。

この技術的基盤の上に、エージェントがUIを生成・配信・同期するための標準プロトコルが急速に整備されている。その中核が A2UI と AG-UI であり、これらは MCP・A2A とともに4層のプロトコルスタックを構成する。

4層プロトコルスタックのアーキテクチャ

2026年初頭の時点で、エージェント駆動アプリケーションの通信アーキテクチャは以下の4層に整理できる。

第1層：エージェント間協調（A2A）
Google Cloud が開発し、2025年6月に Linux Foundation に寄贈した Agent-to-Agent Protocol である。異なるベンダー・フレームワークのエージェント同士が相互に発見・委任・協業するための開標準で、AWS、Microsoft、Salesforce など100社以上が支持している。エージェント間のピアツーピア通信を担う水平レイヤーだ。

第2層：ツールアクセス（MCP）
Anthropic が2024年11月に発表した Model Context Protocol は、エージェントが外部ツール、API、データソースに接続するための標準インターフェースである。2025年12月に Anthropic は MCP を Linux Foundation 傘下の Agentic AI Foundation に寄贈し、OpenAI や Google DeepMind も採用する業界標準となった。エージェントの「手」を担う垂直レイヤーである。

第3層：エージェント-UI ランタイム（AG-UI）
CopilotKit が LangChain・CrewAI との協業から生まれた Agent-User Interaction Protocol で、エージェントとフロントエンド間のリアルタイム双方向通信を担う。イベント駆動アーキテクチャを採用し、テキストストリーミング、ツールコール、状態同期を標準化した17種類のイベントタイプで処理する。Google、AWS、Microsoft も採用している。

第4層：UI仕様（A2UI / Open-JSON-UI / MCP Apps）
エージェントが生成するUIの構造を宣言的JSONで記述する仕様レイヤーである。Google の A2UI、OpenAI の Open-JSON-UI、コミュニティ主導の MCP Apps（SEP-1865）が並立している。AG-UI がこれらのUI仕様をイベントストリーム上で運搬する関係にある。

A2UI ── Google の宣言的UIプロトコル

A2UI（Agent-to-User Interface）は、2025年12月15日に Google が Apache 2.0 ライセンスで公開したオープンな宣言的データフォーマットである。エージェントが HTML や JavaScript を直接出力するのではなく、UIの意図を記述した JSON を送信し、クライアント側がネイティブコンポーネントとしてレンダリングする設計を採る。

A2UI の最大の特徴はセキュリティモデルにある。エージェントはクライアントが事前承認したコンポーネントカタログ（Card、Button、TextField 等）からのみUIを構築でき、任意のコード実行は一切許可されない。「データのように安全で、コードのように表現力がある」というコンセプトだ。現行バージョンは v0.9 で、安定版 v1.0 は2026年第4四半期を目標としている。

クロスプラットフォーム対応も重要な設計原則である。同一の A2UI JSON ペイロードが Web（React）、モバイル（Flutter）、デスクトップ（SwiftUI）で異なるネイティブウィジェットとしてレンダリングされる。React 向けには @a2ui-sdk/react が npm パッケージとして公開済みで、2026年第1四半期には公式 React レンダラーのリリースが予定されている。SwiftUI と Jetpack Compose のレンダラーは第2四半期の計画だ。

LLM フレンドリーな設計も特筆に値する。コンポーネントは ID 参照によるフラットリスト構造で記述されるため、LLM がインクリメンタルに生成しやすい。プログレッシブレンダリングに対応し、ユーザーの新たなリクエストに基づくインクリメンタルな変更も可能である。Gemini Enterprise、Flutter GenUI SDK、Google Opal 等のプロダクトで実運用されている。

AG-UI ── イベント駆動のランタイムプロトコル

AG-UI は「UIがどう見えるか」を規定するものではなく、「エージェントとUIがどうリアルタイムに同期するか」を定義するランタイムプロトコルである。CopilotKit の共同創業者 Atai Barkai が主導し、LangChain や CrewAI との協業から誕生した。

従来の RPC モデルに代わり、イベントソーシングパターンを採用している点が革新的だ。エージェントは実行中に標準化されたイベントを発行し、クライアントは最終回答を待つのではなくイベントストリームを逐次処理する。イベントは以下のカテゴリに分類される17種類が定義されている。

ライフサイクルイベント：エージェント実行の進捗を追跡する。テキストメッセージイベント：チャットやテキストをトークン単位でストリーミングする。ツールコールイベント：TOOL_CALL_START → TOOL_CALL_ARGS → TOOL_CALL_END → TOOL_CALL_RESULT のシーケンスで外部ツール呼び出しとその結果を報告する。状態管理イベント：エージェントとアプリケーション間の共有状態を双方向で同期する。

トランスポート非依存も重要な設計方針である。AG-UI は特定の通信方式を強制せず、Server-Sent Events（SSE）、WebSocket、Webhook のいずれでも動作する。実装の多くはファイアウォールとの親和性が高い SSE を採用している。

AG-UI と A2UI の関係は、TCP/IP とHTTP の関係に近い。AG-UI はランタイムチャネル（トランスポート層）であり、A2UI はそのチャネル上で運搬されるUIペイロード（アプリケーション層）である。AG-UI は A2UI だけでなく Open-JSON-UI やカスタム仕様も同様に伝送できる。

React/Next.js との統合パターン

実装の観点から、各プロトコルは React/Next.js エコシステムとどう統合されるのか。主要な3つのアプローチを整理する。

CopilotKit + AG-UI パターン
最も成熟した統合パスである。CopilotKit はドロップインの React コンポーネント（チャット、サイドバー等）を提供し、AG-UI プロトコルを通じてバックエンドの LangGraph や CrewAI エージェントと SSE で通信する。状態同期はフレームワーク側で抽象化されており、開発者はイベントハンドリングに集中できる。MCP Apps の埋め込みにも対応しており、AG-UI 上で MCP サーバーが提供するインタラクティブUIを直接レンダリングできる。

A2UI SDK パターン
@a2ui-sdk/react パッケージを使用する。A2UIProvider でカスタムコンポーネントカタログを登録し、A2UIRenderer でレンダリング、useDispatchAction フックでイベントハンドリングを行う。WebSocket または SSE でメッセージを受信し、A2UI JSON をネイティブ React コンポーネントに変換する。セキュリティ面では、カタログに登録されたコンポーネントのみレンダリングされるため、XSS 等のリスクが構造的に排除される。

Vercel AI SDK パターン
Vercel AI SDK（現行 v6）は streamUI 関数を通じて React Server Components をエージェントの出力としてストリーミングする。プロトコル標準化よりもフレームワーク統合を優先したアプローチで、Next.js の RSC（React Server Components）をネイティブに活用し、クライアントサイドの JavaScript を最小化しながらプログレッシブなUI生成を実現する。月間2,000万ダウンロードを超える利用実績がある。

これら3つのアプローチは排他的ではなく、組み合わせが可能である。たとえば Vercel AI SDK でストリーミング基盤を構築し、AG-UI でエージェント同期を、A2UI でクロスプラットフォームUI仕様を担うといった多層統合が実用的な選択肢となる。

実装上の設計判断 ── 宣言的UIか生成的コードか

Generative UI の実装には、大きく2つの哲学が存在する。A2UI に代表される「宣言的アプローチ」と、Gemini Dynamic View に代表される「コード生成アプローチ」である。

宣言的アプローチでは、エージェントはコンポーネント名とプロパティを JSON で記述するだけで、実際のレンダリングはクライアント側の事前定義コンポーネントが担う。セキュリティ・予測可能性・クロスプラットフォーム互換性に優れるが、表現力はカタログに制約される。エンタープライズ用途や信頼性が求められるプロダクションシステムに適する。

コード生成アプローチでは、LLM が JavaScript/HTML を直接生成し、サンドボックス内で実行する。表現力は事実上無制限だが、セキュリティリスクの管理と品質保証が課題となる。Google Research はこのアプローチで印象的な成果を示しているが、iframe サンドボックスと厳格な CSP（Content Security Policy）によるガードレールが不可欠である。

MCP Apps（SEP-1865）は両者の折衷案として注目に値する。MCP サーバーがUI テンプレートを事前宣言し、ホストがレビュー・承認した上でサンドボックス化された iframe 内でレンダリングする。postMessage 経由の JSON-RPC で通信し、すべてのUIホスト間通信は監査可能である。Shopify が採用を表明しており、エンタープライズ環境での実用性が検証されつつある。

設計判断のポイントは、対象アプリケーションの信頼境界にある。社内ツールや信頼済みエージェントのみが接続する環境ではコード生成の自由度が活きる。一方、外部エージェントや不特定多数のユーザーが関与する環境では、A2UI の宣言的モデルが安全な選択である。

今後の展望 ── 標準化と収束の行方

現時点で Generative UI のプロトコル空間は、A2UI（Google）、Open-JSON-UI（OpenAI）、MCP Apps（コミュニティ）の3仕様が並立する分散状態にある。しかし、いくつかの収束要因が存在する。

第一に、A2A・MCP の両プロトコルが Linux Foundation に寄贈され、ベンダー中立なガバナンス下に置かれた。UI 仕様レイヤーも同様の動きが起こる可能性は高い。第二に、AG-UI がトランスポート層として任意のUI仕様を運搬できる設計であるため、UI仕様の競争がランタイム層に波及しにくい構造になっている。第三に、React エコシステムでは CopilotKit が事実上のハブとなり、複数のUI仕様と複数のエージェントフレームワーク（LangChain、CrewAI、PydanticAI）を統合する接着層を提供している。

A2UI v1.0 が2026年第4四半期に安定リリースを迎えれば、クロスプラットフォーム対応が一段階進む。SwiftUI・Jetpack Compose レンダラーの提供により、Web だけでなくモバイルネイティブアプリでもエージェント駆動UIが標準的な実装パターンとなるだろう。エージェントがテキストを返す時代から、UIを返す時代への移行は、もはや技術的ビジョンではなく実装フェーズに入っている。

FAQ

A2UI と AG-UI の違いは何か？

A2UI はエージェントが生成するUIの構造を宣言的JSONで記述する「UI仕様」であり、AG-UI はエージェントとフロントエンド間のリアルタイム通信を担う「ランタイムプロトコル」である。AG-UI のイベントストリーム上で A2UI ペイロードが運搬される関係にある。

MCP と AG-UI はどう使い分けるのか？

MCP はエージェントが外部ツールやAPIに接続するためのプロトコル（エージェント→ツール）であり、AG-UI はエージェントがフロントエンドと同期するためのプロトコル（エージェント↔UI）である。両者は同時に動作し、異なるレイヤーを担当する。

Generative UI を React プロジェクトに導入する最も手軽な方法は？

CopilotKit の導入が最も手軽である。ドロップインの React コンポーネントが提供されており、AG-UI 経由でのエージェント通信、A2UI や MCP Apps のレンダリングを統合的にサポートしている。Vercel AI SDK の streamUI も Next.js プロジェクトでは有力な選択肢である。

A2UI のセキュリティモデルはどう機能するのか？

エージェントはクライアントが事前承認したコンポーネントカタログからのみUIを構築でき、任意のコード実行は不可能である。クライアント側がカタログを管理するため、信頼境界がクライアントに保持される。XSS 等のインジェクション攻撃が構造的に排除される設計である。

参考文献