AIエージェントが自らUIを組み立てる！安全で美しいインターフェースを自動生成する新標準 — A2UI

アーキテクチャ・仕組み

A2UIは「UI生成」と「UI実行」を分離する4段階のフローで動作します:

1. Generation（生成）: Geminiなどの LLM がUIコンポーネントの構成を記述した A2UI Response（JSON）を生成
2. Transport（転送）: A2AプロトコルやAG UIなどを通じてクライアントに送信
3. Resolution（解析）: クライアント側の A2UI Renderer が JSON をパース
4. Rendering（描画）: 抽象的なコンポーネント（例: type: 'text-field'）をクライアント固有のウィジェットにマッピングして描画

セキュリティモデル

• A2UIは宣言的データ形式であり、実行可能コードではない
• クライアント側で事前承認済みの「カタログ」に登録されたコンポーネント（Card, Button, TextFieldなど）のみ描画可能
• 「Smart Wrapper」パターンにより、iframeサンドボックスや独自のセキュリティポリシーを開発者が制御可能
• 「trust ladder（信頼レベルの段階制御）」をカスタムコンポーネント内で実装可能

LLMとの親和性

• UIはフラットリスト＋IDリファレンスで表現され、LLMが逐次的に生成しやすい構造
• 段階的レンダリング（progressive rendering）に対応し、レスポンシブなUX を実現
• 会話の進行に応じて差分だけを効率的に更新可能

対応環境・フレームワーク

拡張性・カスタマイズ

• オープンレジストリパターン: サーバー側の型をカスタムクライアント実装にマッピング可能
• Smart Wrapper: 既存UIコンポーネント（ネイティブウィジェット、Reactコンポーネント等）をA2UIのデータバインディング・イベントシステムに接続可能

主なユースケース

• 動的フォーム生成: 会話コンテキストに応じたカスタムフォーム（日付ピッカー、スライダー等）
• リモートサブエージェント: 旅行予約エージェント等の専門エージェントがUI付きの結果を返却
• 適応型ワークフロー: クエリに応じた承認ダッシュボードやデータ可視化の動的生成

現在のステータスとロードマップ

• 現在 v0.8（パブリックプレビュー） — 仕様・実装は動作するが進化中
• v1.0仕様の安定化を目指している
• React、Jetpack Compose、SwiftUI等の公式レンダラー追加を計画

ライセンス

• Apache 2.0 ライセンス（商用利用可能）

連携ツール

• CopilotKit A2UI Widget Builder でオンライン試用可能

前提条件

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

レストラン検索デモの実行

1. リポジトリをクローン:

git clone https://github.com/google/A2UI.git
cd A2UI

1. APIキーを設定:

export GEMINI_API_KEY="your_gemini_api_key"

1. エージェント（バックエンド）を起動:

cd samples/agent/adk/restaurant_finder
uv run .

1. クライアント（フロントエンド）を起動（別ターミナル）:

cd renderers/markdown/markdown-it
npm install && npm run build
cd ../../web_core
npm install && npm run build
cd ../lit
npm install && npm run build
cd ../../samples/client/lit/shell
npm install && npm run dev