実践AIチャットボットUI実装入門

フロントエンドカンファレンス東京 2025の発表資料です
https://fec-tokyo.connpass.com/event/352581/

Transcript

1. 実践AI チャットボットUI 実装入門 syumai フロントエンドカンファレンス東京 2025 (2025/9/21)
2. 自己紹介 syumai ECMAScript 仕様輪読会 / Asakusa.go 主催 株式会社ベースマキナで管理画面のSaaS を開発中 Go でGraphQL サーバー (gqlgen) や TypeScript でフロン トエンドを書いています Software Design 2023 年12 月号から2025 年2 月号まで Cloudflare Workers の連載をしました Twitter ( 現𝕏): @__syumai Website: https://syum.ai
3. 本日話すこと AI チャットボットのインタラクション方法 AI チャットボットのUI に関する主要な話題のふりかえり 主要ライブラリ・プロトコルの解説 AG-UI (CopilotKit) MCP UI 具体的な実装方法
4. AI チャットボットのインタラクション方法
5. AI チャットボットの基本的なインタラクション方法 テキストベース ユーザー: テキストを入力 AI: テキストを返す
6. Mastra x Vercel AI SDK v5 のサンプル https://github.com/mastra-ai/mastra/tree/main/examples/ai-sdk-v5
7. AI チャットボットの基本的なインタラクション方法 テキストベース ユーザー: テキストを入力 AI: テキストを返す → これは常に理想的なインタラクション方法と言えるか？
9. テキスト以外のインタラクション方法が適切な例 ルート案内 地図が表示された方が嬉しい ショッピング 商品の写真が表示されたり、色を選択したりできた方が嬉しい
10. 一時期あった言説
11. 「どこのWeb サービスもMCP サーバーを提供するようになったら、 全部チャットで済むようになって、フロントエンドの開発は要らなくなる んじゃないか？」
12. 西尾さんのツイート ( 勝手に引用) MCP に、従来のUI の役割は完全には置き換えられない
13. フロントエンドカンファレンス北海道 2025 の yusukebe さんの発表でも同様の話がありました https://speakerdeck.com/yusukebe/aishi-dai-nouihadokohexing-ku
14. 時と場合に応じて、適切なUI があるはず そもそも、文字入力のコストは低くないので、全ての利用者に常に使うよう求めるべ きではない
15. Gemini の事例
16. カレンダーの予定UI が表示され、クリックすると詳細に飛べる
18. 地図が表示され、ルートを視覚的に確認できる
19. 目指すべきインタラクション方法 ユーザー: テキストか、専用のUI から入力 AI: テキストか、専用のUI を返す (Gemini の例で確認できたのはこちら)
20. AI チャットボットのUI に関する主要な話題のふりかえり
21. 2024/5/15-16 Evan Bacon さんのReact Conf 2024 での発表 2025/4/10 Kent C. Dodds さんの「New Content Type for "UI" 」Proposal 2025/5/3 Kent C. Dodds さんの記事「The future of AI interaction: Beyond just text 」 2025/5/12 AG-UI リリースのアナウンス 2025/5/17 MCP UI リリースのアナウンス (MCP 公式ではない)
22. 2024/5/15-16 Evan Bacon さんのReact Conf 2024 での発表 Expo Router のRSC 対応についての発表の一環で、AI チャットボットがUI を返すデモを行った https://www.youtube.com/watch?v=djhEgxQf3Kw&t=677s
23. 2025/4/10 Kent C. Dodds さんの「New Content Type for "UI" 」Proposal MCP に生のHTML でUI を返す機能追加の提案を行った https://github.com/modelcontextprotocol/modelcontextprotocol/discussions/1146
24. 2025/5/3 Kent C. Dodds さんの記事「The future of AI interaction: Beyond just text 」 Evan Bacon さんの発表をベースに、AI チャットボットでUI を使う提案を行う記事 https://www.epicai.pro/the-future-of-ai-interaction-beyond-just-text-w22ps
25. 2025/5/12 AG-UI リリースのアナウンス AI エージェントがUI を含んだインタラクションを行うためのプロトコルとライブラリ https://x.com/CopilotKit/status/1921940427944702001
26. 2025/5/17 MCP UI リリースのアナウンス (MCP 公式ではない) AI エージェントがMCP 経由でUI を含んだインタラクションを行うためのプロトコルとライブラリ https://x.com/idosal1/status/1923477857881190718
27. 2025 年5 月時点で、以下の2 つが出揃った AG-UI MCP UI
28. AG-UI とは
29. AG-UI AI エージェントがUI を含んだインタラクションを行うためのプロトコルとライブラリ AI チャットボット実装のためのフレームワーク、CopilotKit のチームによって開発さ れた CopilotKit との結び付きが強い。AG-UI のリポジトリ内にもCopilotKit への言及が 数多く存在 CopilotKit でデファクトスタンダードを取りに行くための動きと思われる
30. CopilotKit によって、Mastra を含む多くのフレームワークをサポート https://github.com/ag-ui-protocol/ag-ui
31. AG-UI (CopilotKit) のデモ
32. AG-UI (CopilotKit) の機能を一通り試せるPlayground https://dojo.ag-ui.com/
33. AG-UI の特徴
34. AG-UI はエージェントとユーザー間のプロトコル (A2A やMCP と競合しない) https://github.com/ag-ui-protocol/ag-ui
35. AG-UI のプロトコルが行うこと ユーザーからの以下のような要求を、全てAG-UI のプロトコルで行うことが想定されてい る エージェントとのテキストメッセージのやり取り ツールの呼び出し エージェントとの状態の同期 部分的に導入できるものではない
36. エージェントとの状態の同期 CopilotKit のShared State という機能を実現するための機構 スキーマ定義付きの、ただのオブジェクトが共有されるイメージ ツール呼び出しのようなワンショットで終わるものではなく、エージェントが徐々に 情報を集めて画面に書き込んでいくような、時間のかかる処理に使える
37. https://docs.copilotkit.ai/shared-state
38. AG-UI のプロトコルが行わないこと エージェントからのUI そのものの返却 MCP UI ( 後述) のように、ツールの呼び出し結果自体が生のHTML にはなったり しない あくまで、ユーザー（ブラウザ）とエージェントの間では、メッセージのやり取 りと、状態の同期をするだけ UI の表示方法は完全にフロントエンドに委ねられている →AI チャットボットのフロントエンドが、対応するエージェント向けの 専用の実装を持つ必要がある
39. MCP UI とは
40. MCP UI AI エージェントがMCP 経由でUI を含んだインタラクションを行うためのプロトコル とライブラリ プロトコルとしては、完全にMCP の上に乗っている 独自色の少ない、ただの拡張仕様 Kent C. Dodds さんのProposal のアイデアを元に、Ido Salomon さん (@idosal) が実装 https://mcpui.dev/
41. Shopify もMCP UI に注目しているらしい https://shopify.engineering/mcp-ui-breaking-the-text-wall
42. MCP UI のデモ
43. MCP UI の機能を試せるPlayground ( 手元でAPI Key を設定して動かす必要あり) https://github.com/idosal/scira-mcp-ui-chat
44. https://mcpstorefront.com のMCP UI Server に繋いだ例
45. MCP UI の特徴
46. UI はただのMCP のResource UI は、独自の ui:// scheme のURL で始まるMCP のResource として表現され、 Tool の呼び出し結果として返される 例: ui://my-custom-form/instance-01 Resource の mimeType に応じて、 レンダリング方法が変わる mimeType: 'text/html' → HTML の中身をそのままiframe に表示 mimeType: 'text/uri-list' → URL の示す先をiframe に表示 MCP のResource は、元々Tool の結果として返せるので、仕様に反する部分がなくシ ンプル MCP のHost が、 ui:// Resource のレンダリング方法を知ってさえいればいい
47. UI はiframe にレンダリングされる UI は、iframe 内にレンダリングされるため、直接AI チャットボット (MCP Host) のア プリケーションのWindow object に触れられないので安全 通信はpostMessage で行う iframe 内にレンダリングされるコンポーネントと、MCP UI のホストとの postMessage ベースの通信プロトコルが定義されている ツール呼び出し以外に、プロンプトを入力したり、URL を渡してリンクを開くよ うHost に依頼したりもできる
48. UI 側からのツール呼び出しの例 window.parent.postMessage( { type: "tool", payload: { toolName: "get-weather", params: { city: "Tokyo", }, }, }, "*" ); https://mcpui.dev/guide/embeddable-ui#tool
49. 対応しているMCP Host が既に複数存在。Postman などから、素の状態でMCP UI を使える https://mcpui.dev/guide/supported-hosts
50. AG-UI とMCP UI の比較
51. AG-UI とMCP UI の比較 汎用性 基本的にMCP UI の方が上。 MCP UI のResource をレンダリングできるクライアントならどこでも使える AG-UI は、専用のフロントエンド実装が必要 MCP 非依存という観点ではAG-UI の方が上。 エージェントの使用するツールが、MCP のTool として実装されるとは限らな い
52. AG-UI とMCP UI の比較 表現力 AG-UI の方が、表現力は高い。 エージェントとの状態共有など、高度な機能も備えている MCP UI は、汎用性に振っている分、出来ることが少ない
53. AG-UI とMCP UI の比較 ベンダー依存度 AG-UI の方が、ベンダー依存度が高く見える。 AG-UI のプロトコル自体がCopilotKit 発で、他に主要な実装が特に無さそう プロトコルの複雑性もこちらの方が高いので、この状況は続きそう 一方、MCP UI は、Postman など対応するクライアント実装が数多く存在し ている
54. 具体的な実装方法
55. AG-UI (CopilotKit) の実装
56. AG-UI (CopilotKit) の実装 Mastra のサンプルを取り上げます https://github.com/CopilotKit/with-mastra
57. AG-UI (CopilotKit) の実装 やること 「天気情報取得ツール」のUI のレンダリング
58. 「天気情報取得ツール」のUI のレンダリング エージェント側 結果のスキーマを定義 export type WeatherToolResult = z.infer<typeof WeatherToolResultSchema>; const WeatherToolResultSchema = z.object({ temperature: z.number(), feelsLike: z.number(), humidity: z.number(), windSpeed: z.number(), windGust: z.number(), conditions: z.string(), location: z.string(), }); https://github.com/CopilotKit/with-mastra/blob/main/src/mastra/tools/index.ts
59. 「天気情報取得ツール」のUI のレンダリング エージェント側 先ほどのスキーマをoutputSchema に設定して、tool を宣言 export const weatherTool = createTool({ id: 'get-weather', description: 'Get current weather for a location', inputSchema: z.object({ location: z.string().describe('City name'), }), outputSchema: WeatherToolResultSchema, execute: async ({ context }) => { // ツールの内容は省略 return await getWeather(context.location); }, }); https://github.com/CopilotKit/with-mastra/blob/main/src/mastra/tools/index.ts
60. 「天気情報取得ツール」のUI のレンダリング エージェント側 tool をエージェントに設定して公開 ( 普通のMastra のtool となんら変わらない) export const weatherAgent = new Agent({ name: "Weather Agent", tools: { weatherTool }, model: openai("gpt-4o"), instructions: "You are a helpful assistant.", // ... }); https://github.com/CopilotKit/with-mastra/blob/main/src/mastra/agents/index.ts
61. 「天気情報取得ツール」のUI のレンダリング クライアント側 React で、天気情報の表示コンポーネントを実装 function WeatherCard({ result, location, status }: { // toolのoutputSchemaの型がそのまま使える！ result: WeatherToolResult, location?: string, status: "inProgress" | "executing" | "complete" }) { // ... https://github.com/CopilotKit/with-mastra/blob/main/src/app/page.tsx
62. 「天気情報取得ツール」のUI のレンダリング クライアント側 weatherTool の呼び出しに合わせて WeatherCard コンポーネントをレンダリングするこ とを useCopilotAction hook 呼び出しで指定 import { useCopilotAction } from "@copilotkit/react-core"; // Pageのコンポーネント内 useCopilotAction({ name: "weatherTool", description: "Get the weather for a given location.", available: "frontend", parameters: [{ name: "location", type: "string", required: true }], // WeatherCardのコンポーネントを返す render: ({ args, result, status }) => <WeatherCard result={result} location={args.location} status={status} /> }); https://github.com/CopilotKit/with-mastra/blob/main/src/app/page.tsx
63. 「天気情報取得ツール」のUI のレンダリング クライアント側 チャット内容は CopilotSidebar コンポーネントに表示される import { CopilotSidebar } from "@copilotkit/react-ui"; export default function CopilotKitPage() { return ( <main> <YourMainContent /> <CopilotSidebar // ... /> </main> ); } https://github.com/CopilotKit/with-mastra/blob/main/src/app/page.tsx
64. weatherTool の応答として WeatherCard が表示された
65. MCP UI の実装
66. MCP UI の実装 やること カラーピッカーで選んだ色のグリンピースのシュウマイを生成 MCP Server 側の実装だけ取り上げます (Cloudflare のAgents SDK を使用)
67. MCP UI の実装 Tool の実装 (generateSyumai) 最後に呼ぶ、 generateSyumai tool を用意しておきます this.server.tool("generateSyumai", "Generate a syumai avatar image with the specified color code.", { colorCode: z.string().length(6) }, async ({ colorCode }) => ({ content: [{ type: "text", text: `{ "imageUrl": "https://syum.ai/image?code=${colorCode}"}` }] }));
68. MCP UI の実装 コンポーネントの実装 カラーピッカーのHTML を実装 (Claude に書いてもらいました) <div class="color-selector"> <h2>色を選択してください</h2> <div class="button-container"> <button class="color-button red" data-color="red" data-color-name="赤"> <span class="color-name">赤</span> </button> <!-- ... --> </div> <div class="selected-color" id="selectedColor" style="display: none;"> <div class="color-display" id="colorDisplay"></div> <span id="colorText">選択された色: </span> </div> </div>
69. MCP UI の実装 コンポーネントの実装 onClick でMCP Host にpostMessage して、 generateSyumai を呼ぶようにする document.querySelectorAll('.color-button').forEach(button => { button.addEventListener('click', () => { // ... const message = { type: 'tool', payload: { toolName: 'generateSyumai', params: { colorCode: colorData.hex, } } }; window.parent.postMessage(message, '*');
70. MCP UI の実装 Tool の実装 (showSyumaiColorPicker) Tool から、コンポーネントのResource を返すようにする // 生のHTMLを文字列でexportしている import { colorpicker } from "./colorpicker"; import { createUIResource } from "@mcp-ui/server"; this.server.tool( "showSyumaiColorPicker", {}, () => { // `createUIResource` でMCP UIのリソースを生成 const resourceBlock = createUIResource({ uri: "ui://server-generated/syumaiColorPicker", content: { type: "rawHtml", htmlString: colorpicker }, encoding: "text", }) return { content: [resourceBlock] } },
71. MCP UI の実装 カラーピッカーで選んだ色のグリンピースのシュウマイを生成するMCP サーバーは、これ だけで実装完了！
72. 設定したHTML が表示される
73. ボタンクリックで、Tool が呼ばれる
74. まとめ AI チャットボットでは、テキストではなく、専用のUI をレンダリングする方が適切な ことがある AG-UI (CopilotKit) / MCP UI は、それぞれ大きく出来ることが異なる AG-UI アプリケーション全体を制御したいならこちら MCP UI ツール呼び出しの結果の表示だけ制御したいならこちら MCP Host の対応も増えていて、より広く使える可能性がある
75. ご清聴ありがとうございました！
76. 補足
77. AI チャットボット向けフレームワークは他にもある Assistant UI https://www.assistant-ui.com/ これも有望っぽいです
78. 最近見付けて面白かったもの nanobot https://www.nanobot.ai/ MCP サーバーをYAML ファイル一本でエージェントに変換 MCP UI も対応しています