A2UI 調査レポート

2026年04月18日

開発元: Google

カテゴリ: Developer Tools

公式サイト GitHub DeepWiki CodeWiki

AIエージェントがセキュアかつネイティブにUIを生成・操作できるようにする宣言型UIプロトコル。

総合評価

85点

基準点70点からの評価

オープンソース

OSS

無料プラン

あり

最低価格

無料

対象ユーザー

AIエージェント開発者フロントエンドエンジニア

更新頻度

高

🆕 最新情報: v0.8の公開プレビューを提供中

📋 評価の詳細

👍 加点項目

+5 任意のコード実行を防ぐセキュアな設計
+5 フレームワーク非依存でWeb・モバイル・デスクトップに対応
+5 オープンソースとして公開されている

👎 減点項目

0 現在はアーリーステージのパブリックプレビュー段階であり、仕様が変更される可能性がある

総評: AIエージェントによるUI生成の課題を解決する、セキュアで将来性の高いプロトコル。

A2UI 調査レポート

1. 基本情報

ツール名: A2UI (Agent-to-User Interface)
ツールの読み方: エーツーユーアイ
開発元: Google
公式サイト: https://a2ui.org/
関連リンク:
- GitHub: https://github.com/google/A2UI
カテゴリ: Developer Tools
概要: AIエージェントが、テキストだけでなくリッチでインタラクティブなUIを生成し、操作するためのオープンな宣言型UIプロトコル。セキュリティを確保しつつ、ネイティブなコンポーネントを用いた柔軟なUI描画を可能にする。

2. 目的と主な利用シーン

解決する課題: LLMを用いたエージェントはテキストやコードの生成には優れているが、リモートや異なるトラストバウンダリを越えてリッチなUIを提供することには課題があった（任意のコード実行リスクやiframeによる制約など）。A2UIはこれを解決し、安全かつネイティブなUI生成を可能にする。
想定利用者: AIエージェント開発者、フロントエンドエンジニア、プラットフォーム開発者
利用シーン:
- 動的なデータ収集: 会話の文脈に合わせて、専用のフォーム（日付選択、スライダー、入力欄など）を動的に生成する。
- リモートサブエージェント: メインのオーケストレーターが専門エージェント（旅行予約など）にタスクを委譲し、その結果をメインチャット画面内にUIペイロードとして描画する。
- アダプティブワークフロー: ユーザーの要求に応じて、承認ダッシュボードやデータ可視化UIを即座に生成する。

3. 主要機能

宣言型UI記述: UIの構造をJSONフォーマットで表現し、LLMが段階的に生成・更新しやすい形式を提供する。
セキュアなコンポーネント呼び出し: エージェントはクライアントが持つ「カタログ（事前承認されたUIコンポーネントのリスト）」から描画をリクエストするのみであり、任意のコード実行を防ぐ。
フレームワーク非依存: A2UIのJSONペイロードは、Lit、Angular、React（Web）、Flutter、SwiftUI（モバイル）など、複数の異なるフレームワーク・クライアントで描画可能。
データバインディング: UI構造、アプリケーション状態（データモデル）、クライアント描画を分離し、データバインディングによるリアクティブな更新を実現する。
カスタムコンポーネントの統合: 既存のUIコンポーネントやレガシーコンテンツ向けのセキュアなiframeラッパーなどを、A2UIのデータバインディングやイベントシステムに接続可能。

4. 開始手順・セットアップ

前提条件:
- Node.js (Webクライアント用)
- Python (エージェントサンプル用)
- Gemini API Key (サンプルの実行に必要)

インストール/導入:

# リポジトリのクローン
git clone https://github.com/google/A2UI.git
cd A2UI

初期設定:
- APIキーの設定: export GEMINI_API_KEY="your_gemini_api_key"

クイックスタート:

エージェント（バックエンド）の実行:
```
cd samples/agent/adk/restaurant_finder
uv run .
```

クライアント（フロントエンド）のビルドと実行:

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

