サイコロの目: ${result}
サイコロの目: 6
" } ``` ### MCP UI のクライアントを実装する 続いてクライアント側を実装します。MCP UI のクライアントは React コンポーネントと Web コンポーネントの両方が提供されています。メインのコンポーネントは `Loading resource...
} {error &&Error: {error}
} {uiResource && (メッセージを送信してください
`, }, encoding: 'text', }); return { content: [resourceBlock], }; }); ``` ボタンがクリックされた時に `postMessage` でメッセージを送信する際に、`messageId` を生成して送信します。クライアント側では `messageId` を使用してメッセージの状態を管理します。サーバー側では `messageId` を使用して応答を返すことができます。この `messageId` はメッセージの競合を避けるために一意である必要があります。生成した `messageId` は `pendingMessages` という Map に格納され、メッセージの状態を追跡します。 ```typescript 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(), }, }, }, '*' ); ``` クライアントからの応答メッセージを `window.addEventListener('message', (event) => { ... })` で受信します。始めに `event.data.messageId` を確認して、`pendingMessages` に存在するかどうかをチェックします。存在する場合はメッセージの状態を更新し、応答を処理します。メッセージの種類には以下のものがあります。 - `'ui-message-received'` - `ui-message-response` クライアント側の実装は大きく変更はありません。`onUIAction` ハンドラで返したオブジェクトの値が `message.payload.response` として送信されます。メッセージに `messageId` を含めたり、メッセージタイプの指定はクライアントのライブラリによって処理されます。 ```tsx:src/App.tsx 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", }; }; ``` ブラウザで実行してみると、ボタンをクリックした後に「Sending message...」と表示され、1 秒後に「Message response: Processed: Hello from MCP UI!」と表示されることが確認できます。  ## 外部の URL を使用する リソースタイプとして `externalUrl` を使用することで、iframe 内に外部の URL を表示することも可能です。記事の slug を引数に受け取り、該当の記事を表示するツールを実装してみましょう。 ```typescript:src/index.ts 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], }; } ); ``` クライアント側では、`show_article` ツールを呼び出して記事を表示するボタンを追加します。 ```tsx:src/App.tsx const fetchMcpResource = async (toolName: string): Promise