AIエージェントが対話的なUIを返す！ MCP−UIで変わるユーザ体験 Web UI 実装勉強会 #2 2025.11.12 @daitasu 

自己紹介 Name: @daitasu Belong to: SEN, Inc. Favorite: Dinosaurus 

会社紹介 写真を中心とした、幼保業界の DXプロダクトを展開 

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

Model Context Protocol(MCP)とは？ ● Anthropic社が公開しているオー プンソースのプロトコル ● アプリケーションがLLMに対して何 かしらのコンテキストを提供する際 のプロトコルを標準化したもの 

MCPを構築する3つのコンポーネント ● host ○ 1つまたは複数のMCP client を 管理する AI アプリケーション (IDE 等) ● client ○ アプリ内でhost と server の 1:1 の接続を維持する ● server ○ MCP client に対し何かしらの context を提供する 

MCP-UIはMCPを拡張し、 AIエージェントがインタラクティブなUI を返却することを可能にする仕組み 

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 を呼べる 

やってみよう 

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 

Try 1. シンプルな「Hello World」の返却 ● 簡略化のため、AIエージェントは噛ませず、ブラウザから直接MCP-UI の tool を呼んでみる ● ① シンプルな「Hello world」をrawHtml として返却 

server side ● server side は @mcp-ui/server を 用いて実装 ● registerTool に対し、下記を渡す ○ MCP tool 名 ○ メタデータ ○ createUIResource(提供するUI の情報) MCP tool 名 メタデータ UI リソースの 情報 

server side - createUIResource createUIResource は下記を指定 ● uri ○ MCP client がMCP-UIを識別す る一意のURL(ui:// スキーマ) ● content.type ○ rawHtml, externalUrl, remoteDom ● encoding ○ text / blob 

client side - fetch 部分 ● @mcp-ui/client を用いる ● streamableHttp でMCP サーバと接続 ● client.callTool でサーバ側で設定した toolName を呼び出し ○ 実際にはAIエージェントがここに介在 する 

client side - UIResourceRenderer ● @mcp-ui/client が提供する UIResouceRenderer を利用 ● MCP server から返却されたUI リソース がここにレンダリングされる ● スクリプトやDOMは iframe 上のサンド ボックス環境で実行されることになる ● UIResouceRenderer には対話的なアク ションをiframe から受けたり、自前のコン ポーネントを提供することができる 

Try 2. 自前のReactコンポーネントを提供し、対話的アクションを呼び出す ● 今度は自前のReactコンポーネント(CustomCounter)をMCPが返してみる ● また、コンポーネント内のアクションをクライアント側で受け取る 

client side - ComponentLibrary ● ComponentLibraryの設定をすること で、MCPが固有の「Reactコンポーネント」 or 「WEBコンポーネント」を提供可能 ● サーバ側でprop やevent を指定するた め、マッピングを設ける必要がある ● @mcp-ui/client が標準で一部のサンプ ルコンポーネントも提供している ○ basicComponentLibrary 

client side - UIResourceRendererの拡張 ● remoteDomProps ○ 設定した自前のコンポーネント定義を 配置する ○ サーバサイドで設定したコンポーネント の呼び出しが可能になる ● onUIAction ○ UIリソース上で発火したアクションを ブラウザ側で受け取ることが可能 

server side - インタラクティブなアクションの設定 ● content.type ○ 何かしらのReactコンポーネントを返却する 際は「remoteDom」を指定 ● window.parent.postMessage ○ UIリソース上のアクションでチャットUI(AI エージェント)に次の指示を要求可能 ○ メッセージの主な種類は5種類 ■ tool ■ prompt ■ intent ■ link ■ notify ○ https://mcpui.dev/guide/embeddable-ui 

ユーザ体験はどう変わる？ Before After - MCP-UI によって、ユーザは開発者が設けた画面フローに沿う必要がなく なる - 自分の望む順序で欲しい UIにアクセス が可能(LLM が選択する) - よりユーザフレンドリーな体験になる(???) 

まとめ ● MCP-UI で AIエージェントが対話的なUIを返却可能になる ● ユーザはMCPを通じて、自分の望むUIを直接得ることができる ● WEBのユーザ体験に大きな変化は産めそう ● ただし、使い勝手のイメージが難しく、ユーザにとっての良い体験にな るには試行錯誤が必要そう