mcpField
M
MCP Web Worker Demo

MCP Web Worker Demo

ローカル
github.com/weolopezクラウド・インフラ283 週間前に更新
リポジトリ

MCP Web Worker Demo について

Shared Web Workerを使うブラウザー向けMCPクライアントのデモで、モックサーバーと操作画面を備えています。外部依存なしでWorkerベースの通信やクライアント機能を調べる開発者向けです。

主な機能

  1. 01Shared Web Worker内のMCPクライアント
  2. 02メインスレッド向けクライアントラッパー
  3. 03ツール、リソース、プロンプトを備えたモックサーバー
  4. 04機能を試せる操作画面
  5. 05接続診断とログ
  6. 06外部依存なしでブラウザー実行

活用シーン

  1. 01ブラウザーでのMCPクライアント動作の確認
  2. 02ツール呼び出し、リソース読み取り、プロンプト取得のテスト
  3. 03Workerの接続状態とログの確認

MCP 対応

Worker内のMCPクライアントが、同じコンテキスト内のモックサーバーに接続します。画面ではツール呼び出し、リソース読み取り、プロンプト取得を試せます。

#mcp#web-worker#demo

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "worker": {
      "command": "npx",
      "args": [
        "-y",
        "http-server"
      ]
    }
  }
}
起動コマンドnpx -y http-server

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmhttp-server

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

MCP Web Worker Demo

このデモでは、Shared Web Worker アーキテクチャを使用した Model Context Protocol（MCP）クライアントの実装を紹介します。ビルド不要の純粋な JavaScript を使った疎結合アーキテクチャにより、ブラウザー環境で MCP を利用する方法を説明します。

実装コンポーネント

1. ワーカーの実装（worker.js）
  • ワーカーコンテキストで動作する MCP クライアントの実装が含まれています
  • MCP におけるワーカー側のメッセージ処理パターンを紹介します
  • 外部依存関係のない、簡易版の MCP クライアントを実装しています
2. クライアントラッパー（mcp-client.js）
  • メインスレッドからワーカーと通信するためのシンプルな API を提供します
  • 接続、初期化、メソッド呼び出しを処理します
  • 通信プロトコルを実際の MCP 実装から切り離します
3. モックサーバー（server.js）
  • テスト用のデモサーバー実装です
  • ツール、リソース、プロンプトを提供します
  • MCP リクエストハンドラーを実装しています
4. デモ UI（index.html）
  • すべての MCP 機能をテストできるインタラクティブなインターフェースです
  • ツールの呼び出し、リソースの読み取り、プロンプトの取得など、クライアントの機能を紹介します
  • 接続状態とサーバー情報を表示します
5. テストツール
  • 最小限のワーカー（minimal-worker.js）- 互換性テスト用の簡易 Shared Worker
  • 診断機能 - 接続状態のインジケーターと詳細なログ記録

メッセージプロトコル

この実装では、メインスレッドとワーカーコンテキスト間の通信にカスタムメッセージプロトコルを使用します。

  1. 接続メッセージ

    • { type: 'connection', connectionId, status } - ワーカーからメインスレッドへ
    • { type: 'init', clientInfo } - メインスレッドからワーカーへ
    • { type: 'close', connectionId } - メインスレッドからワーカーへ

  2. MCP メッセージ

    • { type: 'mcp', messageType: 'transport', payload } - 生の MCP プロトコルメッセージ用
    • { type: 'mcp', messageType: 'method', method, params, requestId } - メソッド呼び出し
    • { type: 'mcp', messageType: 'result', method, result, requestId } - メソッドの結果
    • { type: 'mcp', messageType: 'error', error, requestId } - エラーレスポンス
    • { type: 'mcp', messageType: 'status', status } - 状態の更新

ワーカーベースのアーキテクチャの利点

  1. パフォーマンス

    • MCP の処理をバックグラウンドスレッドに移します
    • 複雑な操作中もメインの UI スレッドが応答可能な状態を保ちます

  2. 共有状態

    • 単一のワーカーインスタンスで複数のタブやウィンドウに対応します
    • ブラウザーコンテキスト間で接続と状態を共有します

  3. 疎結合設計

    • MCP の実装の詳細はワーカー内に分離されています
    • メインスレッドが把握する必要があるのはメッセージング API のみです
    • どちらのコンポーネントも簡単に更新または置き換えられます

  4. セキュリティ

    • MCP コードは別のコンテキストで実行されます
    • UI とプロトコル処理の間でリソースを分離します

デモの実行方法

  1. SDK がビルド済みであることを確認します：

    # From the typescript-sdk root directory
npm run build

  2. Web サーバーを起動します：

    # From the typescript-sdk/webworker-demo directory