5. 特徴・強み (Pros)

セキュリティファースト: コードではなくデータを送信するため、LLMによる任意のコード生成・実行リスクがない。
ネイティブな使い心地: iframeに依存せず、クライアントのネイティブコンポーネントを使用するため、アプリケーションのスタイリング、アクセシビリティ、パフォーマンスを引き継げる。
高い移植性: 同一のA2UI JSONペイロードで、Web、モバイル、デスクトップなど様々なプラットフォーム向けに描画が可能。
LLM親和性: ID参照を用いたフラットなコンポーネントリスト構造により、LLMが段階的に生成・修正・ストリーミングしやすい設計。

6. 弱み・注意点 (Cons)

アーリーステージ: 現在はv0.8のパブリックプレビュー段階であり、仕様や実装が変更される可能性がある。
堅牢なスタイリングシステムの非サポート: 意図的にスタイリングはクライアント側に委ねており、サーバーサイドからの柔軟なスタイリングには制限がある。
エコシステムの発展途上: React、iOS (SwiftUI)、Jetpack Composeなどの公式レンダラーサポートは今後のロードマップとなっている。

7. 料金プラン

プラン名	料金	主な特徴
オープンソース	無料	Apache License 2.0 に基づき全機能が無料で利用可能

課金体系: なし (オープンソース)
無料トライアル: なし (全体が無料)

8. 導入実績・事例

導入企業: 現在はパブリックプレビュー段階のため、大規模な公開事例は限定的。
導入事例: CopilotKitによるA2UI Widget Builderの提供など、エージェントプラットフォームでの実験的統合が進んでいる。
対象業界: AI開発、SaaS開発、エンタープライズツール

9. サポート体制

ドキュメント: 公式サイト (a2ui.org) にて、概念からセットアップガイド、リファレンスまで包括的なドキュメントが提供されている。
コミュニティ: GitHubのIssueやDiscussionsを通じたオープンソースコミュニティでのやり取り。
公式サポート: オープンソースプロジェクトのため、企業向けの専用サポート窓口は提供されていない。

10. エコシステムと連携

10.1 API・外部サービス連携

API: A2A ProtocolやAG UIなどのトランスポートレイヤーと互換性がある。
外部サービス連携: JSON出力が可能な任意のLLM（Geminiなど）で生成可能。GenUI SDK (Flutter) などでも内部的に活用されている。

10.2 技術スタックとの相性

技術スタック	相性	メリット・推奨理由	懸念点・注意点
Lit / Web Components	◎	公式レンダラーが提供されており、サンプルも充実	特になし
Flutter	◎	GenUI SDKを通じて統合可能	特になし
React	◯	コミュニティによる対応または今後の公式サポート予定	現在は公式のフルサポート前
SwiftUI / Jetpack Compose	△	ロードマップに含まれているが未提供	自前でレンダラーの実装が必要

11. セキュリティとコンプライアンス

認証: A2UIはUIプロトコルであり、認証・認可はトランスポート層およびクライアント・サーバーのアプリケーション層で実装する前提。
データ管理: セキュリティファーストを掲げ、実行可能コードではなく宣言的なデータをやり取りすることで、XSSなどのリスクを根源的に排除している。
準拠規格: オープンソースソフトウェアとしての一般的な基準に準ずる。

12. 操作性 (UI/UX) と学習コスト

UI/UX: クライアント側のネイティブコンポーネントを使用するため、アプリケーションとシームレスに統合された優れたUXを提供できる。
学習コスト: A2UIのプロトコル仕様自体（Surface、Component、Data Modelなど）を理解する必要がある。クライアント側でのレンダラー統合や、サーバー側でのエージェント開発には一定の学習コストが伴う。

13. ベストプラクティス

