MCP Client Demo

MCP クライアントデモ

注記: このプロジェクトは現在開発中（WIP）です。機能と実装は大幅に変更される可能性があります。

Web Workers と Server-Sent Events (SSE) を使用した Model Context Protocol (MCP) クライアントのデモ実装です。

機能

• Web Worker ベースの MCP クライアント実装
• Server-Sent Events (SSE) トランスポート
• インタラクティブなテスト UI
• TypeScript による型安全な実装
• Vite + React で構築

クイックスタート

前提条件

• Node.js 18.x 以降
• localhost:3020 で実行中の MCP 互換サーバー

インストール

1. リポジトリをクローン
2. 依存関係をインストール：

npm install

開発

開発サーバーを起動：

npm run dev

Worker のテスト

1. ブラウザで test.html を開く
2. 「Connect」をクリックして MCP サーバーへの接続を確立
3. 「List Tools」を使用して利用可能なツールを確認
4. ツールを選択して JSON 形式で入力を提供
5. 「Execute Tool」をクリックして選択したツールを実行

プロジェクト構造

src/
├── worker.ts           # MCP client worker implementation
├── worker-test.ts      # Worker test interface
├── types.ts           # Type definitions
└── App.tsx           # Main React application

主要コンポーネント

• worker.ts: MCP クライアントの主な Web Worker 実装
• worker-test.ts: Worker のテストインターフェース
• types.ts: Worker コマンドとレスポンスの共有型定義

実装詳細

Worker コマンド

Worker は以下のコマンドを受け入れます：

• connect: MCP サーバーとの接続を確立
• disconnect: 接続を閉じる
• listTools: 利用可能なツールのリストを取得
• callTool: 特定のツールを実行

Worker レスポンス

Worker は以下の形式でレスポンスを送信します：

type WorkerResponse =
  | {
      type: "status";
      status: WorkerStatus;
    }
  | {
      type: "result";
      result: ListToolsResult | CallToolResult;
    }
  | {
      type: "error";
      error: string;
      details?: Record<string, unknown>;
    };

開発

ビルド

プロジェクトをビルド：

npm run build

リント

ESLint を実行：

npm run lint

貢献

1. リポジトリをフォーク
2. フィーチャーブランチを作成
3. 変更をコミット
4. ブランチにプッシュ
5. プルリクエストを作成