MCP Server Testing Web App

MCP サーバーのテスト用 Web アプリ

この Web アプリケーションでは、ユーザーが MCP サーバーの設定を JSON 形式で入力し、接続性と機能を検証して、結果を表示できます。このアプリは Node.js バックエンド と React フロントエンド で動作し、Vercel にデプロイされています。

---

🚀 機能

• MCP サーバーの設定を JSON 入力として受け付けます。
• バックエンドで MCP サーバーを実行して、サーバーへの接続性をテストします。
• 使いやすいインターフェースで結果を表示します。
• バックエンドは Node.js (Express) を使用して実装されています。

---

🛠️ セットアップ手順

1️⃣ リポジトリをクローンする

git clone https://github.com/KartikeyM18/mcp-server-tester.git
cd mcp-server-tester

2️⃣ 依存関係をインストールする

cd backend
npm install

cd frontend
npm install

3️⃣ バックエンドサーバーを起動する

cd backend
node src/index.js

デフォルトでは、バックエンドは http://localhost:3000 で動作します。

4️⃣ **フロントエンドに .env を作成する **

フロントエンドのフォルダーに .env を作成し、次の内容を追加します。

VITE_API_URL=http://localhost:3000/check-mcp

5️⃣ **フロントエンドを起動する **

npm run dev  

---

🏗️ アプローチ

1. フロントエンド:

   • ユーザーから JSON 入力を受け付けます。
   • API リクエストを介して MCP サーバーの設定をバックエンドに送信します。
   • バックエンドで MCP サーバーを実行し、サーバーの状態を表示します。

2. バックエンド:

   • フロントエンドから JSON 入力を受け取ります。
   • spawn(command, args) を使用して MCP サーバーのテストコマンドを実行します。
   • WebSocket を介して MCP サーバーに接続し、利用可能なツールを取得します。
   • 結果をフロントエンドに返します。

---

📌 JSON 入力例

{
  "mcpServers": {
    "server-sequential-thinking": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli@latest",
        "run",
        "@smithery-ai/server-sequential-thinking",
        "--config",
        "{}"
      ]
    }
  }
}