Generative UI を試そう！A2-UIでAIエージェントにダッシュボードを作らせてみた

KAG AI WEEK Day2 ~ランチタイムにAIを浴びる！5日間連続LTウィーク~ で発表したスライドです。

スライド内に記載したリンク一覧：

• Announcing v0: Generative UI - Vercel Blog
• v0 by Vercel
• Generative UI and Outcome-Oriented Design - Nielsen Norman Group
• MCP Apps - Model Context Protocol
• A Protocol for Agent-Driven Interfaces (A2-UI)
• a2ui-sdk - GitHub

Transcript

1. 2026.2.17 Generative UI を試そう！ A2-UIでAIエージェントに ダッシュボードを作らせてみた KDDIアジャイル開発センター 開発6部 須賀晴也
2. 自己紹介 ソフトウェアエンジニア / 須賀 晴也（すが はるや） 経歴 2022-04〜 金融系の受託開発 2025-09〜 KAG入社 最近うれしかったこと 約１年ぶりに サカナクションの新曲 「いらない」リリース ↓はXのアイコンです @kamo__shika 2
3. 目次 1. Generative UI とは？ 2. Generative UI を実現するプロトコル 3. A2-UIでAIエージェントにダッシュボードを作らせてみた 4. まとめ 3
4. Generative UI とは？ 4
5. Generative UI とは 文字通り 「生成AIがフロントエンド用のUIを生成する」 ことで、 最近は２通りの意味で使われる 1. AI で Web サイトを構築する 生成AIを使ってWebサイトを簡単に作成できるサービスなどを指す場合 2. AI がリアルタイムで動的にUIを生成する AIの応答結果を、 テキスト以外のコンテンツ（ボタンやラジオボタン、グラフなどの様々な要素）として 生成する場合 5
6. 1. AI で Web サイトを構築する Vercel"v0"紹介時の記事が初出(2023-10-11) URL: https://v0.app/ 6
7. 1. AI で Web サイトを構築する 原文： A few weeks ago, we introduced v0: a product that makes website creation as simple as describing your ideas. We call it Generative UI — combining the best practices of frontend development with the potential of generative AI. 日本語訳: アイデアを記述するだけでWebサイトを簡単に作成できる製品。フロントエンド開発のベス トプラクティスとジェネレーティブAIの可能性を組み合わせたもの。 出典: Announcing v0: Generative UI 7
8. 2. AI がリアルタイムで動的にUIを生成する Nielsen Norman Group(アメリカのリサーチとUXデザイン会社)が 提唱したのが初出(2024-03-22) URL: https://www.nngroup.com/ 8
9. 2. AI がリアルタイムで動的にUIを生成する 原文： A generative UI (genUI) is a user interface that is dynamically generated in real time by artificial intelligence to provide an experience customized to fit the user's needs and context. 日本語訳： ユーザーのニーズや状況に合わせてカスタマイズされたエクスペリエンスを提供するために、 AIによってリアルタイムで動的に生成されるユーザーインターフェース。 出典: Generative UI and Outcome-Oriented Design 9
10. Generative UI を実現するプロトコル 10
11. Generative UI を実現するプロトコル 代表的なものを２つ紹介 1. MCP Apps MCPホスト内でインタラクティブなUIアプリケーションを提供するプロトコル 2. A2-UI エージェントがJSON形式でUI記述を送信し、クライアント側でレンダリングするプロトコル 11
12. MCP Apps MCPホスト内でレンダリングし、 インタラクティブなUIアプリケーションを提供するプロトコル 仕組み 1. MCP Apps でツールとして UI リソースを定義 2. ホスト側でiframe をサンドボックス化し、 UI リソースをレンダリング 3. MCP Apps とホストで、JSON-RPCプロトコル を介した双方向通信 出典: MCP Apps 12
13. A2-UI エージェントがJSON形式のコンポーネント記述を送信し、 クライアントアプリ側でレンダリングして出力するプロトコル 仕組み 1. ユーザーの指示を受けて、 エージェントが A2UI メッセージを生成 2. A2UI メッセージは、 ストリーミング形式でクライアントへ送信 3. クライアント側で A2UI メッセージをレンダリング 出典: A Protocol for Agent-Driven Interfaces 13
14. MCP Apps と A2-UI の違い 使い分けをする場合は、下記の違いを参考に MCP Apps A2-UI UI生成 の主体 MCP Apps で定義したもの AIエージェントが生成したJSON レンダ リング サンドボックス化された iframe 内で フロントエンドアプリ側で 利点 AIエージェントが最適なツールを自ら 選択し、自由にユーザーへ提供できる AIエージェントはJSONを出力するのみなので、フ ロントエンド側で実装・実行をコントロールしやす い 今回はWebアプリに組み込んで制御しやすそうな A2-UI を採用 14
15. A2-UIでエージェントに ダッシュボードを作らせてみた 15
16. アーキテクチャ 今回は通話の会話文字起こしログを分析するダッシュボードを想定 会話文字起こしログは事前に分析し、分析結果はDynamoDBに記録 16
17. デモ画面 ➡ 17
18. A2-UI メッセージの内容 マーカー（ ---BEGIN_A2UI_JSON--- / ---END_A2UI_JSON--- ）で囲んで、 フロントエンド側でパース・レンダリングできるように ---BEGIN_A2UI_JSON--- [{ "beginRendering": { "surfaceId": "sentiment-stats-...", "root": "dashboard" } }, { "surfaceUpdate": { "surfaceId": "sentiment-stats-...", "components": [ { "type": "MetricCard", "props": { ... } }, { "type": "Chart", "props": { ... } }, { "type": "MarkdownCard", "props": { ... } } ] } }] ---END_A2UI_JSON--- 18
19. コンポーネント定義 A2UI メッセージ内での、UIコンポーネント定義は下記のような形式 { "type": "Chart", "props": { "type": "bar", "title": "感情別の割合", "chartData": [ { "name": "POSITIVE", "value": 6.7, "color": "#10b981" }, { "name": "NEGATIVE", "value": 80.0, "color": "#ef4444" }, { "name": "MIXED", "value": 13.3, "color": "#f59e0b" }, { "name": "NEUTRAL", "value": 0.0, "color": "#6b7280" } ], "unit": "%" } } → クライアント側でフロントエンドアプリのコンポーネントに 　 マッピングすることでレンダリングする 19
20. ※ A2-UI の今後 2026-02-16時点で v0.8 のプレビュー版、メジャーバージョンはまだ出てない状況 v0.9 アップデートでも仕様変更があるので、本番環境に組み込む場合は注意！ 公式レンダラーが用意されているのが Lit・Angular・Flutterのみで、React はない -Reactの公式レンダラーは2026年の１Qにリリースする予定とのこと 今回は有志の方が作成してくださった a2ui-sdk を利用（圧倒的感謝。 。 。！） 20
21. まとめ 21
22. まとめ ・ Generative UI は、AIエージェント開発における新しい体験を提供してくれる存在 ・ MCP Apps や A2-UI は、Generative UI を実現する 　 標準仕様やプロトコルとなるもの（絶賛整備中） ・ 今回は A2-UI でAIエージェントにダッシュボードを作らせることで、 　 A2-UI プロトコルを体験してみた ※ 本格的に導入する場合は、 　 AG-UI(AIエージェントとユーザー間の標準接続プロトコル) や 　 CopilotKit(AIエージェントアプリ用のフレームワーク) と組み合わせると良いかも？ 　 （今後調査します） 22
23. ご清聴ありがとうございました 23