A2UI

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

1 — 概要
何か

A2UI は、エージェント（LLM 等）が生成する UI を宣言的 JSONで表現するオープン標準と、そのレンダラー群。エージェントは「コード」ではなく「UI の意図」を JSON で送り、クライアント側が信頼済みのカタログに基づいてネイティブなコンポーネント（Flutter / Angular / Lit 等）で描画する。データのように安全で、コードのように表現力がある UI を実現する。

JSON宣言形式
Catalog信頼コンポーネント
A2A / AG UIトランスポート
v0.8+Public Preview
ステータス: v0.8 Public Preview。仕様と実装は動くがまだ進化中。v0.9 / v0.10 の仕様もリポジトリ内にある。
設計思想
  • セキュリティ第一: LLM が生成する任意コードの実行は危険。A2UI は実行可能コードではなく宣言的データ。クライアントが「カタログ」で許可したコンポーネント（Card, Button, TextField 等）だけをレンダリングする。
  • LLM 向け・増分更新: UI はフラットなコンポーネントリストと ID 参照で表現され、LLM が増分的に出力しやすい。プログレッシブレンダリングや会話の進行に合わせた更新が可能。
  • フレームワーク非依存: UI 構造と実装を分離。エージェントは抽象的なコンポーネントツリーとデータモデルを送り、クライアントが自前のウィジェットにマッピングする。同じ A2UI ペイロードを Web / Flutter / React 等で描画できる。
  • 柔軟性: オープンなレジストリで、サーバー側の型をカスタム実装（Smart Wrapper）にマッピングできる。サンドボックスや信頼の段階を開発者が制御できる。
ユースケース例

動的フォーム生成（日付・スライダー・入力欄を会話文脈に合わせて生成）、リモートサブエージェントが返す UI をメインのチャット内に表示、企業向けエージェントによる承認ダッシュボードや可視化のオンザフライ生成など。

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

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

段階説明
Generationエージェント（Gemini 等）が A2UI Response（JSON）を生成。コンポーネント構成とプロパティを記述。
Transportメッセージをクライアントへ送る（A2A, AG UI 等）。
Resolutionクライアントの A2UI Renderer が JSON をパース。
Rendering抽象コンポーネント（例: type: 'text-field'）をクライアントの実装（ウィジェット）にマッピングして描画。
3 — プロトコル
メッセージタイプ

サーバーからクライアントへ、JSON オブジェクトのストリームで通信。主なメッセージは次の 4 種類。

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

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

4 — レンダラー・エコシステム
公式レンダラー
レンダラー説明
Web (Lit)Lit ベースの Web レンダラー。markdown-it レンダラーと web_core を組み合わせて利用。
FlutterGenUI SDK（flutter/genui）が A2UI を利用。
Angular / Reactrenderers 配下に Angular / React 向けの実装がある。

トランスポートは A2A Protocol や AG UI と組み合わせて利用。LLM は JSON を出力できるモデルなら利用可能。Roadmap では React / Jetpack Compose / SwiftUI 等の公式サポートや、REST 等のトランスポート追加が掲げられている。

試す: CopilotKit の A2UI Widget Builder で公開デモがある。
5 — 使い方
前提

Node.js（Web クライアント）、Python（エージェントサンプル）、Gemini API Key が必要。

Restaurant Finder デモ
  1. リポジトリをクローンし、GEMINI_API_KEY を export。
  2. バックエンド: samples/agent/adk/restaurant_finder で uv run .。
  3. フロント: renderers/markdown/markdown-it → npm install && npm run build。続けて renderers/web_core、renderers/lit を同様にビルド。
  4. クライアント: samples/client/lit/shell で npm install && npm run dev。

Flutter 利用時は GenUI SDK を参照。

公式・関連