AI エージェントがインタラクティブな UI を返すことを可能にする MCP UI

npm create cloudflare@latest my-mcp-ui-server

npm install agents @modelcontextprotocol/sdk zod @mcp-ui/server

import { McpAgent } from 'agents/mcp';
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
import { z } from 'zod';
import { createUIResource } from '@mcp-ui/server';
 
export class MyMCP extends McpAgent {
	server = new McpServer({
		name: 'MyMCP Server',
		version: '0.1.0',
	});
 
	async init() {
		this.server.tool(
			// ツールの名前
			'dice_roll',
			// ツールの説明
			'サイコロを降った結果を返します',
			// ツールの引数のスキーマ
			{ sides: z.number().min(1).max(100).default(6).describe('サイコロの面の数') },
			// ツールの実行関数
			async ({ sides }) => {
				// サイコロを振る
				const result = Math.floor(Math.random() * sides) + 1;
				// サイコロの目を元に UI コンポーネントを作成する
				const resourceBlock = createUIResource({
          // URI スキーマ
					uri: `ui://dice_roll/${result}`,
          // HTML 文字列もしくはリモートの URL を指定
					content: {
            // rawHtml | externalUrl | remoteDom
						type: 'rawHtml',
						htmlString: `
            <div>
              <p style="color: ${result === 1 ? 'red' : 'black'}; font-size: 24px;">サイコロの目: ${result}</p>
            </div>`,
					},
          // text | blob
					encoding: 'text',
				});
 
				return {
					content: [resourceBlock],
				};
			}
		);
	}
}

export default {
	fetch(request: Request, env: Env, ctx: ExecutionContext) {
  // CORS ヘッダーを設定
		if (request.method === 'OPTIONS') {
			return new Response(null, {
				headers: {
					'Access-Control-Allow-Origin': '*',
					'Access-Control-Allow-Methods': 'GET,HEAD,OPTIONS',
					'Access-Control-Allow-Headers': '*',
				},
			});
		}
		const url = new URL(request.url);
 
		// /sse エンドポイントの場合は SSE で応答する
		if (url.pathname === '/sse' || url.pathname === '/sse/message') {
			// @ts-ignore
			return MyMCP.serveSSE('/sse').fetch(request, env, ctx);
		}
 
		// /mcp エンドポイントの場合は Streamable HTTP で応答する
		if (url.pathname === '/mcp') {
			// @ts-ignore
			return MyMCP.serve('/mcp').fetch(request, env, ctx);
		}
 
		return new Response('Not found', { status: 404 });
	},
};

{
  "migrations": [
		{
			"new_sqlite_classes": [
				"MyMCP"
			],
			"tag": "v1"
		}
	],
	"durable_objects": {
		"bindings": [
			{
				"class_name": "MyMCP",
				"name": "MCP_OBJECT"
			}
		]
	},
}

npm run dev

npx @modelcontextprotocol/inspector

{
  "uri": "ui://dice_roll/6",
  "mimeType": "text/html",
  "text": "<p style=\"color: black; font-size: 24px;\">サイコロの目: 6</p>"
}

npm create vite@latest my-mcp-ui-client -- --template react-ts

npm install @mcp-ui/client @modelcontextprotocol/sdk

import React, { useState } from "react";
import { UIResourceRenderer } from "@mcp-ui/client";
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
import type {
  ContentBlock,
  Resource,
} from "@modelcontextprotocol/sdk/types.js";
 
// MCP Client を使用してツールを呼び出す関数
const fetchMcpResource = async (toolName: string): Promise<ContentBlock> => {
  const client = new Client({
    name: "streamable-http-client",
    version: "1.0.0",
  });
 
  // Streamable HTTP を使用して接続
  const transport = new StreamableHTTPClientTransport(
    new URL("http://localhost:8787/mcp")
  );
  await client.connect(transport);
  let result;
  // ツール名に応じて呼び出す
  // server で実装した dice_roll ツールを呼び出す
  if (toolName === "dice_roll") {
    result = await client.callTool({
      name: toolName,
      arguments: {
        sides: 6,
      },
    });
  } else {
    throw new Error(`Unknown tool: ${toolName}`);
  }
 
  return (result?.content as ContentBlock[])[0];
};
 
