Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Kamoshika Kamoshika
February 17, 2026

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

Avatar for Kamoshika

Kamoshika

February 17, 2026
Tweet

More Decks by Kamoshika

Other Decks in Technology

Transcript

  1. 自己紹介 ソフトウェアエンジニア / 須賀 晴也(すが はるや) 経歴 2022-04〜 金融系の受託開発 2025-09〜

    KAG入社 最近うれしかったこと 約1年ぶりに サカナクションの新曲 「いらない」リリース ↓はXのアイコンです @kamo__shika 2
  2. 目次 1. Generative UI とは? 2. Generative UI を実現するプロトコル 3.

    A2-UIでAIエージェントにダッシュボードを作らせてみた 4. まとめ 3
  3. Generative UI とは 文字通り 「生成AIがフロントエンド用のUIを生成する」 ことで、 最近は2通りの意味で使われる 1. AI で

    Web サイトを構築する 生成AIを使ってWebサイトを簡単に作成できるサービスなどを指す場合 2. AI がリアルタイムで動的にUIを生成する AIの応答結果を、 テキスト以外のコンテンツ(ボタンやラジオボタン、グラフなどの様々な要素)として 生成する場合 5
  4. 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
  5. 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
  6. MCP Apps MCPホスト内でレンダリングし、 インタラクティブなUIアプリケーションを提供するプロトコル 仕組み 1. MCP Apps でツールとして UI

    リソースを定義 2. ホスト側でiframe をサンドボックス化し、 UI リソースをレンダリング 3. MCP Apps とホストで、JSON-RPCプロトコル を介した双方向通信 出典: MCP Apps 12
  7. A2-UI エージェントがJSON形式のコンポーネント記述を送信し、 クライアントアプリ側でレンダリングして出力するプロトコル 仕組み 1. ユーザーの指示を受けて、 エージェントが A2UI メッセージを生成 2.

    A2UI メッセージは、 ストリーミング形式でクライアントへ送信 3. クライアント側で A2UI メッセージをレンダリング 出典: A Protocol for Agent-Driven Interfaces 13
  8. MCP Apps と A2-UI の違い 使い分けをする場合は、下記の違いを参考に MCP Apps A2-UI UI生成

    の主体 MCP Apps で定義したもの AIエージェントが生成したJSON レンダ リング サンドボックス化された iframe 内で フロントエンドアプリ側で 利点 AIエージェントが最適なツールを自ら 選択し、自由にユーザーへ提供できる AIエージェントはJSONを出力するのみなので、フ ロントエンド側で実装・実行をコントロールしやす い 今回はWebアプリに組み込んで制御しやすそうな A2-UI を採用 14
  9. 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
  10. コンポーネント定義 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
  11. まとめ ・ Generative UI は、AIエージェント開発における新しい体験を提供してくれる存在 ・ MCP Apps や A2-UI

    は、Generative UI を実現する   標準仕様やプロトコルとなるもの(絶賛整備中) ・ 今回は A2-UI でAIエージェントにダッシュボードを作らせることで、   A2-UI プロトコルを体験してみた ※ 本格的に導入する場合は、   AG-UI(AIエージェントとユーザー間の標準接続プロトコル) や   CopilotKit(AIエージェントアプリ用のフレームワーク) と組み合わせると良いかも?   (今後調査します) 22