./start.sh

    このスクリプトはポート 3000 でシンプルな HTTP サーバーを起動します。代わりに、次の方法も使えます：

    # From the typescript-sdk root directory
npx http-server -p 3000

  3. Web ブラウザー（Chrome または Edge を推奨）を開き、次の URL にアクセスします：

    http://localhost:3000/webworker-demo/

    重要： file:// プロトコルではなく、http://localhost:3000 経由でサイトにアクセスしてください。SharedWorker には、ファイルシステムから読み込む場合の制限があります。

  4. 「Connect to MCP」ボタンをクリックして接続を確立します

    • ツール、リソース、プロンプトが自動的に読み込まれます
    • 問題が発生した場合は、ブラウザーのコンソールで詳細なログを確認してください

  5. タブを使って、さまざまな MCP 機能を確認します：

    • ツール：利用可能なツールを一覧表示して呼び出します（自分の名前を指定して「hello」ツールを試してください）
    • リソース：リソースを一覧表示して読み込みます（readme ファイルを確認してください）
    • プロンプト：プロンプトを一覧表示して取得します（greeting プロンプトを試してください）

実装に関する注意事項

  • このデモでは、外部依存関係のない自己完結型の実装を使用します
  • すべてのコードは、ビルド手順なしでブラウザー上で直接実行されます
  • ES モジュールや async/await など、最新の JavaScript 機能を使用します
  • ワーカーはクライアントを実装し、同じコンテキストで実行されているモックサーバーに接続します

ブラウザーの互換性要件

このデモを実行するには、以下をサポートするブラウザーが必須です。

  • 共有ワーカー - 必須要件です（Chrome、Edge、Opera での動作が確認されています）
  • ES モジュール
  • async/await
  • その他の ES6 以降の機能

お使いのブラウザーが SharedWorker をサポートしていない場合は、エラーメッセージが表示されます。多くのデモとは異なり、この実装では他の技術へのフォールバックを提供していません。MCP クライアントで SharedWorker を使用する具体的な利点を紹介することを目的としているためです。

SharedWorker のサポートが確認されているブラウザー：
  • Chrome
  • Edge（Chromium ベース）
  • Opera
  • Android Chrome
サポートが限定的、またはサポートされていないブラウザー：
  • Firefox（デフォルトでは無効ですが、about:config で有効にできます）
  • Safari（サポートは限定的です）
  • iOS Safari（サポートされていません）

トラブルシューティング

デモの実行時に問題が発生した場合：

  1. ワーカースクリプトの取得に失敗する：

    • Web サーバー経由でデモにアクセスしていることを確認してください：http://localhost:3000/webworker-demo/
    • ファイルシステムからデモを読み込もうとしないでください（file://）
    • メインディレクトリから npm run build を実行して、SDK がビルドされていることを確認してください
    • ブラウザーのコンソールで具体的なエラーメッセージを確認してください
    • デモは複数のワーカースクリプトパスを自動的に試し、動作するものを探します

  2. SharedWorker がサポートされていない：

    • SharedWorker のサポートが充実している Chrome または Edge を使用してください
    • お使いのブラウザーが SharedWorker をサポートしていない場合、デモに明確なエラーが表示されます
    • このデモでは、サポートされていないブラウザー向けのフォールバックを意図的に実装していません

  3. モジュールのインポートエラー：

    • ワーカーとサーバーは、外部ライブラリを必要としない通常のインポートを使用します
    • ファイルシステムから直接ではなく、HTTP サーバー経由でアクセスしていることを確認してください
    • ブラウザーのコンソールで具体的なインポートパスエラーを確認してください

  4. コンソールエラー：

    • ブラウザーのコンソールで「SharedWorker」または「MCP」に関連するエラーを確認してください
    • デバッグのため、実装には詳細なログ出力が含まれています
    • ワーカー診断パネルに接続状態とスクリプトパスが表示されます

  5. ページが真っ白、またはツール／リソースが表示されない：

    • ブラウザーのコンソール（F12 または Cmd+Option+I）で詳細なエラーメッセージを確認してください
    • ブラウザーで JavaScript が有効になっていることを確認してください
    • ブラウザーのキャッシュを消去して、ページを再読み込みしてみてください

  6. パス解決の問題：

    • ワーカーは複数のパスからの読み込みを試みます：
      1. ./minimal-worker.js - 最小限のワーカーへの相対パス
      2. /webworker-demo/minimal-worker.js - 最小限のワーカーへの絶対パス
      3. ./worker.js - 完全版ワーカーへの相対パス
      4. /webworker-demo/worker.js - 完全版ワーカーへの絶対パス
    • ワーカー診断パネルに、読み込みに成功したパスが表示されます

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。