const App: React.FC = () => {
  const [uiResource, setUIResource] = useState<Resource | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
 
  const loadResource = async (toolName: string) => {
    setLoading(true);
    setError(null);
    setUIResource(null);
    try {
      const block = await fetchMcpResource(toolName);
      setUIResource(block.resource as Resource);
    } catch (e: any) {
      setError(e.message);
    }
    setLoading(false);
  };
 
  return (
    <div>
      <h1>MCP-UI Client Demo</h1>
      <button onClick={() => loadResource("dice_roll")}>Dice Roll</button>
 
      {loading && <p>Loading resource...</p>}
      {error && <p style={{ color: "red" }}>Error: {error}</p>}
 
      {uiResource && (
        <div style={{ marginTop: 20, border: "2px solid blue", padding: 10 }}>
          <h2>Rendering Resource: {uiResource.uri}</h2>
          <UIResourceRenderer
            resource={uiResource}
            onUIAction={async (result) => {
              alert("UI Action Result:", result);
            }}
          />
        </div>
      )}
    </div>
  );
};
 
export default App;

<UIResourceRenderer resource={uiResource} />

<UIResourceRenderer
  resource={uiResource}
  supportedContentTypes={["rawHtml"]}
/>

npm run dev

export class MyMCP extends McpAgent {
  init() {
    // 既存のツール定義...
 
    this.server.tool(
      'action_button',
      'インタラクティブなボタンを返します',
      {},
      async () => {
        const resourceBlock = createUIResource({
          uri: 'ui://action_button',
          content: {
            type: 'remoteDom',
            script: `
              // ui-button は MCP UI のクライアントが提供するカスタム要素
              const button = document.createElement('ui-button');
              button.textContent = 'Click Me!';
              button.addEventListener('press', () => {
                // ボタンがクリックされたときのアクション
                window.parent.postMessage({ 
                  type: 'tool', 
                  payload: { 
                    toolName: 'action_from_button',
                    params: {
                      data: 'Button clicked!',
                      timestamp: ${Date.now()}
                    },
                  }
                }, '*');
              });
 
              root.appendChild(button);
            `,
            framework: 'react',
          },
          encoding: 'text',
        });
 
        return {
          content: [resourceBlock],
        };
      }
    );
  }
}

import {
  basicComponentLibrary,
  remoteButtonDefinition,
  remoteTextDefinition,
  UIResourceRenderer,
  type UIActionResult,
} from "@mcp-ui/client";
 
const fetchMcpResource = async (toolName: string): Promise<ContentBlock> => {
  // 省略...
 if (toolName === "dice_roll") {
    result = await client.callTool({
      name: toolName,
      arguments: {
        sides: 6,
      },
    });
  } else if (toolName === "action_button") {
    result = await client.callTool({
      name: toolName,
      arguments: {
        label: "Click Me!",
        action: {
          type: "tool",
          toolName: "dice_roll",
          params: {},
        },
      },
    });
  } else {
    throw new Error(`Unknown tool: ${toolName}`);
  }
 
  return (result?.content as ContentBlock[])[0];
};
 
const App: React.FC = () => {
  // 省略...
  const handleGenericMcpAction = async (result: UIActionResult) => {
    if (result.type === "tool") {
      alert(
        `Action received in host app - Tool: ${result.payload.toolName}, Params: ${result.payload.params.data}, Timestamp: ${result.payload.params.timestamp}`
      );
    } else if (result.type === "prompt") {
      alert(`Prompt received in host app: ${result.payload.prompt}`);
    } else if (result.type === "link") {
      alert(`Link received in host app: ${result.payload.url}`);
    } else if (result.type === "intent") {
      alert(`Intent received in host app: ${result.payload.intent}`);
    } else if (result.type === "notify") {
      alert(`Notification received in host app: ${result.payload.message}`);
    }
    return {
      status: "Action handled by host application",
    };
  };
 
  return (
    <div>
      {/* 省略 */}
      <button onClick={() => loadResource("action_button")}>Action Button</button>
 
      <UIResourceRenderer
        resource={uiResource}
        onUIAction={handleGenericMcpAction}
        remoteDomProps={{
          library: basicComponentLibrary,
          remoteElements: [remoteButtonDefinition, remoteTextDefinition],
        }}
      />
    </div>
  );
};

