【Google Cloud】A2UIを今更ながら触ってみた – エージェントがUIを返す時代

A2UI の設計哲学 – 3つの柱

A2UIの設計は、以下の3つの原則に基づいています。

1. Security First（セキュリティ最優先）
   A2UIは実行可能コードではなく、宣言型のデータ形式です。
   従来、リモートエージェントからUIを受け取る場合はHTMLやJavaScriptをiframeでサンドボックス化する方法が一般的でしたが、XSSやUIインジェクションのリスクがありました。
   A2UIでは、クライアント側が「信頼できるコンポーネントのカタログ」を持ち、エージェントはそのカタログの範囲内でしかUIを指定できません。カタログにないコンポーネントは無視されるため、任意コード実行のリスクを排除できます。
2. LLM-Friendly（LLMに最適化）
   UIはフラットなJSONリストで表現され、LLMがインクリメンタルに生成しやすい構造になっています。
   完璧なJSONを一発で出す必要はなく、ストリーミングで逐次的にUIを組み立てられます（プログレッシブレンダリング）。
3. Framework-Agnostic（フレームワーク非依存）
   A2UIはUI構造と実装を分離しています。同じA2UI JSONペイロードが、Lit、React、Angular、Flutter、SwiftUIなど異なるフレームワークで同じようにレンダリングできます。エージェント側はクライアントが何を使っているか知る必要がありません。

類似技術との比較（MCP Appsとのとの違い）

A2UIと近い文脈で語られることが多いのが「MCP Apps」だと思います。両者の違いを簡単に整理できればと思います。

from google.adk.agents import Agent 
from .restaurants import search_restaurants, make_reservation 

root_agent = Agent( 
  model="gemini-3.5-flash", 
  name="restaurant_assistant", 
  description="レストラン予約をサポートするアシスタント。", 
  instruction=( """
  あなたはレストラン予約アシスタントです。
  ユーザーがレストランを探している場合は search_restaurants ツールで検索し、"結果をわかりやすく日本語で説明してください。
  ユーザーが予約を希望した場合は make_reservation ツールで予約を実行してください。
  """ ), tools=[search_restaurants, make_reservation], )

from google.adk.agents import Agent 
from a2ui.schema.manager import A2uiSchemaManager 
from a2ui.basic_catalog.provider import BasicCatalog 
from .restaurants import search_restaurants, make_reservation 

schema_manager = A2uiSchemaManager( version="0.8", catalogs=[BasicCatalog.get_config("0.8")], ) 
instruction = schema_manager.generate_system_prompt( 
 role_description=( """
  あなたはレストラン予約アシスタントです。
  ユーザーがレストランを探している場合は search_restaurants ツールで検索し、ユーザーが予約を希望した場合は make_reservation ツールで予約を実行してください。
  すべて日本語で応答してください。""" ), 
 workflow_description=( """
  1. ユーザーの希望（ジャンル、エリア、日時、人数）を確認する
  2. search_restaurants で候補を検索する
  3. 結果をリッチUIで表示する（カード形式、画像・評価・空き状況付き）
  4. ユーザーが選択したら make_reservation で予約する
  5. 予約確認をカード形式で表示する""" ), 
 ui_description=( """
  レストラン候補は Card コンポーネントで表示し、各カードに Image（店舗写真）、
  Text（店名・説明）、Icon（星評価）、Button（予約する・地図を見る）を含める。
  予約確認は Card にまとめて表示する。Respond ONLY with the A2UI JSON array. Do NOT include any text outside the JSON.""" ),
 include_schema=True, include_examples=True, ) 


root_agent = Agent( model="gemini-2.5-flash", name="restaurant_assistant", 
description="レストラン予約をサポートするA2UIアシスタント。", instruction=instruction, tools=[search_restaurants, make_reservation], )

• 導入は簡単: SDK（a2ui-agent-sdk）がA2UIカタログ全体をシステムプロンプトとして生成してくれる
• ロジック変更不要: ツールやビジネスロジックはそのまま。出力形式だけが変わる
• UIは動的: 同じ18プリミティブから、LLMが文脈に応じて最適なUIを選択
• 効果は明確: テキスト7往復が、UI1〜2画面に短縮される

一報で、LLMの出力安定性という意味ではA2UI JSONの生成品質はLLMに依存することも確認できました。
– プロンプトの書き方でUIの質が大きく変わる（`ui_description` の設計が重要）
– たまに不正なJSONが出力されることもある（`a2ui_utils.py` でフォールバック処理が必要）