Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for daitasu daitasu
November 12, 2025

 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

Avatar for daitasu

daitasu

November 12, 2025
Tweet

More Decks by daitasu

Other Decks in Design

Transcript

  1. MCPを構築する3つのコンポーネント • host ◦ 1つまたは複数のMCP client を 管理する AI アプリケーション

    (IDE 等) • client ◦ アプリ内でhost と server の 1:1 の接続を維持する • server ◦ MCP client に対し何かしらの context を提供する
  2. 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 を呼べる
  3. 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
  4. server side • server side は @mcp-ui/server を 用いて実装 •

    registerTool に対し、下記を渡す ◦ MCP tool 名 ◦ メタデータ ◦ createUIResource(提供するUI の情報) MCP tool 名 メタデータ UI リソースの 情報
  5. server side - createUIResource createUIResource は下記を指定 • uri ◦ MCP

    client がMCP-UIを識別す る一意のURL(ui:// スキーマ) • content.type ◦ rawHtml, externalUrl, remoteDom • encoding ◦ text / blob
  6. client side - fetch 部分 • @mcp-ui/client を用いる • streamableHttp

    でMCP サーバと接続 • client.callTool でサーバ側で設定した toolName を呼び出し ◦ 実際にはAIエージェントがここに介在 する
  7. client side - UIResourceRenderer • @mcp-ui/client が提供する UIResouceRenderer を利用 •

    MCP server から返却されたUI リソース がここにレンダリングされる • スクリプトやDOMは iframe 上のサンド ボックス環境で実行されることになる • UIResouceRenderer には対話的なアク ションをiframe から受けたり、自前のコン ポーネントを提供することができる
  8. client side - ComponentLibrary • ComponentLibraryの設定をすること で、MCPが固有の「Reactコンポーネント」 or 「WEBコンポーネント」を提供可能 •

    サーバ側でprop やevent を指定するた め、マッピングを設ける必要がある • @mcp-ui/client が標準で一部のサンプ ルコンポーネントも提供している ◦ basicComponentLibrary
  9. client side - UIResourceRendererの拡張 • remoteDomProps ◦ 設定した自前のコンポーネント定義を 配置する ◦

    サーバサイドで設定したコンポーネント の呼び出しが可能になる • onUIAction ◦ UIリソース上で発火したアクションを ブラウザ側で受け取ることが可能
  10. server side - インタラクティブなアクションの設定 • content.type ◦ 何かしらのReactコンポーネントを返却する 際は「remoteDom」を指定 •

    window.parent.postMessage ◦ UIリソース上のアクションでチャットUI(AI エージェント)に次の指示を要求可能 ◦ メッセージの主な種類は5種類 ▪ tool ▪ prompt ▪ intent ▪ link ▪ notify ◦ https://mcpui.dev/guide/embeddable-ui