MCP Worker

🚀 MCP Webワーカースレッドサンプルデモ

このデモは、共有Webワーカーアーキテクチャを使用して実装されたModel Context Protocol (MCP)クライアントを展示しています。ブラウザ環境でMCPを使用する方法をデモしており、解耦されたアーキテクチャを採用し、純粋なJavaScriptのみを使用し、ビルド要件は一切ありません。

🛠️ 実装コンポーネント

1. ワーカー実装（worker.js）

• ワーカーコンテキストでMCPクライアントを実装するコードが含まれています。
• ワーカー側のメッセージ処理パターンをデモします。
• 外部依存関係のない簡略化されたMCPクライアントを実装しています。

2. クライアントラッパー（mcp-client.js）

• メインスレッドとワーカーとの通信を簡素化したAPIを提供します。
• 接続、初期化、メソッド呼び出しを処理します。
• 通信プロトコルを実際のMCP実装から解耦します。

3. 模擬サーバー（server.js）

• テスト用のデモサーバーを実装しています。
• ツール、リソース、ヒントを提供します。
• MCPリクエストハンドラーを実装しています。

4. デモUI（index.html）

• すべてのMCP機能をテストするためのインタラクティブなインターフェースです。
• ロード状態、接続状態、ログ情報を表示します。
• ワーカー診断パネルが含まれており、ロードされたスクリプトのパスと状態を表示します。

5. 最小化ワーカー（minimal-worker.js）

• 基本的な接続のみを処理する最小化された実装バージョンです。
• ブラウザが共有ワーカーをサポートしているかどうかを検出するために使用されます。
• 失敗した場合、mcp-client.jsの使用にフォールバックします。

💬 メッセージプロトコル

クライアントとサーバーは、以下のJSON形式のメッセージを使用して通信します。

クライアントメッセージ

1. "/#/mcp/connect" { "targetUrl": string }
   • 指定されたMCPターゲットURLに接続します。
2. "/#/mcp/request" { "requestId": string, "payload": any }
   • 一意の識別子とペイロードを持つメッセージを送信します。

サーバーメッセージ

1. "/#/mcp/connected" { "connectionId": string }
   • 接続成功、接続IDを返します。
2. "/#/mcp/response" { "requestId": string, "payload": any, "error?": string }
   • 元のリクエストIDと結果を含むレスポンスを送信します。

🌟 アーキテクチャの利点

ブラウザサポート

• 完全サポート： Chrome, Edge (Chromiumベース), Opera, Android Chrome
• 部分サポート： Firefox（手動で有効にする必要があります）、Safari
• 非サポート： iOS Safari

核心特性

• 解耦設計： クライアントとワーカーは独立して動作し、相互に影響を与えません。
• 自動フォールバック： 共有ワーカーが利用できない場合は、他の実装方法にフォールバックできます。
• モジュール化： コードは機能別に分割されており、保守と拡張が容易です。

🚀 実行ガイド

前提条件

1. Node.jsをインストールします（推奨バージョン >= 14）。
2. プロジェクトのルートディレクトリでnpm installを実行します。
3. npm run buildを使用して本番用ファイルをビルドします。

起動手順

1. 開発サーバーを起動します：npm start
2. ブラウザを開き、http://localhost:8000/webworker-demo/にアクセスします。
3. 異なる機能モジュールをテストし、コンソールログとUIのフィードバックを観察します。

⚠️ 注意事項

リソースロードパス

ワーカースクリプトは、以下のパスからロードを試みます：

1. ./minimal-worker.js - 最小化ワーカーへの相対パス
2. /webworker-demo/minimal-worker.js - 最小化ワーカーへの絶対パス
3. ./worker.js - 完全なワーカーへの相対パス
4. /webworker-demo/worker.js - 完全なワーカーへの絶対パス

ワーカー診断パネル

以下の情報が表示されます：

• ロード状態：成功または失敗
• 接続状態：接続中、接続済み、切断
• スクリプトパス：ロードを試みたパスと結果
• ログ情報：エラーメッセージとデバッグログ

🛠️ トラブルシューティング

問題1：ワーカースクリプトを取得できない

• Webサーバーを通じてデモページにアクセスし、ファイルシステムから直接アクセスしないようにしてください。
• コンソールに具体的なエラー情報が表示されているか確認してください。
• ワーカー診断パネルには、試行したパスと結果が表示されます。

問題2：共有ワーカーがサポートされていない

• ChromeまたはEdgeブラウザを使用してテストしてください。
• ブラウザのコンソールには明確なエラー情報が表示されます。
• 現在、共有ワーカーをサポートしていないブラウザに対するフォールバック策は提供されていません。

問題3：モジュールのインポートに失敗した

• Webサーバーを通じてデモページにアクセスし、ファイルシステムから直接アクセスしないようにしてください。
• コンソールに具体的なインポートパスのエラーが表示されているか確認してください。
• ワーカー診断パネルには、試行したパスと結果が表示されます。

問題4：空白ページまたはツール/リソースが表示されない

• ブラウザのコンソール（F12またはCmd + Option + I）を開いて詳細なエラー情報を確認してください。
• JavaScriptがブラウザで有効になっていることを確認してください。
• キャッシュをクリアしてからページを更新してください。

問題5：パス解決の問題

• ワーカーは複数のパスからスクリプトのロードを試み、ワーカー診断パネルに結果が表示されます。
• すべてのパスが失敗した場合は、ネットワーク接続とファイルの存在を確認してください。