A2UIは、エージェントによって生成・更新されるUIを表現するために最適化されたオープンソースプロジェクトです。定義フォーマットと初期のレンダラーセットで構成されており、エージェントがリッチなユーザーインターフェースを生成したり、データを入力したりすることを可能にします。
A2UIでレンダリングされたカードのギャラリー。A2UIで実現可能な多様なUI構成を示しています。
注意: A2UIは現在 v0.8 (パブリックプレビュー) 段階にあります。仕様および実装は機能していますが、現在も進化を続けています。コラボレーションを促進し、フィードバックを収集し、コントリビューション（特にクライアントレンダラーについて）を募るために、プロジェクトを公開しました。変更が加えられる可能性があることをご了承ください。
生成AIはテキストやコードの生成には優れていますが、エージェントがユーザーにリッチでインタラクティブなインターフェースを提示しようとすると、特にエージェントがリモートで動作している場合や信頼境界を超えて動作している場合に、困難が生じることがあります。
A2UIは、エージェントが「UIを話す」ことを可能にするオープンスタンダードおよびライブラリセットです。エージェントはUIの「意図」を記述した宣言型のJSONフォーマットを送信します。クライアントアプリケーションは、これを自身が持つネイティブコンポーネントライブラリ（Flutter、Angular、Litなど）を使用してレンダリングします。
このアプローチにより、エージェントが生成するUIは、**「データのように安全でありながら、コードのように表現力豊か」**になります。
A2UIは、エージェントによる相互運用可能なマルチプラットフォーム対応の、生成型またはテンプレートベースのUIレスポンス特有の課題を解決するために設計されました。
プロジェクトの核となる理念は以下の通りです：
- セキュリティ第一 (Security first): LLMによって生成された任意のコードを実行することは、セキュリティリスクを伴う可能性があります。A2UIは宣言型のデータフォーマットであり、実行可能なコードではありません。クライアントアプリケーションは、信頼できる事前承認済みのUIコンポーネント（カード、ボタン、テキストフィールドなど）の「カタログ」を保持し、エージェントはそのカタログに含まれるコンポーネントのレンダリングのみをリクエストできます。
- LLMフレンドリーかつ段階的な更新 (LLM-friendly and incrementally updateable): UIはIDで参照されるコンポーネントのフラットなリストとして表現されます。これにより、LLMが段階的に生成しやすくなり、プログレッシブレンダリングとレスポンスの良いユーザー体験が可能になります。エージェントは、会話の進行に伴う新しいユーザーリクエストに基づいて、UIを効率的かつ段階的に変更できます。
- フレームワーク非依存かつポータブル (Framework-agnostic and portable): A2UIはUIの構造と実装を分離します。エージェントはコンポーネントツリーの説明と、それに関連付けられたデータモデルを送信します。クライアントアプリケーションは、これらの抽象的な説明を、Webコンポーネント、Flutterウィジェット、Reactコンポーネント、SwiftUIビューなど、自身のネイティブウィジェットにマッピングする責任を持ちます。エージェントからの同じA2UI JSONペイロードを、異なるフレームワークで構築された複数の異なるクライアントでレンダリングできます。
- 柔軟性 (Flexibility): A2UIは、開発者がサーバー側の型をネイティブモバイルウィジェットからReactコンポーネントまで、カスタムクライアントの実装にマッピングできるオープンレジストリパターンも備えています。「スマートラッパー (Smart Wrapper)」を登録することで、既存のあらゆるUIコンポーネント（レガシーコンテンツ用の安全なiframeコンテナを含む）をA2UIのデータバインディングおよびイベントシステムに接続できます。重要なのは、これによりセキュリティが開発者の手に委ねられ、コアシステムだけに頼るのではなく、カスタムコンポーネントのロジック内で厳格なサンドボックスポリシーや「信頼のはしご (trust ladders)」を直接実行できる点です。
以下のようなユースケースが含まれます：
- 動的なデータ収集: エージェントが、会話の特定のコンテキスト（例：専門的な予約の申し込み）に基づいて、オーダーメイドのフォーム（日付選択、スライダー、入力項目）を生成します。
- リモートサブエージェント: オーケストレーターエージェントが、タスクをリモートの専門エージェント（例：旅行予約エージェント）に委任し、そのエージェントがメインのチャットウィンドウ内でレンダリングされるUIペイロードを返します。
- 適応型ワークフロー: ユーザーのクエリに基づいて、承認ダッシュボードやデータの可視化をオンザフライで生成するエンタープライズエージェント。
A2UIのフローは、UIの生成とUIの実行を切り離します：
- 生成 (Generation): エージェント（Geminiまたは他のLLMを使用）が、UIコンポーネントの構成とそのプロパティを記述したJSONペイロードである
A2UI Responseを生成または使用します。 - 伝送 (Transport): このメッセージがクライアントアプリケーションに送信されます（A2A、AG UIなどを介して）。
- 解決 (Resolution): クライアントのA2UI RendererがJSONを解析します。
- レンダリング (Rendering): レンダラーが抽象的なコンポーネント（例：
type: 'text-field'）を、クライアントのコードベース内の具体的な実装にマッピングします。
A2UIは軽量なフォーマットとして設計されていますが、大きなエコシステムの一部として機能します：
- 伝送 (Transports): A2A ProtocolおよびAG UIと互換性があります。
- LLM: JSON出力が可能なあらゆるモデルで生成可能です。
- ホストフレームワーク: サポートされているフレームワーク（現在はWebまたはFlutter）で構築されたホストアプリケーションが必要です。
A2UIを理解するための最良の方法は、サンプルを実行することです。
- Node.js (Webクライアント用)
- Python (エージェントサンプル用)
- サンプルを実行するには、有効な Gemini APIキー が必要です。
-
リポジトリをクローンする:
git clone https://github.com/google/A2UI.git cd A2UI -
APIキーを設定する:
export GEMINI_API_KEY="あなたのgemini_api_key"
-
エージェントを実行する (バックエンド):
cd samples/agent/adk/restaurant_finder uv run .
-
クライアントを実行する (フロントエンド): 新しいターミナルウィンドウを開きます：
# Litレンダラーをインストールしてビルドする cd renderers/lit npm install npm run build # シェルクライアントをインストールして実行する cd ../../samples/client/lit/shell npm install npm run dev
Flutter開発者の方は、内部でA2UIを使用している GenUI SDK もぜひチェックしてください。
CopilotKitも、試用可能な公開 A2UI Widget Builder を提供しています。
コミュニティと共に、以下の項目に取り組んでいきたいと考えています：
- 仕様の安定化: v1.0仕様へ向けた前進。
- より多くのレンダラー: React、Jetpack Compose、iOS (SwiftUI) などの公式サポート。
- 追加の伝送方式: RESTなどのサポート。
- 追加のエージェントフレームワーク: Genkit、LangGraphなどのサポート。
A2UIは Apache 2.0 ライセンスプロジェクトです。私たちはUIの未来は「エージェント的 (agentic)」であると信じており、その構築を支援するために皆さんと協力したいと考えています。
開始方法の詳細については、CONTRIBUTING.md を参照してください。