A2UIとは何ですか？¶

A2UI (Agent to UI) は、エージェント主導のインターフェースのための宣言的なUIプロトコルです。 AIエージェントは、任意のコードを実行することなく、Web、モバイル、デスクトップなどの多様なプラットフォームでネイティブにレンダリングされる、リッチでインタラクティブなUIを生成できます。

課題¶

テキストのみのエージェントとの対話は非効率的です：

ユーザー: "明日午後7時に2名で予約して"
エージェント: "わかりました。どの日付ですか？"
ユーザー: "明日です"
エージェント: "何時ですか？"
...

より良い方法： エージェントが日付選択、時間選択、および送信ボタンを含むフォームを生成します。ユーザーはテキストではなくUIと対話します。

課題の背景¶

マルチエージェントシステムでは、エージェントはしばしばリモート（別のサーバーや組織）で実行されます。エージェントはあなたのUIを直接操作することはできず、必ずメッセージを送信しなければなりません。

既存のアプローチ： iframeにHTML/JavaScriptを含めて送信する

重く、視覚的な一貫性がない
セキュリティ上の複雑さが増大する
アプリのスタイルに馴染まない

必要なもの： データのように安全で、コードのように表現力豊かなUI送信方式。

解決策¶

A2UIは、以下の機能を持つUI記述用のJSONメッセージです：

LLMが構造化された出力として生成可能
あらゆるトランスポート層 (A2A, AG UI, SSE, WebSockets) を通じて配信可能
クライアントが独自のネイティブコンポーネントを使用してレンダリング

結果： クライアントがセキュリティとスタイルを制御し、エージェントが生成したUIがネイティブアプリのように感じられます。

例¶

{"surfaceUpdate": {"surfaceId": "booking", "components": [
  {"id": "title", "component": {"Text": {"text": {"literalString": "テーブルを予約する"}, "usageHint": "h1"}}},
  {"id": "datetime", "component": {"DateTimeInput": {"value": {"path": "/booking/date"}, "enableDate": true}}},
  {"id": "submit-text", "component": {"Text": {"text": {"literalString": "確定"}}}},
  {"id": "submit-btn", "component": {"Button": {"child": "submit-text", "action": {"name": "confirm_booking"}}}}
]}}

{"dataModelUpdate": {"surfaceId": "booking", "contents": [
  {"key": "booking", "valueMap": [{"key": "date", "valueString": "2025-12-16T19:00:00Z"}]}
]}}

{"beginRendering": {"surfaceId": "booking", "root": "title"}}

クライアントは、これらのメッセージをネイティブコンポーネント (Angular, Flutter, Reactなど) でレンダリングします。

コアバリュー¶

1. セキュリティ: コードではなく宣言的なデータです。エージェントは、クライアントの信頼されたカタログにあるコンポーネントのみを要求できます。コード実行のリスクがありません。

2. ネイティブな感覚: iframeを使用しません。クライアントが独自のUIフレームワークでレンダリングします。アプリのスタイル、アクセシビリティ、パフォーマンスをそのまま継承します。

3. ポータビリティ: 1つのエージェントの応答があらゆる場所で機能します。同じJSONがWeb (Lit/Angular/React)、モバイル (Flutter/SwiftUI/Jetpack Compose)、デスクトップでレンダリングされます。

設計原則¶

1. LLMフレンドリー: ID参照構造を持つフラットなコンポーネントリストです。段階的に生成し、間違いを修正し、ストリーミングするのが容易です。

2. フレームワークに依存しない: エージェントは抽象的なコンポーネントツリーを送信します。クライアントはそれをプラットフォームのウィジェット（Web/モバイル/デスクトップ）にマッピングします。

3. 関心の分離: UI構造、アプリケーションの状態、およびクライアントのレンダリングの3つの層に分かれています。データバインディング、リアクティブな更新、およびクリーンなアーキテクチャを可能にします。

A2UIではないもの¶

フレームワークではありません（プロトコルです）
HTMLの代替品ではありません（静的サイトではなく、エージェント生成UI用です）
強力なスタイリングシステムではありません（クライアントがスタイリングを制御し、サーバー側のスタイリングサポートは限定的です）
Webだけに限定されません（モバイルやデスクトップでも動作します）

コアコンセプト¶

サーフェス (Surface): コンポーネントが描画されるキャンバス（ダイアログ、サイドバー、メインビューなど）
コンポーネント (Component): UI要素 (Button, TextField, Cardなど)
データモデル (Data Model): アプリケーションの状態。コンポーネントがこれにバインドされます
カタログ (Catalog): 使用可能なコンポーネントタイプのリスト
メッセージ (Message): JSONオブジェクト (surfaceUpdate, dataModelUpdate, beginRendering など)

類似プロジェクトとの比較は、エージェントUIエコシステムを参照してください。