（この記事は LLM・LLM活用 の Advent Calendar 2025 の記事です）
はじめに
この記事で扱う内容は、以下の A2UI です。
●Introducing A2UI: An open project for agent-driven interfaces - Google Developers Blog
https://developers.googleblog.com/introducing-a2ui-an-open-project-for-agent-driven-interfaces/
A2UI は、生成AI がテキストだけでなく、状況に応じた最適な UI を生成・提示できるようにするためのもののようです。また、Google の A2UIチームが公開しているようです。
試してみる内容
試してみる主な内容は、以下のクイックスタートです。
●Quickstart - A2UI
https://a2ui.org/quickstart/#prerequisites
クイックスタートの補足
この手順を進めて「npm run demo:all」の実行まで行うと、フロントエンド側で「A2UI の Lit版レンダラーを組み込んだチャット画面」が、バックエンド側では「あらかじめ用意された固定の A2UIデータ（JSON）を返す疑似エージェント」が立ち上がるようです。
この時、バックエンド側から送られた JSON が、フロントエンド側でリッチな Web UI に変換されるようです。
もう少し細かく書くと、A2UIコンポーネントの描画の確認や、インタラクティブな操作のお試しができるようです。前者については、チャット欄でデモのシナリオに沿った発言をすると、テキストの返事ではなく、「カード、ボタン、画像」などの UI が返ってくるようです。後者については、例えば「予約ボタン」を押すと、その操作情報がエージェントに送られて、次の画面が返ってくるという流れを試せるようです。
とりあえず、実際に試してみるのが分かりやすそうです。
手順を試していく
フロントエンド・バックエンドの準備
最初は、以下を実行します。またこの時に、環境変数 GEMINI_API_KEY に Gemini の APIキーをセットしておきます。
git clone https://github.com/google/a2ui.git
cd a2ui/samples/client/lit
そして、以下で依存関係をインストールして、デモを実行します。
npm install
npm run demo:all
上記の実行後、以下のような内容などがターミナルに出力されました。
クイックスタートのページの説明を見ると、以下の内容が進められた状態になるようです。
デモサイトでの操作
上記のターミナルの出力・クイックスタートのページの説明に出てきている、 http://localhost:5173/ というローカルサーバーにブラウザでアクセスします。そうすると、以下のページが表示されました。
そして、デフォルトでテキストボックスに以下が入力された状態になっています。
Top 5 Chinese restaurants in New York.
店の検索・結果画面でのボタン操作
以下のように数字の部分だけ書きかえて試してみました。
Top 3 Japanese restaurants in New York.
そうすると、少し待った後に以下が表示されました。
さらに、「BOOK NOW」と書かれたボタンを押してみると、以下の画面が表示されました。
デモで想定されていない内容を試す
デモで想定されていないと思われる内容も試してみました。
1つ目は以下で、結果として「Empty」というテキストが表示されただけ、という状態になりました。これに対応する結果が、裏で用意されていないためだと思われます。
Top 2 Chinese restaurants in Japan
また、以下を試すと、UI は出てくるものの店が不明な状態（画像などが出ない状態）になっていると思われる画面が出てきました。
Book a table for 2
元データを見てみる
最後に以下のリポジトリを見て、裏側で用意されていたデータを確認してみます。
●google/A2UI
https://github.com/google/a2ui
JSON
以下がレストランに関するテキストのデータ（JSON）になるようです。
●A2UI/samples/agent/adk/restaurant_finder/restaurant_data.json at main · google/A2UI
https://github.com/google/A2UI/blob/main/samples/agent/adk/restaurant_finder/restaurant_data.json
JSON を書き出してみると、以下となっていました。
[
{
"name": "Xi'an Famous Foods",
"detail": "Spicy and savory hand-pulled noodles.",
"imageUrl": "http://localhost:10002/static/shrimpchowmein.jpeg",
"rating": "★★★★☆",
"infoLink": "[More Info](https://www.xianfoods.com/)",
"address": "81 St Marks Pl, New York, NY 10003"
},
{
"name": "Han Dynasty",
"detail": "Authentic Szechuan cuisine.",
"imageUrl": "http://localhost:10002/static/mapotofu.jpeg",
"rating": "★★★★☆",
"infoLink": "[More Info](https://www.handynasty.net/)",
"address": "90 3rd Ave, New York, NY 10003"
},
{
"name": "RedFarm",
"detail": "Modern Chinese with a farm-to-table approach.",
"imageUrl": "http://localhost:10002/static/beefbroccoli.jpeg",
"rating": "★★★★☆",
"infoLink": "[More Info](https://www.redfarmnyc.com/)",
"address": "529 Hudson St, New York, NY 10014"
},
{
"name": "Mott 32",
"detail": "Upscale Cantonese dining.",
"imageUrl": "http://localhost:10002/static/springrolls.jpeg",
"rating": "★★★★★",
"infoLink": "[More Info](https://mott32.com/newyork/)",
"address": "111 W 57th St, New York, NY 10019"
},
{
"name": "Hwa Yuan Szechuan",
"detail": "Famous for its cold noodles with sesame sauce.",
"imageUrl": "http://localhost:10002/static/kungpao.jpeg",
"rating": "★★★★☆",
"infoLink": "[More Info](https://hwayuannyc.com/)",
"address": "40 E Broadway, New York, NY 10002"
},
{
"name": "Cafe China",
"detail": "Szechuan food in a 1930s Shanghai setting.",
"imageUrl": "http://localhost:10002/static/mapotofu.jpeg",
"rating": "★★★★☆",
"infoLink": "[More Info](https://www.cafechinanyc.com/)",
"address": "59 W 37th St, New York, NY 10018"
},
{
"name": "Philippe Chow",
"detail": "High-end Beijing-style cuisine.",
"imageUrl": "http://localhost:10002/static/beefbroccoli.jpeg",
"rating": "★★★★☆",
"infoLink": "[More Info](https://www.philippechow.com/)",
"address": "33 E 60th St, New York, NY 10022"
},
{
"name": "Chinese Tuxedo",
"detail": "Contemporary Chinese in a former opera house.",
"imageUrl": "http://localhost:10002/static/mapotofu.jpeg",
"rating": "★★★★☆",
"infoLink": "[More Info](https://chinesetuxedo.com/)",
"address": "5 Doyers St, New York, NY 10013"
}
]
画像
それと、画像は以下に置かれているようでした。
●A2UI/samples/agent/adk/restaurant_finder/images at main · google/A2UI
https://github.com/google/A2UI/tree/main/samples/agent/adk/restaurant_finder/images
