A2UI

Agent-to-User Interface — エージェントが「UI を話す」ためのオープン標準。宣言的 JSON で安全かつ表現力のある UI を実現する。

1 — 概要
何か

A2UI は、エージェント（LLM 等）が生成する UI を宣言的 JSONで表現するオープン標準と、そのレンダラー・Agent SDK・開発ツール群。エージェントは実行可能コードではなく UI の意図を JSON で送り、クライアント側が信頼済みカタログのコンポーネント（Card, Button, TextField 等）だけをネイティブに描画する。データのように安全で、コードのように表現力がある UI を実現する。

JSONL宣言形式
Catalog信頼コンポーネント
A2A / AG-UIトランスポート
v0.9.1現行仕様
ステータス: 現行リリースは v0.9.1（v0.9 系の安定版）。v1.0 はリリース候補、v0.8 はレガシー。仕様と実装は機能するが進化中の Early stage public preview。
設計思想
  • セキュリティ第一: LLM 生成の任意コード実行は危険。A2UI は宣言的データ形式。クライアントがカタログで許可したコンポーネントだけをレンダリングする。
  • LLM 向け・増分更新: フラットなコンポーネントリストと ID 参照で表現し、LLM が増分的に出力しやすい。プログレッシブレンダリングや会話進行に合わせた更新が可能。
  • フレームワーク非依存: UI 構造と実装を分離。同じ A2UI ペイロードを Web（Lit / React / Angular）や Flutter 等で描画できる。
  • 柔軟性: オープンなレジストリでサーバー側型を Smart Wrapper にマッピング。サンドボックスや trust ladder を開発者が制御できる。
ユースケース例

会話文脈に合わせた動的フォーム生成、リモートサブエージェントが返す UI をメインチャット内に表示、企業向けエージェントによる承認ダッシュボードや可視化のオンザフライ生成、MCP アプリを A2UI サーフェス内に埋め込む統合など。

2 — アーキテクチャ
フロー

UI の「生成」と「実行」を分離する。

段階説明
Generationエージェント（Gemini 等）が A2UI Response（JSONL）を生成。Agent SDK がカタログに基づくプロンプト生成・ストリーミング解析・検証を担う。
Transportメッセージをクライアントへ送る（A2A, AG-UI, REST, WebSocket, MCP 等）。
Resolutionクライアントの A2UI Renderer（web_core 等）が JSON をパース・検証。
Rendering抽象コンポーネント（例: type: 'text-field'）をクライアントのネイティブ実装にマッピングして描画。
トランスポート
方式状態備考
A2A ProtocolCompleteネイティブ A2A トランスポート。A2A 拡張仕様あり。
AG-UICompleteCopilotKit 等との day-zero 互換。
REST APICompleteHTTP リクエスト/レスポンス。
WebSocketsComplete双方向通信。
MCPCompleteModel Context Protocol 経由のコンテキスト共有・MCP Apps 統合。
3 — プロトコル
仕様バージョン
バージョン状態備考
v0.8Prior（レガシー）初回パブリックリリース。メッセージ名は beginRendering / surfaceUpdate / dataModelUpdate 等。
v0.9Prior機能完成版。メッセージ名を createSurface / updateComponents / updateDataModel に整理。
v0.9.1Currentv0.9 系の安定パッチリリース。新規開発の推奨起点。
v1.0Candidateリリース候補。basic catalog・conformance・eval が拡充。
メッセージタイプ（v0.9 系）

サーバーからクライアントへ、1 行 1 メッセージの JSONL ストリームで通信。v0.9 系の主な 4 種類は次のとおり（各メッセージに "version": "v0.9" を含む）。

メッセージ役割
createSurface新しいサーフェスを作成し、使用するカタログを指定。描画開始の合図。
updateComponents指定サーフェスに追加・更新するコンポーネント定義のリストを送る。
updateDataModelサーフェスのデータモデルにデータを挿入または置換。
deleteSurfaceサーフェスとその内容を UI から明示的に削除。