効果的な活用法 (Modern Practices):
- クライアント側で事前に承認されたコンポーネントの「カタログ」を定義し、エージェントにはそのカタログに基づく描画のみを許可する。
- UIの構造変更とデータモデルの更新を明確に分離してメッセージングを行う。
陥りやすい罠 (Antipatterns):
- A2UIを用いて静的なWebサイトを構築しようとする（A2UIはエージェント主導の動的インターフェース向け）。
- サーバー側から過度に複雑なスタイリングを強制しようとする（スタイリングはクライアント側に委ねるべき）。

14. ユーザーの声（レビュー分析）

調査対象: GitHub、X (Twitter)、技術ブログなど
総合評価: オープンソースのプレビュー段階のため、商用レビューサイト等でのスコア化はなし。
ポジティブな評価:
- 「AIが生成したUIを安全に描画できる宣言型アプローチは、セキュリティ面で非常に優れている」
- 「iframeの制約から解放され、ネイティブアプリにスムーズに組み込める点が素晴らしい」
ネガティブな評価 / 改善要望:
- 「Reactなど、より多くの主要フレームワーク向けの公式レンダラーサポートを早く提供してほしい」
- 「仕様がまだ流動的なため、本番環境への導入には慎重になる」
特徴的なユースケース:
- エージェントベースのチャットインターフェース内で、複雑なフォームやダッシュボードを動的に生成するユースケース。

15. 直近半年のアップデート情報

2025-XX-XX: A2UI v0.9 (Draft) 仕様の公開。createSurfaceの導入やコンポーネント構造のフラット化など、より洗練されたフォーマットへの進化。
202X-XX-XX: A2UI v0.8 Public Preview版のリリース。

(出典: 公式サイト、GitHub)

16. 類似ツールとの比較

16.1 機能比較表 (星取表)

機能カテゴリ	機能項目	本ツール (A2UI)	Vercel AI SDK UI	汎用JSONアプローチ	iframeアプローチ
基本機能	UI生成	◎ 宣言型	◎ Reactコンポーネントストリーミング	◯ 独自定義必要	◯ HTML生成
セキュリティ	コード実行防止	◎ データのみ	◯ 実装依存	◎ データのみ	× スクリプト実行リスク
プラットフォーム	クロスプラットフォーム	◎ Web/Mobile対応	△ 主にReact/Web	◎ 自作次第	△ Web中心
開発体験	標準化	◯ プロトコル化	◎ Next.js環境で強力	× 標準なし	◯ 既存技術

16.2 詳細比較

ツール名	特徴	強み	弱み	選択肢となるケース
本ツール (A2UI)	プロトコルベースの宣言型UI	セキュア、クロスプラットフォーム対応	エコシステムが発展途上	複数の異なるプラットフォームでネイティブUIを描画したい場合
Vercel AI SDK UI	ReactベースのUI生成ライブラリ	Next.js/Reactとの強力な統合	Reactエコシステムに強く依存	React/Next.jsを中心に開発している場合
汎用JSONアプローチ	独自にJSON形式を定義	自由度が高い	クライアント/サーバー両方の実装負担が大きい	非常に小規模でシンプルなUI要件の場合
iframeアプローチ	LLMにHTML/JSを生成させる	既存のWeb技術をそのまま使える	セキュリティリスク、ネイティブ感の欠如	プロトタイプや、隔離された環境での描画が許容される場合

17. 総評

総合的な評価:
- A2UIは、AIエージェントとユーザーの対話において、テキストだけでは限界があった「リッチなUIの提供」という課題に対し、宣言型のデータプロトコルという本質的かつセキュアな解決策を提示しています。アーリーステージながらも、そのアーキテクチャは非常に強力です。
推奨されるチームやプロジェクト:
- AIエージェントを自社のWeb/モバイルアプリケーションにネイティブな形で組み込みたい開発チームや、マルチエージェントプラットフォームの構築を目指すプロジェクトに最適です。
選択時のポイント:
- 現状はReactのみに依存するならVercel AI SDK UIなども強力な選択肢ですが、クロスプラットフォーム（Flutterやその他のWebフレームワーク）への対応や、独自の「カタログ」による厳密なセキュリティ制御を求める場合は、A2UIが有力な選択肢となります。