検証
Google「A2UI＋MCP Apps」エージェントの画面を「宣言的なJSON（A2UI）」で描くか「iframeのWebアプリ（MCP Apps）」で描くかの二択を組み合わせる3つの型。①MCPサーバーがapplication/a2ui+jsonを返しホストがネイティブ描画②MCP AppをA2UI部品に埋めて要点だけ同期③MCP App内にA2UI描画器を入れて旧システムに生成UI
執筆：AI時短ラボ約7分で読めます
日刊AIニュース11月7日（土）号：前日のAIのニュース3本を短くまとめました（約5分）›
GoogleのA2UIチームとMCP Appsの共同作者は2026年6月17日、エージェントが返す画面の2方式を組み合わせる3つの設計を、実装ガイドとサンプルつきで公開した。MCP Appsはiframe内で自由度が高いが、デザインの不一致・性能・隔離に課題がある。A2UIはJSONで「何を描くか」を渡し、ホストがネイティブ部品で描くので一貫性と安全性は高いが、部品カタログに縛られる。①A2UI over MCP：MCPサーバーがMIMEタイプapplication/a2ui+jsonのリソースをa2ui://のURIで返し、resources/read（固定画面）またはtools/call（動的画面）で配る。②MCP AppをA2UI部品に：Pongゲームのような状態の多い部品はiframe内で動かし、得点のような要点だけをA2UIのActionに変換してエージェントへ送り、DataModel更新で両側を再水和する。③MCP App内にA2UI描画器：A2UI非対応の旧ホストでも生成UIを描く。A2UIをMCPの拡張にする案も検討中。
2026年9月19日・日本時間時点の情報です。 Google Developersのブログ（6月17日）を読んだ。3か月前の記事だが、Anthropicのコマースエージェント設計図が「UI部品はツールにする」と書いたのと同じ問題──エージェントが返す画面をどう描くか──へのGoogle側の答えで、MCPとはの続きとして残す。
3行まとめ
- 二択だった。 MCP Appsはiframeの中で標準のWeb技術を使えて自由度が高いが、ホストとデザインが合わない・スクロールバーが二重になる・性能・セキュリティの隔離に課題がある。A2UI（Agent-to-User Interface）はHTML/CSS/JSでなくJSONで「何を描くか」を渡し、ホストが自分のネイティブ部品で描くので一貫性と安全性は高いが、部品カタログに縛られ、複雑なクライアント側の論理は苦手。この記事はその組み合わせ方を3つ、実装ガイドとサンプルつきで示す（A2UIをMCPの拡張にする案も検討中）。
- 型①：A2UI over MCP。 MCPサーバーがテキストやHTMLの代わりに、MIMEタイプ**
application/a2ui+jsonのリソースをa2ui://のURIで返す。配り方は2つ──resources/read（会話に依存しない固定の画面。プライバシー通知・設定フォーム。LLMの生成が不要でキャッシュも利く）とtools/call**（ツールの引数に応じた動的な画面。天気モジュールや個人化カード）。A2A経由は会話全体の文脈で完全に生成的、MCP Toolsはツール引数の範囲でテンプレート的、MCP Resourcesは静的、という段階。利点は、iframeを避けてホストのデザインで描ける、MCPは裏方・A2UIは表側と関心が分かれる、React・Flutter・Angularのどのクライアントでも書き換えなしに描ける、信頼済み部品しか描かない能力ベースの安全性。デモはレシピ選択フォーム（静的）とレシピカード（動的）。- 型②③。 ②MCP AppをA2UI部品として埋め込む：iframeの包み部品にMCP Appを入れ、Pongゲームのように状態の多い部品は中で動かし、得点のような「要点の状態」だけをMCPツール呼び出しとして包み部品が横取り→A2UIのActionに変換→エージェントへ送り→エージェントはマクロな状態だけ追ってDataModel更新を返し→ネイティブのスコアカードとApp内部の両方を再水和する、という同期ループ（DOMの覗き見やポーリングはしない）。③MCP Appの中にA2UIの描画器を入れる：A2UIに対応しない旧ホストでも、MCP Appが自前の描画器でA2UIのJSONを描く。例はテキスト編集で、選択した部分に応じてサーバーが編集パラメータの操作部を生成UIで返し、「Generate Revision」で修正案を出す。旧システムは基本的なiframeの入れ物だけあればよい。
AnthropicのUI設計との共通点
- Anthropicの設計図が「UI部品はツール呼び出しにして履歴に残す」と言ったのと、Googleの「JSONで何を描くかだけ渡し、描画はホスト」は同じ方向で、両社とも「モデルにHTMLタグを吐かせる」方式から離れている
- 型②の「要点の状態だけ同期する」は、ゲームやフォームのような細かい状態をエージェントに持たせない設計で、MCPの部分的なツール結果のような「何をモデルに見せるか」の議論と地続き
- 記事はGoogleのA2UIとMCP Appsの共同作者の連名で、MCP Appsの側（iframe方式）を否定せず「複雑な部品はiframe、標準部品はA2UI」と分けている
- サンプルはAngular中心で、React・Flutterでの同等品は「描ける」とあるが例は本文にない
ブログ原文を確認、A2UI未使用
この記事の下調べで、筆者は9月19日にGoogle Developersのブログを取得し、3つの型・MIMEタイプとURIスキーム・resources/readとtools/callの使い分け・同期ループの3段・各デモの内容がその原文にあることを確認した。GitHubのクイックスタートとデモは開いていない。筆者はA2UIで画面を組んでいない。
部品範囲・標準化時期・対応ホストは不明
- A2UIの部品カタログの範囲（何が描けるか）
- MCP拡張としての標準化の時期
- 主要なホスト（Claude・ChatGPT・Gemini）のどれがA2UIを描けるか
A2UI公式ブログが唯一の一次資料
- A2UI + MCP Apps: Combining the best of declarative and custom agentic UIs（Google Developers・2026年6月17日）
関連記事
出典・参照資料
大きいニュースはYouTubeでも解説しています。Xでは新着記事をお知らせしています。
コメント
まだコメントはありません。最初のコメントを書いてみませんか？
AIについて聞きたいことはありますか？
質問箱で無料で受け付けています。回答は公開され、他の方の参考にもなります。
質問箱を見る →関連記事
MCPとは──AIが外部のアプリやデータを使うための共通ルール。MCPサーバーとは何か、APIとの違い、無料で試せる範囲【2026年10月版】
MCPとは──AIが外部のアプリやデータを使うための共通ルール。MCPサーバーとは何か、APIとの違い、無料で試せる範囲【2026年10月版】
活用
MCPのフォーム確認、サーバーが提供する専用アプリでレンダリングできるように 4つの条件が揃わなければ自動で従来型に戻る
MCPのフォーム確認、サーバーが提供する専用アプリでレンダリングできるように4つの条件が揃わなければ自動で従来型に戻る
検証
MCPに来る2つの拡張案 ツール結果の部分ストリーミングと進捗通知の構造化を、提案PRの本文で読む
MCPに来る2つの拡張案ツール結果の部分ストリーミングと進捗通知の構造化を、提案PRの本文で読む
研究
Anthropicが「コマースエージェント」の設計図を公開 Claudeの買い物エージェントはカートが最大35%大きく購入完了が60%高い（小売各社の実績）。要点は「サブエージェントでなくスキル」「UI部品はツール」「3分の1超のトラフィックが使う指示はシステムプロンプト」「プロンプトキャッシュは90〜99%命中を最初から設計」。Visa・Mastercard・Shopify等がコメント
Anthropicが「コマースエージェント」の設計図を公開Claudeの買い物エージェントはカートが最大35%大きく購入完了が60%高い（小売各社の実績）。要点は「サブエージェントでなくスキル」「UI部品はツール」「3分の1超のトラフィックが使う指示はシステムプロンプト」「プロンプトキャッシュは90〜99%命中を最初から設計」。Visa・Mastercard・Shopify等がコメント
検証
Google「AI Agents Challenge」上位に共通した4つの設計 ①自分のツール層をMCPサーバーとして他のエージェントにも開く②呼び出し連鎖でなくイベントバスで並列に反応③フォールバック先のFlashも同じ検証関数を通す④正規表現→10トークンの分類→本モデルの3層で4割超をモデル呼び出し前に処理。「名前つきプロンプトの連鎖」は多エージェントではない
Google「AI Agents Challenge」上位に共通した4つの設計①自分のツール層をMCPサーバーとして他のエージェントにも開く②呼び出し連鎖でなくイベントバスで並列に反応③フォールバック先のFlashも同じ検証関数を通す④正規表現→10トークンの分類→本モデルの3層で4割超をモデル呼び出し前に処理。「名前つきプロンプトの連鎖」は多エージェントではない
検証
AIエージェントの作り方【2026年9月版】 ノーコード（Dify・Lindy）、SDK（Claude Agent SDK・OpenAI Agents SDK・Google ADK・LangGraph）、任せる型（OpenAI Agents API・Claude Managed Agents）の3段階と、最初の1本を動かすまでのコード、暴走と課金を止める4つの安全装置
AIエージェントの作り方【2026年9月版】ノーコード（Dify・Lindy）、SDK（Claude Agent SDK・OpenAI Agents SDK・Google ADK・LangGraph）、任せる型（OpenAI Agents API・Claude Managed Agents）の3段階と、最初の1本を動かすまでのコード、暴走と課金を止める4つの安全装置
活用
Gemma 4 12BをMacのローカルで「エージェント用の土台」にする Google AI Edgeの手順。LiteRT-LM CLIの新コマンド`serve`でOpenAI互換のローカルサーバーを立て、OpenClaw・Hermes・OpenCode・Aiderをそのまま向ける。AI Edge GalleryのmacOS版はPythonを書いて実行、Eloquentは音声で書き換え
Gemma 4 12BをMacのローカルで「エージェント用の土台」にするGoogle AI Edgeの手順。LiteRT-LM CLIの新コマンド`serve`でOpenAI互換のローカルサーバーを立て、OpenClaw・Hermes・OpenCode・Aiderをそのまま向ける。AI Edge GalleryのmacOS版はPythonを書いて実行、Eloquentは音声で書き換え
検証
Google DeepMind「クライアントSDKの生成はオープンであるべき」 2026年5月、使っていたSDK生成ベンダーが買収され突然の終了。Interactions APIのGA直前に乗り換え、Speakeasyと組んでOpenAPI生成スイートをAGPLv3でオープンソース化。7言語のSDK・エージェント向けCLI・ドキュメントMCPサーバーを生成、6ターゲットを約1人で保守
Google DeepMind「クライアントSDKの生成はオープンであるべき」2026年5月、使っていたSDK生成ベンダーが買収され突然の終了。Interactions APIのGA直前に乗り換え、Speakeasyと組んでOpenAPI生成スイートをAGPLv3でオープンソース化。7言語のSDK・エージェント向けCLI・ドキュメントMCPサーバーを生成、6ターゲットを約1人で保守
検証