トランスポートはプロトコルから分離。順序保証・メッセージ区切り・メタデータ（データモデル同期や capability 交換）を満たす必要がある。双方向（action の返送）はオプション。

4 — レンダラー・エコシステム
公式レンダラー

web_core は Web レンダラー共通のコアライブラリ。Lit / Angular / React がこれを共有する。

レンダラープラットフォームv0.8v0.9.1v1.0
Lit（Web Components）WebStableStablePlanned
ReactWebStableStablePlanned
AngularWebStableStablePlanned
Flutter（GenUI SDK）Mobile / Web / DesktopStableStablePlanned
Markdown-itWeb———

Markdown-it レンダラーは Lit 等と組み合わせて利用。Roadmap では SwiftUI（Q2 2026 予定）、Jetpack Compose、Vue 等の追加が掲げられている。コミュニティ製 Lynx A2UI、json-render、A2UI-Android 等もエコシステムに存在する。

レンダラーの責務
  1. トランスポートから A2UI メッセージを受信
  2. JSON をパースしスキーマで検証
  3. プラットフォームネイティブコンポーネントで描画
  4. アプリのテーマに従ってスタイル適用
  5. ユーザー action をエージェントへルーティング
5 — Agent SDK
Python Agent SDK

agent_sdks/python/ 配下に a2ui_core（コア処理・検証・レンダリング基盤）と a2ui_agent（プロンプト生成・ストリーミングパーサ・ADK 連携）がある。エージェント側の責務は capability 管理、プロンプトエンジニアリング、A2UI ペイロード検証。

レイヤ役割
CatalogConfig / A2uiCatalogコンポーネントスキーマをカタログとして読み込み、LLM 向け指示文を生成。
InferenceStrategyロール・ワークフロー・UI 説明を組み合わせた system prompt を組み立て。
Streaming ParserLLM 出力をストリーム解析し、部分的/完全な UI メッセージを逐次 yield。
Validator生成 JSON をスキーマで検証し、A2A DataPart 等のトランスポートエンベロープへ包む。
ADK 連携send_a2ui_to_client_toolset 等で Google ADK エージェントからクライアントへ A2UI を送信。

Experimental として A2UI Express DSL（コンパイラ・デコンパイラ）も含まれる。agent_sdks/conformance/ で言語横断の適合性テストスイートが提供される。

6 — 開発ツール
ブラウザで試す
ツールURL用途
A2UI Composera2ui-composer.ag-ui.comビジュアルエディタで A2UI JSON を生成し、エージェントプロンプトへ貼り付け。
A2UI TheatertheaterLit / React / Angular レンダラー向けのストリーミングシナリオをステップ再生。
Widget BuilderCopilotKit公開デモでウィジェットを試作。
リポジトリ内ツール
  • Composer（tools/composer）— CopilotKit ベースのウィジェットビルダー。ローカル実行可。
  • Editor / Inspector（tools/editor, tools/inspector）— A2UI ペイロードの編集・デバッグ。
  • build_catalog（tools/build_catalog）— カタログ JSON の組み立て。
  • eval（eval/）— LLM 生成品質の評価フレームワーク。
7 — 使い方
入門パス
パス内容目安時間
Quickstart Restaurant FinderGemini ADK エージェント + Lit レンダラーのフルスタックデモ約 5 分
A2UI + AG-UInpx copilotkit@latest init 後、任意フレームワークで A2UI レンダリングを有効化約 5 分
Composer / Theaterインストール不要。ブラウザで JSON 生成・ストリーミング確認約 1 分
Restaurant Finder デモ（ローカル）

前提: Node.js 18+（Corepack 有効）、uv、Gemini API Key。

git clone https://github.com/a2ui-project/a2ui.git
cd a2ui
export GEMINI_API_KEY="your_gemini_api_key"
corepack enable
yarn install
cd samples/client/lit
yarn demo:restaurant

yarn demo:restaurant が依存関係のビルド、Python エージェント起動、クライアント（http://localhost:5173）起動まで一括で行う。Flutter 利用時は GenUI SDK を参照。

公式・関連