this.server.tool('async_message_test', '非同期メッセージのテスト', {}, async () => {
  const resourceBlock = createUIResource({
    uri: 'ui://async_message_test',
    content: {
      type: 'rawHtml',
      htmlString: `
      <p id="status">メッセージを送信してください</p>
      <button id="send-message">Send Message</button>
      <script>
        // 待機中のメッセージを格納する Map
        const pendingMessages = new Map();
 
        const statusElement = document.getElementById('status');
        const sendButton = document.getElementById('send-message');
 
        sendButton.addEventListener('click', () => {
          const messageId = Math.random().toString(36).substring(2, 15);
 
          pendingMessages.set(messageId, 'sending');
          statusElement.textContent = 'Sending message...';
 
          window.parent.postMessage(
            {
              type: 'tool',
              messageId,
              payload: {
                toolName: 'processData',
                params: {
                  data: 'Hello from MCP UI!',
                  timestamp: ${Date.now()},
                },
              },
            },
            '*'
          );
        });
 
        window.addEventListener('message', (event) => {
          const message = event.data;
          if (!message.messageId || !pendingMessages.has(message.messageId)) {
            return;
          }
 
          switch (message.type) {
            case 'ui-message-received':
              statusElement.textContent = 'Message received';
              pendingMessages.set(message.messageId, 'pending');
              break;
            case 'ui-message-response':
              if (message.payload.error) {
                statusElement.textContent = 'Error: ' + message.payload.error;
                pendingMessages.delete(message.messageId);
                return;
              }
              statusElement.textContent = 'Message response: ' + message.payload.response.processedData;
              pendingMessages.delete(message.messageId);
              break;
          }
        });
      </script>
      `,
    },
    encoding: 'text',
  });
  return {
    content: [resourceBlock],
  };
});

const messageId = Math.random().toString(36).substring(2, 15);
 
pendingMessages.set(messageId, 'sending');
 
window.parent.postMessage(
  {
    type: 'tool',
    messageId,
    payload: {
      toolName: 'processData',
      params: {
        data: 'Hello from MCP UI!',
        timestamp: Date.now(),
      },
    },
  },
  '*'
);

  const handleGenericMcpAction = async (result: UIActionResult) => {
    if (result.type === "tool") {
      if (result.payload.toolName === "processData") {
        // 人工的な遅延を追加
        await new Promise((resolve) => setTimeout(resolve, 1000));
        return {
          status: "success",
          processedData: `Processed: ${result.payload.params.data}`,
          timestamp: new Date().toISOString(),
        };
      }
 
      alert(
        `Action received in host app - Tool: ${result.payload.toolName}, Params: ${result.payload.params.data}, Timestamp: ${result.payload.params.timestamp}`
      );
      
    }
    // 他のアクションタイプの処理...
    return {
      status: "Action handled by host application",
    };
  };

this.server.tool(
  'show_article',
  '指定された記事を表示します',
  { slug: z.string().describe('記事のスラッグ') },
  async ({ slug }) => {
    const resourceBlock = createUIResource({
      uri: `ui://article/${slug}`,
      content: {
        type: 'externalUrl',
        iframeUrl: `https://azukiazusa.dev/blog/${slug}`,
      },
      encoding: 'text',
    });
 
    return {
      content: [resourceBlock],
    };
  }
);

const fetchMcpResource = async (toolName: string): Promise<ContentBlock> => {
  // 省略...
  if (toolName === "show_article") {
    result = await client.callTool({
      name: toolName,
      arguments: {
        slug: "serena-coding-agent",
      },
    });
  } else {
    throw new Error(`Unknown tool: ${toolName}`);
  }
 
  return (result?.content as ContentBlock[])[0];
};
 
const App: React.FC = () => {
  // 省略...
  return (
    <div>
      {/* 省略 */}
      <button onClick={() => loadResource("show_article")}>Show Article</button>
 
      {uiResource && (
        <div style={{ marginTop: 20, border: "2px solid blue", padding: 10 }}>
          <h2>Rendering Resource: {uiResource.uri}</h2>
          <UIResourceRenderer
            resource={uiResource}
            onUIAction={handleGenericMcpAction}
            remoteDomProps={{
              library: basicComponentLibrary,
              remoteElements: [remoteButtonDefinition, remoteTextDefinition],
            }}
          />
        </div>
      )}
    </div>
  );
};