【AG-UI × A2UI × MCP Apps】Generative UIをやさしく解説する

Transcript

1. 【 AG-UI×A2-UI×MCP Apps 】 Generative UI をやさしく解説する ～AIエージェント時代の UI 設計～ 福井 晃貴 NRIネットコム株式会社 NTシステム事業一部 NTシステム開発二課 2026年08月05日
2. 自己紹介 バックエンドエンジニア ・ NRIネットコム株式会社 総合職 2年目 ・ 大規模システムのエンハンスに従事し、Java・Spring Bootを用いた機能実装 からテスト・運用保守まで一貫して担当 Koki Fukui 福井 晃貴 過去のアウトプット ・登壇資料：https://speakerdeck.com/koki0611 ・ブログ：https://tech.nri-net.com/archive/author/k2-fukui ・主催イベント：https://aws-challengers.connpass.com Copyright（C） NRI Netcom, Ltd. All rights reserved. 1
3. はじめに 今回話すこと ⚫ Generative UI と従来のチャットUIとの違い ⚫ AG-UI, A2UI, MCP Apps 各々の役割・使いどころ ⚫ AG-UI×A2UI を組み合わせたマルチエージェントのユースケース紹介 ⚫ 各技術スタックの課題 今回話さないこと ⚫ Generative UIの実現とは直接関与しないプロトコルの詳細 (A2A …etc) ⚫ 実装の詳細, 他フレームワークとの比較 Copyright（C） NRI Netcom, Ltd. All rights reserved. 2
4. 従来のチャットUI と Generative UI 従来のチャットUI Generative UI LLMの出力は、主にテキスト LLMの出力は、状況に応じた最適なUI AI が提示した UI を直接操作してタスクを進められるようにユーザー体験がシフト Copyright（C） NRI Netcom, Ltd. All rights reserved. 3
5. Generative UIを実現する技術 ⚫ AG-UI (Agent-User Interaction) フロントエンドがAIエージェントに接続する方法を標準化する通信プロトコル ⚫ A2UI (Agent-to-User Interface) AIエージェントがUIを安全に生成するための宣言型UIプロトコル ⚫ MCP Apps (Model Context Protocol Apps) インタラクティブなUIをAIチャットの会話内に埋め込めるようにする MCP の拡張仕様 Copyright（C） NRI Netcom, Ltd. All rights reserved. 4
6. Agent to User における従来の課題 フロントエンド バックエンド ⚫ フレームワークによって通信方式が異なるため場当たり的な実装になる フロントエンドエンジニア視点 ⇒ バックエンドで使われているフレームワークが変わるたびに通信の実装を書き直す必要があった ⚫ 途中で処理に介在する Human in the Loop を組み込めない 手戻りのコストが発生 , 信頼性の欠如に繋がる , 自律性とのトレードオフ ⚫ AIエージェントの思考プロセスをリアルタイムに可視化できない ブラックボックス化によりデバッグ困難性 , 信頼性の欠如 , 待機時間のユーザー体験が悪い フロントエンド/バックエンドの通信の壁 × UX の向上 Copyright（C） NRI Netcom, Ltd. All rights reserved. 5
7. AG-UI (Agent-User Interaction) ⚫ 2025年5月7日 一般公開 （現在は、CopilotKit のみ 1st Party クライアント） ⚫ フロントエンドがAIエージェントに接続する方法を標準化する通信プロトコル Copyright（C） NRI Netcom, Ltd. All rights reserved. 6
8. AG-UI の特徴 ⚫ イベントをストリームで双方向通信する AIエージェントの思考プロセスや応答をイベントストリームでリアルタイムに表示 ⚫ ユーザーから渡される入力を約28種類の標準イベントとして扱う TextMessageContent(テキストのチャンク到着)やToolCallStart(ツールコール)などが標準イベントとして定型化 ⇒ エージェント側とフロントエンド側で各々独自のメッセージスキーマの設計が不要 ⚫ 特定の通信方法に依存しない HTTP標準のSSE(Server-Sent Events)をサポートしているため、多様なアーキテクチャに対応可能 ⚫ Human in the Loop に対応可能 重要な判断を伴う処理でもユーザーが介在しながら安全に実行可能 Copyright（C） NRI Netcom, Ltd. All rights reserved. 7
9. AG-UI (Agent-User Interaction) AG-UI があればインタラクティブな UX を実現できるようになる！ Copyright（C） NRI Netcom, Ltd. All rights reserved. 8
10. AG-UI の次の問い ⚫ AG-UI によりフロントエンド/バックエンド間の通信問題は解決 ⇒ 次の問いは、「Agent to User で何を送るか」 ⚫ レスポンスの選択肢 テキスト 宣言的JSON コード シンプルで安全 リッチな表現が可能 リッチな表現が可能 フレームワーク依存なし コードを実行するリスクなし 任意コードが実行されるリスク 表現力が低い フレームワーク非依存 フレームワーク依存 テキストは表現力が不十分 , コードはリスク ⇒ 中間の選択肢が欲しい (宣言的JSON) Copyright（C） NRI Netcom, Ltd. All rights reserved. 9
11. A2UI (Agent-to-User Interface) AI エージェントが UI を安全に生成するための宣言型UIプロトコル A2UI の特徴 ⚫ セキュリティファーストな設計 ⇒ 宣言的なコンポーネント宣言を返却すると、A2UI レンダラーはその定義を解釈し、インタラクティブな UI としてブラウザに表示 ⇒実行可能なコードがなく、XSS リスクの低減にも寄与 ⚫ LLM フレンドリーな設計 ⇒ basic_catalog_rules.txt というUIコンポーネントの構造や利用ルールを定義したテキストをシステムプロンプトへ注入 ⇒ 出力の一貫性向上 ⚫ フレームワークに非依存 ⇒ AIエージェントの出力が、ReactやAngularなど多様なプラットフォームでそのままレンダリング可能 Copyright（C） NRI Netcom, Ltd. All rights reserved. 10
12. A2UI (Agent-to-User Interface) A2UI があればエージェントの出力を表現力 豊かな UI として安全かつ動的に届けられる！ Copyright（C） NRI Netcom, Ltd. All rights reserved. 11
13. AG-UI と A2UI は補完関係にある AG-UI のみ A2UI のみ 実現できること AIエージェントの出力をテキストとして リアルタイムにブラウザへ届ける カード・ボタンなどUIの構造をコンポーネ ントJSONとして宣言できる 実現困難なこと UIコンポーネントを表現する 手段が無い 宣言したUIをフロントエンドへ届けるスト リーム基盤が無い AG-UI と A2UI は組み合わせることで、単体では足りない部分を補い真価を発揮する 結果・・ AI エージェントの回答がテキストからインタラクティブな UI へと変わり、ユーザーは チャットを通じてカードやボタンなどを直接操作できるようになる！ Copyright（C） NRI Netcom, Ltd. All rights reserved. 12
14. AG-UI × A2UI × Strands Agents を組み込んだマルチエージェント ⚫ 旅行プランナーエージェント ユーザーがフロントエンドから呼び出すだけで、AI エージェントが観光スポットや宿泊施設、交通手段 を調べ、テキストではなくインタラクティブな UI としてレスポンスを返す Copyright（C） NRI Netcom, Ltd. All rights reserved. 13
15. プロトコルスタックを整理する ⚫ AG-UI ⇒ フロントエンドと Orchestrator エージェント間のイベントストリームに使用 ⇒ ユーザーのリクエストがフロントエンドから届いた時に、エージェントの思考過程やツール 呼び出し、生成テキストをリアルタイムでチャット画面に返すことで UX を向上させる役割 ⚫ A2UI ⇒ 旅程や宿泊施設の情報を UI としてエージェントに動的生成してもらう用途として使用 ⚫ A2A ⇒ Orchestratorエージェントとサブエージェント間の通信に使用 ⇒ 今回は、交通情報や宿泊施設情報の収集をサブエージェントへ委譲している Copyright（C） NRI Netcom, Ltd. All rights reserved. 14
16. 旅行プラン生成フロー Copyright（C） NRI Netcom, Ltd. All rights reserved. 15
17. アーキテクチャの補足 ⚫ インフラを CDK で管理 先日 Amazon Bedrock AgentCore Runtime の L2 コンストラクトが公式提供 ProtocolType.AGUI を記述するだけで、HTTP + SSE エンドポイントをそれぞれ払い出してくれる // AG-UI オーケストレータ const orchestrator = new Runtime(this, “OrchestratorRuntime”, { runtimeName: “travel_planner_agui”, agentRuntimeArtifact: AgentRuntimeArtifact.fromEcrRepository(orchestratorRepo, imageTag), protocolConfiguration: ProtocolType.AGUI, // AGUI プロトコルを宣言 authorizerConfiguration: RuntimeAuthorizerConfiguration.usingCognito(userPool,[userPoolClient]), environmentVariables: { LODGING_AGENT_URL: agentCoreUrl(lodging.agentRuntimeId), TRANSPORT_AGENT_URL: agentCoreUrl(transport.agentRuntimeId), }, tracingEnabled: true, loggingConfigs: loggingConfig(orchestratorLogs), }); ⚫ AgentCore Runtime ×3 構成 複数プロトコルを使用する場合、単一の AgentCore Runtime でホストすることはできない ⇒ 1 Runtime あたり 1 プロトコルの制約 Copyright（C） NRI Netcom, Ltd. All rights reserved. 16
18. MCP(Model Context Protocol) ⚫ AI アプリケーションと外部システムとの接続を標準化するためのプロトコル ⚫ 特徴 ・ MCPクライアントとMCPサーバー間でやり取りするメッセージに JSON-RPC 2.0 を使用 ・ 出力はテキストや構造化データのみ テキストだけでは表現力が物足りない・・・ Copyright（C） NRI Netcom, Ltd. All rights reserved. 17
19. MCP Apps MCP Apps = 従来の MCPツール ＋ UI リソース(HTML/JavaScript) ⚫ そこで MCP Apps ！ ⇒ MCP サーバーが HTML ベースのインタラクティブな UI を MCPホストの会話内に埋め込む (MCP の拡張仕様) ⇒ MCP-UI と OpenAI Apps SDK の知見を統合し、標準化へ ⇒ 一度定義すれば、複数のMCPクライアントで動くため、フロントエンド側の個別実装が不要 検出 MCPホスト リクエスト MCPサーバー HTML Sandbox iframe にレンダリング Copyright（C） NRI Netcom, Ltd. All rights reserved. 18
20. MCP Apps を作ってみる ⚫ create-mcp-app スキルで簡単に MCP Apps が作れる ⇒ MCP Apps の公式リポジトリ ext-apps で提供されている AI コーディングエージェント向けスキル ⚫ 実際のフロー /plugin marketplace add modelcontextprotocol/ext-apps /plugin install mcp-apps@modelcontextprotocol-ext-apps /reload-plugins // MarketPlace に登録 // スキルをインストール // プラグインをリロード 「これを使って何か役に立ちそうな MCP Apps を作ってください」 と依頼するだけ Ex:) Claude Code 指示を受けた Claude Code は、 create-mcp-app スキルを認識し、参考コードのクロー ン、プロジェクト構造の生成、依存関係のインストール、ビルドまで一気通貫で実行 Copyright（C） NRI Netcom, Ltd. All rights reserved. 19
21. MCP Apps を作ってみる ⚫ グラフ生成アプリを作ってくれました ⇒ グラフ生成アプリ自体を会話内に埋め込んでいる ・ 棒グラフ ・ 折れ線グラフ ・ エリアグラフ ・ 円グラフ ⚫ PC を閉じても常駐・本番運用・公開 ⇒ Cloudflare Workers に載せる ⚫ 一時的に共有・デモ ⇒ Cloudflare Tunnel に載せる Copyright（C） NRI Netcom, Ltd. All rights reserved. 20
22. MCP Apps MCP Apps があれば、ツール呼び出しの結果を会話 内にHTMLアプリとして展開できる！ Copyright（C） NRI Netcom, Ltd. All rights reserved. 21
23. A2UI と MCP Apps は競合ではない ⚫ Google Developers Blog より、どちらかの利用ではなく、組み合わせを推奨 パターン1： A2UI over MCP ⇒ シンプルUI にしたい , ネイティブUI に統合したい パターン2： MCP Apps in A2UI ⇒ 一部のみ複雑なUI を埋め込みたい 通常部分は A2UI を利用し、インタラクティブ部分だけ MCP Apps を利用 パターン3： A2UI in MCP Apps ⇒ MCPホストが A2UIに未対応だが、A2UI を使いたい まずは、A2UI でシンプルな UI を構築し、複雑な UI を追加で組み込む場合は MCP Apps を足す Copyright（C） NRI Netcom, Ltd. All rights reserved. 22
24. まとめ ⚫ Generative UI を実現する技術には、AG-UI , A2UI , MCP Apps がある。他にも streamUI などがある (今回は割愛) ⚫ Generative UI が抱える課題 課題①：フロントエンドとバックエンド間で通信が分断されている AG-UI が解決 ⇒ エージェントとフロントエンドの通信を標準化 課題②：Agent to User で何を送るか (テキストでは、表現力が低い) A2UI が解決 ⇒ 宣言的JSONで安全かつリッチなUIを生成 課題③：テキストや宣言的JSON では表現できない UI がある MCP Apps が解決 ⇒ ツール呼び出しで HTML アプリを会話内に展開 ⚫ AG-UI と A2UI 、A2UI と MCP Apps は競合ではなく補完関係にある Copyright（C） NRI Netcom, Ltd. All rights reserved. 23