AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験

2025年11月12日　「Web UI 実装勉強会 #2」 における登壇資料です。
https://ui-devs.connpass.com/event/369228/

MCP-UIについては、ブログでも細かな実装の話を書いてます。
https://blog.daitasu.work/entry/2025/11/11/080000

Transcript

1. AIエージェントが対話的なUIを返す！ MCP−UIで変わるユーザ体験 Web UI 実装勉強会 #2 2025.11.12 @daitasu
2. 自己紹介 Name: @daitasu Belong to: SEN, Inc. Favorite: Dinosaurus
3. 会社紹介 写真を中心とした、幼保業界の DXプロダクトを展開
4. AIエージェントが対話的なUIを返す！ MCP−UIで変わるユーザ体験
5. Model Context Protocol(MCP)とは？ • Anthropic社が公開しているオー プンソースのプロトコル • アプリケーションがLLMに対して何 かしらのコンテキストを提供する際 のプロトコルを標準化したもの
6. MCPを構築する3つのコンポーネント • host ◦ 1つまたは複数のMCP client を 管理する AI アプリケーション (IDE 等) • client ◦ アプリ内でhost と server の 1:1 の接続を維持する • server ◦ MCP client に対し何かしらの context を提供する
7. MCP-UIはMCPを拡張し、 AIエージェントがインタラクティブなUI を返却することを可能にする仕組み
8. MCP-UIとは？ • MCPを拡張し、AIエージェントが 対話的なUIリソースを返却できる ようにする • Chat UIに対してUIコンポーネン トを返却し、そのUI上でのアクショ ンも可能 • Shopify の例： ◦ チャットの返答として商品一 覧や購入フォームを提供 ◦ https://shopify.engineering/mc p-ui-breaking-the-text-wall 1. チャットがUIコンポーネントを返却 2. UI上のボタンでアクションし、次の prompt や tool を呼べる
9. やってみよう
10. MCP-UI　SDK • MCP-UI は現在、Ruby、Python、TypeScript の3種のSDKを提供 • 今回は TypeScript で実施 • TypeScript SDK には下記2つがある ◦ @mcp-ui/client ◦ @mcp-ui/server • 先に今回の完成物 ◦ https://github.com/daitasu/mcp-ui-playground
11. Try 1. シンプルな「Hello World」の返却 • 簡略化のため、AIエージェントは噛ませず、ブラウザから直接MCP-UI の tool を呼んでみる • ① シンプルな「Hello world」をrawHtml として返却
12. server side • server side は @mcp-ui/server を 用いて実装 • registerTool に対し、下記を渡す ◦ MCP tool 名 ◦ メタデータ ◦ createUIResource(提供するUI の情報) MCP tool 名 メタデータ UI リソースの 情報
13. server side - createUIResource createUIResource は下記を指定 • uri ◦ MCP client がMCP-UIを識別す る一意のURL(ui:// スキーマ) • content.type ◦ rawHtml, externalUrl, remoteDom • encoding ◦ text / blob
14. client side - fetch 部分 • @mcp-ui/client を用いる • streamableHttp でMCP サーバと接続 • client.callTool でサーバ側で設定した toolName を呼び出し ◦ 実際にはAIエージェントがここに介在 する
15. client side - UIResourceRenderer • @mcp-ui/client が提供する UIResouceRenderer を利用 • MCP server から返却されたUI リソース がここにレンダリングされる • スクリプトやDOMは iframe 上のサンド ボックス環境で実行されることになる • UIResouceRenderer には対話的なアク ションをiframe から受けたり、自前のコン ポーネントを提供することができる
16. Try 2. 自前のReactコンポーネントを提供し、対話的アクションを呼び出す • 今度は自前のReactコンポーネント(CustomCounter)をMCPが返してみる • また、コンポーネント内のアクションをクライアント側で受け取る
17. client side - ComponentLibrary • ComponentLibraryの設定をすること で、MCPが固有の「Reactコンポーネント」 or 「WEBコンポーネント」を提供可能 • サーバ側でprop やevent を指定するた め、マッピングを設ける必要がある • @mcp-ui/client が標準で一部のサンプ ルコンポーネントも提供している ◦ basicComponentLibrary
18. client side - UIResourceRendererの拡張 • remoteDomProps ◦ 設定した自前のコンポーネント定義を 配置する ◦ サーバサイドで設定したコンポーネント の呼び出しが可能になる • onUIAction ◦ UIリソース上で発火したアクションを ブラウザ側で受け取ることが可能
19. server side - インタラクティブなアクションの設定 • content.type ◦ 何かしらのReactコンポーネントを返却する 際は「remoteDom」を指定 • window.parent.postMessage ◦ UIリソース上のアクションでチャットUI(AI エージェント)に次の指示を要求可能 ◦ メッセージの主な種類は5種類 ▪ tool ▪ prompt ▪ intent ▪ link ▪ notify ◦ https://mcpui.dev/guide/embeddable-ui
20. ユーザ体験はどう変わる？ Before After - MCP-UI によって、ユーザは開発者が設けた画面フローに沿う必要がなく なる - 自分の望む順序で欲しい UIにアクセス が可能(LLM が選択する) - よりユーザフレンドリーな体験になる(???)
21. まとめ • MCP-UI で AIエージェントが対話的なUIを返却可能になる • ユーザはMCPを通じて、自分の望むUIを直接得ることができる • WEBのユーザ体験に大きな変化は産めそう • ただし、使い勝手のイメージが難しく、ユーザにとっての良い体験にな るには試行錯誤が必要そう