MCP Debug Client

MCP Debug Client

Model Context Protocol (MCP) サーバーをテストするための Vue.js ベースのデバッグクライアント。

機能

• 設定パネル: MCP サーバー接続と Anthropic API キーを設定
• ツール検出: 利用可能なすべての MCP ツールを表示およびテスト
• リソースブラウザー: MCP リソースを参照および読み込む
• チャットインターフェース: MCP ツールを使用して Claude 4 とチャット
• 開発モード: サーバーが利用できない場合、モックデータでテスト

セットアップ

クイックスタート（推奨）

./start.sh

以下の処理が実行されます：

• すべての依存関係をインストール
• MCP ブリッジサーバーを起動（ポート 3002）
• Vue.js クライアントを起動（ポート 3001）

ブラウザーで http://localhost:3001 を開く

設定

MCP サーバー設定

• サーバーコマンド: 通常は node
• サーバー引数: MCP サーバーへのパス（例: ../../build/mcp.js）
• Anthropic API キー: Claude API キー（sk-ant-...）
• 環境変数: MCP サーバーに必要な環境変数を追加

開発モード

「モックデータを使用」をオンにすると、実際の MCP サーバーに接続せずにインターフェースをテストできます。これはコードグラフ RAG サーバーのスキーマと一致する事前定義されたモック応答を使用します。

使用方法

1. 設定を構成: MCP サーバーの詳細、Anthropic API キー、および必要な環境変数を入力
2. 接続: 「MCP サーバーに接続」をクリック
3. ツールを探索: 利用可能なツールを表示し、サンプル入力でテスト
4. リソースを参照: 利用可能なリソースを読み込んで検査
5. Claude とチャット: チャットインターフェースを使用して、MCP ツールを使って Claude と対話

MCP サーバー統合

このクライアントはすべての MCP サーバーで動作するように設計されています。実行するコマンドと環境変数を指定するだけです。

アーキテクチャ

システムは 3 つのコンポーネントで構成されています：

1. Vue.js クライアント（ポート 3001）- ブラウザベースの UI
2. ブリッジサーバー（ポート 3002）- HTTP から MCP プロトコルへの翻訳
3. MCP サーバー（実際のサーバー）- コードグラフ RAG サーバー

Browser → HTTP → Bridge Server → stdio → MCP Server

ブリッジサーバーが必要な理由：

• MCP は stdio トランスポートを使用し、ブラウザーでは機能しない
• ブリッジサーバーが MCP サーバーを子プロセスとして生成
• HTTP リクエストを MCP プロトコルコールに翻訳

トラブルシューティング

• ブリッジサーバーの問題: ポート 3002 が利用可能であることを確認
• 接続の問題: 先に開発モードを試して、UI が機能することを確認
• CORS エラー: Anthropic SDK は dangerouslyAllowBrowser: true でブラウザー使用するよう設定されています
• サーバーパス: サーバー引数がビルド済みの MCP サーバーファイルを指していることを確認
• 「global is not defined」: Vite 設定で global: 'globalThis' を定義することで修正済み

本番環境向けビルド

npm run build

ビルドされたファイルは dist/ ディレクトリに格納されます。