Google Agent-to-User Interfaceとは？エージェント主導でUIを安全に生成するA2UIの全体像を解説
- A2UI自体は無料で利用できる仕様とライブラリ
- GeminiなどLLMの推論APIは別途有料で発生
- UI設計図と実行の分離により安全性と再利用性を確保
2025年12月、Googleから新たなAIエージェントツールが登場！
今回登場した「Agent-to-User Interface」はエージェントが「UIを話す」ことを可能にするライブラリセットです。これだけではわかりにくいので、本記事ではAgent-to-User Interfaceの概要から仕組み、実際の実装方法、活用事例を紹介します。
本記事を最後までお読みいただければAgent-to-User Interfaceがどういったものなのか理解が深まります。ぜひ最後までお読みください。
＼生成AIを活用して業務プロセスを自動化／
Agent-to-User Interfaceの概要
Agent-to-User Interface(A2UI)は、AIエージェントがリッチなUIを「生成して届ける」ためのオープンライブラリ群です。
従来のテキスト中心の対話だけでは、予約や入力フォームのようなインタラクティブ操作が扱いにくい場面が多かったです。そこでA2UIでは、エージェントが実行可能コードではなく、UIの意図を表す宣言的なJSONを送る設計が採られています。
クライアント側は受け取ったJSONを、自身のネイティブなコンポーネントライブラリ(Flutter、Angular、Litなど)でレンダリング可能。結果として、コード並みに表現力を保ちつつ「データのように安全に」UIを扱えるようになっています。
A2UIが想定している課題は、リモートで動くエージェントや異なるサーバーや組織などをまたぐ環境でのUI提示であり、「コンポーネントのカタログ」をクライアントが管理し、エージェントは承認済み部品の範囲でUIを要求する方針となっています。
この発想により、エージェント側の生成と、クライアント側の実行を切り離すことが可能となりました。
Agent-to-User Interfaceの仕組み
ここでは、A2UIがどのような流れでUIを生成し、ユーザーに提示するのかを解説します。
単なる画面表示ではなく、エージェントとクライアントの役割分担が明確に定義されている点が重要であり、基本的には、A2UIではエージェントはUIそのものを描画しません。
エージェントは「どのコンポーネントを、どの構造で表示したいか」を宣言的なJSONとして生成。このJSONは実行可能コードを含まず、UIの意図だけを表現する形式となっています。
そのため、エージェントが生成する内容はデータとして扱われ、クライアント側で安全に解釈できる仕組みです。
次に、入力から出力までの処理フロー。ユーザーの操作や要求は、まずエージェントに伝えられます。エージェントはタスクの文脈を理解した上で、必要なUI構造をJSONとして返します。
クライアントは受け取ったJSONを検証し、自身が管理するコンポーネントカタログと照合。対応する部品が存在する場合のみレンダリングが行われる流れです。
この段階で、未定義の要素や許可されていない表現は無視またはエラーとして扱われます。
技術的な工夫として特徴的なのが、コンポーネント主導のアプローチです。UIで利用できる部品は、あらかじめクライアント側で定義・管理されています。
エージェントはその仕様を前提にJSONを生成するため、自由度と制御性のバランスが取れています。これにより、UIインジェクションや任意コード実行といったリスクを避けられる構成になります。
Agent-to-User Interfaceの特徴
ここでは、A2UIの主な特徴を解説します。A2UIでは単にUIを生成できるという話ではなく、設計思想そのものに特徴があります。
宣言的UIによる安全性の確保
A2UIの最も大きな特徴は、UIを宣言的なJSONとして表現する点。エージェントは実行可能コードを返さず、UIの構造と意図のみを記述します。
これにより、任意コード実行やUIインジェクションのリスクを根本から抑制できると考えられます。クライアントはデータとして受け取った内容を検証し、許可された形でのみ描画可能。
クライアント主導のコンポーネント管理
A2UIでは、UIコンポーネントの定義と管理はクライアント側が担います。エージェントは、そのカタログを前提としてUIを組み立てます。
この構造により、UIの見た目や挙動は各プロダクトの設計方針に沿って統制が可能。一方で、エージェントは高レベルな意図表現に集中できる点が特徴です。
フレームワーク非依存の柔軟性
A2UIは特定のUIフレームワークに依存しない設計となっています。JSONで定義されたUIは、FlutterやAngular、Litなど、異なる技術スタックで利用できます。
そのため、同じエージェントロジックを複数のクライアント環境で再利用できる可能性があり、マルチプラットフォーム展開を前提としたプロダクトでは、特に有効です。
信頼境界を越えたUI連携への対応
A2UIは、エージェントとクライアントが異なる信頼境界にある状況を想定しています。例えば、外部サービスが提供するエージェントがUIを提案するケースです。
この場合でも、クライアントは自身のルールに基づいて描画可否を判断できます。結果として、制御不能なUI変更を防ぎつつ連携が可能です。
なお、高速・高知能を両立する実運用向けLLMであるGemini 3 Flashについて詳しく知りたい方は、下記の記事を合わせてご確認ください。
Agent-to-User Interfaceの安全性・制約
ここでは、A2UIにおける安全性と利用時に理解しておくべき制約を解説します。
A2UIは柔軟なUI連携を可能にする一方で、明確な前提条件が設けられています。
まず、任意コードを実行させないという設計です。A2UIでエージェントが返すのは、あくまで宣言的なJSON表現に限定されます。
このJSONはUIの構造や意図を示すだけで、ロジックやスクリプトは含みません。
そのため、従来問題になりがちだったUIインジェクションやコード注入のリスクを低減できると考えられます。
次に、クライアント側での検証と制御についてです。
A2UIでは、クライアントが利用可能なコンポーネントのカタログを管理します。エージェントから受け取ったJSONは、このカタログと照合されます。未定義のコンポーネントや許可されていない属性が含まれる場合、描画されません。
UIの最終的な主導権はクライアント側にあるという前提となっています。
一方で、制約として理解すべき点もあります。
エージェントは、クライアントが提供するコンポーネントの範囲を超えたUIを生成できません。自由度の高いカスタムUIや独自ロジックが必要な場合、A2UIだけでは不十分なケースも想定されます。
また、JSON仕様やコンポーネント定義が変化した場合、双方の同期が必要。
Agent-to-User Interfaceの料金
A2UI自体は無料で利用できますが、A2UIを使うエージェントの頭脳であるLLM(Gemini,Claudeなど)のAPI利用料は別途料金がかかります。
Agent-to-User Interfaceのライセンス
A2UIは、Apache 2.0ライセンスで提供されており、商用利用を含む幅広い用途で自由に利用可能です。
| 利用用途 | 可否 | 備考 |
|---|---|---|
| 商用利用 | ⭕️ | |
| 改変 | ⭕️ | |
| 配布 | ⭕️ | |
| 特許使用 | ⭕️ | |
| 私的使用 | ⭕️ |
なお、Google DeepMindの次世代AIエージェントであるSIMA 2について詳しく知りたい方は、下記の記事を合わせてご確認ください。
Agent-to-User Interfaceの実装方法
では実際に使っていきます。A2UIは大きいサイズのファイルをダウンロードする必要がないので、ローカル環境で実行していきます。
まずはNode.jsがインストール済みかをチェックしておきましょう。
node -v
npm -vまた、uvが入っているかのチェックもします。
uv -V両者とも入っていれば次に進みましょう。
git clone https://github.com/google/A2UI.git
cd A2UIリポジトリをクローンできたら、Gemini APIを環境変数に設定です。
export GEMINI_API_KEY="YOUR_GEMINI_API_KEY"A2UIは依存関係から起動までをまとめて動かすデモコマンドがGitHubに掲載されているので、それに基づいて実行。
cd samples/client/lit
npm install
npm run demo:all実際に動かしている様子がこちらです。
ターミナル側がA2UIで肝になる部分です。ここにJSON形式でデータが記載されていきます。
Agent-to-User Interfaceの活用事例
ここでは、A2UIの特徴や仕組みを踏まえた活用事例を解説します。
マルチプラットフォーム対応アプリでの利用
A2UIはフレームワーク非依存である点が特徴。同一のエージェントから生成されたUI定義を、Webやモバイルアプリで再利用できます。
クライアントごとに最適なコンポーネントで描画できるため、見た目や操作性を損ないません。開発コストを抑えつつデザインなどを統一できる点がメリットになるでしょう。
外部エージェント連携サービスでの活用
外部サービスが提供するエージェントとUIを連携させる用途も考えられます。信頼境界をまたぐ環境では、任意コード実行が大きなリスクとなりました。
A2UIでは、許可されたコンポーネントのみを描画する仕組みが採用されています。そのため、外部エージェントの提案を安全にUIとして取り込めます。
対話型アプリケーションのUX向上
チャット中心のUIでは、複雑な操作が分かりにくい場面があります。A2UIを使えば、会話の流れに応じてボタンや入力欄を動的に提示可能。
ユーザーは文章入力に頼らず、直感的な操作ができるようになります。結果として、UX全体の改善につながると考えられます。
Agent-to-User Interfaceを実際に使ってみた
先ほどはデモサイトで実行をしましたが、今度はA2UI Composerを使っていきます。
出力されたJSONの内容がこちら
[
{
"id": "root",
"component": {
"Column": {
"children": {
"explicitList": [
"title",
"productList",
"nameField",
"emailField",
"addressField",
"paymentMethodField",
"agreeCheckbox",
"submitButton"
]
},
"distribution": "start",
"alignment": "stretch"
}
}
},
{
"id": "title",
"component": {
"Text": {
"text": {
"literalString": "注文画面"
},
"usageHint": "h2"
}
}
},
{
"id": "productList",
"component": {
"List": {
"children": {
"template": {
"componentId": "productItemTemplate",
"dataBinding": "/form/products"
}
},
"direction": "vertical",
"alignment": "start"
}
}
},
{
"id": "productItemTemplate",
"component": {
"Row": {
"children": {
"explicitList": [
"productName",
"productQuantity"
]
},
"distribution": "spaceBetween",
"alignment": "center"
}
}
},
{
"id": "productName",
"component": {
"Text": {
"text": {
"path": "/form/products/0/name"
},
"usageHint": "body"
}
}
},
{
"id": "productQuantity",
"component": {
"Text": {
"text": {
"literalString": "数量: "
}
}
}
},
{
"id": "nameField",
"component": {
"TextField": {
"label": {
"literalString": "お名前"
},
"text": {
"path": "/form/name"
},
"textFieldType": "shortText"
}
}
},
{
"id": "emailField",
"component": {
"TextField": {
"label": {
"literalString": "メールアドレス"
},
"text": {
"path": "/form/email"
},
"textFieldType": "shortText"
}
}
},
{
"id": "addressField",
"component": {
"TextField": {
"label": {
"literalString": "配送先住所"
},
"text": {
"path": "/form/address"
},
"textFieldType": "longText"
}
}
},
{
"id": "paymentMethodField",
"component": {
"MultipleChoice": {
"selections": {
"path": "/form/paymentMethod"
},
"options": {
"path": "/paymentOptions"
},
"maxAllowedSelections": 1
}
}
},
{
"id": "agreeCheckbox",
"component": {
"CheckBox": {
"label": {
"literalString": "利用規約に同意する"
},
"value": {
"path": "/form/agreeTerms"
}
}
}
},
{
"id": "submitButton",
"component": {
"Button": {
"child": "submitButtonText",
"primary": true,
"action": {
"name": "submitOrder"
}
}
}
},
{
"id": "submitButtonText",
"component": {
"Text": {
"text": {
"literalString": "注文を確定する"
}
}
}
}
]
A2UI Composerを使うと、かなり便利なのがわかりました…！正直GitHubのサンプルコードを実行するだけでは、どういった利点があるのかが不明確でしたが、A2UI Composerを使うと良さが実感できます…！
なお、並列探索で調査精度を高めるGemini Deep Research agentについて詳しく知りたい方は、下記の記事を合わせてご確認ください。
まとめ
本記事ではA2UIの概要から仕組み、実際の使い方について解説をしました。A2UI Composerを使うと適切なJSONが返されるので、返されたJSONをそのままUIランタイムが解釈して描画することができます。
ぜひ皆さんも本記事を参考にA2UI Composerを使ってみてください！
最後に
いかがだったでしょうか？
Agent-to-User Interfaceの仕組みや活用可能性を把握することで、AIエージェント時代のUI設計に向けた具体的な判断材料が得られるでしょう。
株式会社WEELは、自社・業務特化の効果が出るAIプロダクト開発が強みです！
開発実績として、
・新規事業室での「リサーチ」「分析」「事業計画検討」を70％自動化するAIエージェント
・社内お問い合わせの1次回答を自動化するRAG型のチャットボット
・過去事例や最新情報を加味して、10秒で記事のたたき台を作成できるAIプロダクト
・お客様からのメール対応の工数を80％削減したAIメール
・サーバーやAI PCを活用したオンプレでの生成AI活用
・生徒の感情や学習状況を踏まえ、勉強をアシストするAIアシスタント
などの開発実績がございます。
生成AIを活用したプロダクト開発の支援内容は、以下のページでも詳しくご覧いただけます。
➡︎株式会社WEELのサービスを詳しく見る。
まずは、「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。
➡︎生成AIを使った業務効率化、生成AIツールの開発について相談をしてみる。
「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。
セミナー内容や料金については、ご相談ください。
また、サービス紹介資料もご用意しておりますので、併せてご確認ください。
