AIエージェントがUIを生成する「Generative UI」を広く浅く理解したい

Transcript

1. AI エージェントがUI を生成する 「Generative UI 」を 広く浅く理解したい 2026/04/03( 金) AI LT 会 vol.1 宮崎 健太（たけのこ） 1
2. 宮崎 健太 ( たけのこ) 業務： 　・最近はクラウドエンジニア(AWS / IoT 系) 所在地： 　・札幌 趣味： 　・ゲーム ( ぽこあボケもんから抜け出せない) 　・お酒 ( ビール、クラフトジンとか) その他： 　・AWS Community Builders 2026 (AI Engineering) X ：@K5ARULtkUA4594 自己紹介 2
3. 話すこと Generative UI とは何か AI エージェントへの組み込み方（3 つのアプローチ） 話さないこと 詳細な実装方法 ベストプラクティス 本日話すこと・話さないこと 3
4. 1. Generative UI とは 2. 3 つのアプローチ 3. アプローチ1 ：静的型 4. アプローチ2 ：宣言型 5. アプローチ3 ：オープンエンド型 6. まとめ アジェンダ 4
5. Generative UI とは 5
6. Generative = 生成する UI = ユーザーインターフェース つまり AI がユーザーインターフェースを生成する 仕組み 6
7. 静的なソースコードの生成 　・AI が開発者向けにフロントエンドのソースコードを生成する 　　例）v0 、Bolt.new など 動的なUI コンポーネントの生成 　・AI がアプリケーション上でUI コンポーネントを動的に生成する 　　👉 今日話すのはこっち Generative UI は大きく2 つの側面がある 7
8. 例） 「AWS Summit の毎年の参加人数など分析結果を表示して」と聞いた場合 テキスト回答 (by ChatGPT) Generative UI (by Claude) 身近なGenerativeUI を体験 8
9. 可読性 テキストだけでは表現が難しい場面で効果的 データ可視化: 分析結果をグラフやチャートで動的に描画する 地図: お店の場所や経路を地図へ動的に描画する ユーザーの作業効率化 複雑なインタラクションが必要な場面で効果的 商品購入フロー: ユーザーがその場で選択・購入できる 予約システム: ユーザーが直接日時を選択できる Generative UI が解決する課題 9
10. どうやってAI エージェントに組み込もう 10
11. 3 つのアプローチ 11
12. アプローチ1 ：静的型 フロントエンドで事前定義したUI コンポーネントをAI エージェントが選択する アプローチ2 ：宣言型 AI エージェントが構造化された仕様（カード・フォーム等）でUI を定義し、フロントエンド 側で組み立てる アプローチ3 ：オープンエンド型 MCP サーバーが事前定義したHTML リソースをAI エージェントがツール経由で選択し、 iframe として表示する 3 つのアプローチの全体像 12
13. 3 つのアプローチの違いは「誰がどこでUI を定義するか」 観点 / アプローチ 静的型 宣言型 オープンエンド型 UI を定義する場所 フロントエンド AI エージェント MCP サーバー AI エージェント の役割 UI を意識しない ツールを選ぶ UI 構造まで定義する UI を意識しない MCP ツールを選ぶ フロントエンド の役割 UI コンポーネント を表示 JSON を解釈して UI を組み立てる iframe で埋め込み表示 3 つのアプローチの違い 13
14. アプローチ1: 静的型 14
15. 事前定義したUI コンポーネントをAI エージェントが判断して選択・表示する 特徴 ・表示できるUI はフロントエンドで事前に定義した範囲に限られる ・UI の品質・デザインの一貫性を担保しやすい ・AI はどのコンポーネントをいつ表示するかを判断するだけ アプローチ1 ：静的型とは 15
16. CopilotKit は AI エージェントとフロントエンドを繋ぐフレームワーク CopilotKit を使用することで、簡単にGenerativeUI を実装可能 補足：CopilotKit は AG-UI にも対応 エージェントとフロントエンドをつなぐ通信プロトコル。 CopilotKit Runtime とフロントエンドはこのプロトコルでSSE/HTTP 通信を行う。 静的型の代表例：CopilotKit 16
17. Generative UI における様々なユースケースにも対応 下表はユースケースごとに提供されたReact Hooks の抜粋 ユースケース React Hooks バックエンド側でツールを実行してUI を表示したい useRenderTool フロントエンド側でツールを実行してUI を表示したい useFrontendTool ユーザーの承認・入力を挟みたい（Human-in-the-Loop ） useHumanInTheLoop ツールに紐づけずエージェントの判断でUI を表示したい useComponent アプローチ1 の代表例：CopilotKit でGemerativeUI 17
18. アプローチ2: 宣言型 18
19. AI エージェントが「宣言的」にUI を定義し、フロントエンド側でその定義を元にUI を 組み立てる 特徴 ・AI エージェントがUI 構造を動的に生成できるので静的型より自由度が高い ・フロントエンドとエージェントの責務を明確に分離できる アプローチ2 ：宣言型とは 19
20. Open-JSON-UI （OpenAI 規定） UI をJSON で宣言的に記述するOpenAI が定めた仕様 json-render （Vercel Labs ） AI がZod スキーマで定義されたJSON 仕様を生成し、フロントエンドが解釈してUI を組み立て るフレームワーク A2UI （Google 、2025 年12 月発表） Google が提唱する動的UI 生成の標準プロトコル。 アプローチ2 ：関連技術 20
21. Google が2025 年12 月に発表したAI エージェントが動的にUI を生成するための 標準プロトコル 特徴 ・JSON Lines 形式でUI の定義をストリーミング配信 ・フロントエンドはその定義を受け取り、UI を組み立てる 宣言型の代表例：A2UI 21
22. コンポーネントを宣言的に定義 → フロントエンドが解析・レンダリング {"surfaceUpdate": {"surfaceId": "booking", "components": [ { "id": "datetime", "component": { "DateTimeInput": {"value": {"path": "/booking/date"}} } }, { "id": "submit-btn", "component": { "Button": {"action": {"name": "confirm_booking"}} } } ]}} 宣言型：A2UI JSON Lines 形式の例 22
23. Vercel Labs 公開した、AI がJSON 仕様でUI を生成するフレームワーク 特徴 ・Zod スキーマのカタログでLLM の出力を制約 ・A2UI と互換性があり、A2UI のJSON フォーマットを統合することも可能 アプローチ2 の代表例：json-render 23
24. アプローチ3 オープンエンド型（MCP Apps ） 24
25. MCP のツール実行結果にHTML リソースを指定し、iframe として任意のUI を表示する 特徴 ・MCP サーバーとして、UI を複数のAI エージェントで共有できる ・逆にいうとMCP サーバーの構築が必要 MCP とは？ AI とツール・データを繋ぐ標準プロトコル。 MCP Apps は、MCP サーバーの Tools と Resources 活用した仕組み アプローチ3 ：オープンエンド型とは 25
26. ツールとリソースを拡張し、チャットUI 上に動的なUI をiframe として表示できる仕組み 1. フロントエンド(MCP ホスト) がツールを呼び出す 2. ツールの実行結果に _meta.ui.resourceUri でUI リソースを指定する 3. フロントエンドがUI リソース（HTML ）を取得し、iframe として埋め込み表示する アプローチ3 の代表例：MCP Apps 26
27. ・静的型(CopilotKit) は、フロントでUI 実装が完結して良い。自由度は下がるが... ・宣言型は(A2UI 、json-render) は、慣れるまでのハードルが高い & 使い分けが複雑.... ・オープンエンド(MCP Apps) の強みは、UI をMCP として共通化できるところ 　→ 新規はMCP サーバーを建てるのが手間、既存ならMCP ツールをUI 化するのはあり 静的型 宣言型 オープンエンド型 代表例 CopilotKit A2UI 、json-render MCP Apps UI の定義 フロントが事前定義 AI がJSON 仕様で定義 MCP サーバーがHTML を配信 自由度 低い 中程度 高い デザイン一貫性 担保しやすい 仕様依存 保ちにくい 実装コスト フレームワーク活用 フレームワーク活用 MCP サーバー構築が必要 3 つのアプローチ比較 27
28. まとめ 28
29. Generative UI とは ・AI エージェントが動的にUI を生成する仕組み。テキスト回答より直感的なUX を実現可能 3 つのアプローチが存在する ・静的型：事前定義したコンポーネントをAI が選択（例: CopilotKit ） ・宣言型：構造化仕様でUI を定義（例: A2UI 、json-render ） ・オープンエンド型：MCP サーバーを経由してHTML をiframe として配信（例:MCP Apps) 現状と展望 ・Generative UI の仕様策定はまさに戦国時代。ツール・プロトコルを１つ１つ理解する 　のが難しい ・競合が乱立というよりは、アプローチによってレイヤーや視点が異なるため、 　まずは概念を整理することが重要 まとめ 29
30. ありがとうございました!! 30