A2UI 1.0とは｜Googleの生成UIプロトコル、エージェントが画面で答える仕組みを実機で検証

A2UI 1.0 は、Google が2026年11月11日に公開した、AIエージェントが文字の代わりに画面で答えるためのオープンなプロトコルの初の安定版だ。 エージェントは「どの部品をどう並べ、どんなデータを入れるか」をJSONで送る。受け取ったアプリは、自分のReactやFlutter、SwiftUIの部品で描く。下は、npmのReactレンダラーで公式サンプルを手元で描き、届いたメッセージの順に画面ができていく様子を撮ったものだ。

エージェントの作り方の全体像は AIエージェントフレームワーク比較2026｜LangGraph・CrewAI・Dify等9種をStar数・実コードで検証 で整理している。A2UI は、その返事を画面にする部分を受け持つ。

A2UI とは：エージェントがデータで画面を返すプロトコル

A2UI の中心は「カタログ」だ。アプリの開発者が、エージェントに使わせてよい部品（Text、Button、Card、DateTimeInput など）と関数を登録する。エージェントはその中からしか選べない。README は、カード番号や個人情報を扱えないようにする信頼の境界を、厳密なスキーマと「実行できるコードでなく検証済みのデータ」で守ると説明している。

送るメッセージは主に3種類で、上の GIF の順番どおりに届く。

部品とデータを分けて送るので、エージェントは画面の骨組みを先に出し、データを後から流し込める。データの一部だけを差し替えることもできる。

A2UI 1.0 の変更点

0.9 から移る人は、Google の移行ガイド（v1.0 Evolution Guide）を読む。大きな変更は次のとおりだ。

移行ガイドは、"path": を一括で "@path": に置き換えないよう警告している。@ を付けるのはデータの参照と関数の呼び出しの位置だけで、updateDataModel の path などはそのままだ。

どんな事に使えるか：公式の例と導入企業

Google の発表は、体調を崩した朝の例を挙げている。医師の予約、会議の移動、チームへの連絡など6つのアプリにまたがる用事を、文章のやりとりでなく1つの画面にまとめ、タップで直して確定させる。公式サンプルには、予約、注文、配送状況、予定、タスクなどの画面がある。npm の React レンダラーで、そのうち6つを手元で描いた。

同じメッセージでも、描くアプリが変われば見た目も変わる。下は、CopilotKit が公開している A2UI Composer のギャラリーで、上と同じフライトとコーヒーの注文のサンプルが、別のスタイルで描かれている。

発表で名前が挙がった利用例は次のとおりだ。

Gemini は自社で登録したエージェントの A2UI の返事を描けるが、対応は 0.9.1 までで、Gemini Enterprise の 1.0 対応は作業中だ。

A2UI を React で試す：手元で確かめたこと

2026年11月14日に、Vite と React 19 の新しいアプリに npm の @a2ui/react と @a2ui/web_core（どちらも 0.15.0）を入れ、リポジトリの v1.0 の公式サンプル（catalogs/basic/v1/examples）を描いた。

npm install @a2ui/react @a2ui/web_core @a2ui/markdown-it

React では、メッセージを処理する MessageProcessor に v1.0 の基本カタログを渡し、できた画面を A2uiSurface で描く。ボタンが押されたときの action は、第2引数の関数で受け取れる。

import { MessageProcessor } from "@a2ui/web_core"
import { basicCatalog } from "@a2ui/web_core/catalogs/basic/v1"
import { A2uiSurface } from "@a2ui/react"

const processor = new MessageProcessor([basicCatalog], (action) => {
  console.log(action) // エージェントへ返す
})
processor.processMessages(messages)

messages には、エージェントから届いた v1.0 のメッセージを順に入れる。最小の形は次のとおりで、見出しと本文の2行が出る。部品の text は文字を直接書かず、@path でデータの場所を指している。

[
  { "version": "1.0", "createSurface": { "surfaceId": "main",
    "catalogId": "https://a2ui.org/specification/v1_0/catalogs/basic/catalog.json" } },
  { "version": "1.0", "updateComponents": { "surfaceId": "main", "components": [
    { "id": "root", "component": "Column", "children": ["title", "body"] },
    { "id": "title", "component": "Text", "text": { "@path": "/title" } },
    { "id": "body", "component": "Text", "text": { "@path": "/body" } } ] } },
  { "version": "1.0", "updateDataModel": { "surfaceId": "main", "path": "/",
    "value": { "title": "Hello from A2UI!", "body": "データを差し替えると表示も変わる" } } }
]

コーヒーの注文のサンプルで「Purchase」を押すと、次の action が届いた。エージェントは、どの画面のどの部品が押されたかを受け取る。

エージェントが危ない内容を送ってきた場合も試した。

気をつけたい点が2つある。1つは、仕様とパッケージの版のずれだ。リポジトリは2026年11月10日に @ で始まるキーへの変更を入れたが、npm の 0.15.0 は11月2日の公開で、@checks を使う最新のサンプルを受け付けなかった。もう1つは、カタログにない部品が静かに無視されることだ。危ないものは描かれないが、エージェントの間違いにも気づきにくい。このほか、アイコンは Material Symbols のフォントを、Markdown は @a2ui/markdown-it を自分で読み込まないと、文字のまま出る。

コーディングエージェントに A2UI を扱わせるには、npx skills add a2ui-project/a2ui でスキルを入れられる（本記事では試していない）。

A2UI と MCP Apps・ほかの生成UIとの違い

Google は、A2UI の Web と Flutter のレンダラーが MCP Apps の中で動き、Claude や Gemini のような MCP Apps 対応のアシスタントに A2UI の画面を出せると説明している。対立する仕組みではなく、組み合わせて使う前提だ。

React で生成 UI を作る別の道としては、AG-UI を中心にした CopilotKit完全ガイド｜React/Angularで作るAIエージェント & AG-UI Protocol解説 がある。CopilotKit は A2UI の Composer と Playground も公開している。エージェントの実行を見張る側は CopilotKit OpenBotとは｜AG-UIエージェントに専用ブラウザと監査を与える基盤の使い方 で扱った。LLM に部品を選ばせる設計は、Vercel の json-renderとは｜VercelのUI生成OSSをJev連携まで実測、LLMに書かせず選ばせる設計 も近い。

向いているのは、同じエージェントの返事を Web とスマホの両方に、自社のデザインのまま出したい場合だ。Web だけで、見た目にこだわらないなら、まずは MCP Apps や既存の生成 UI のライブラリのほうが手早い。

参照ソース

・A2UI 1.0: Build delightful, fast, reliable, agentic experiences（Google Developers Blog・2026-11-11）
・a2ui-project/a2ui（GitHub）
・A2UI v1.0 の仕様（a2ui.org）
・v1.0 Evolution Guide（a2ui.org）
・A2UI Quickstart（a2ui.org）
・A2UI Composer（CopilotKit）