MCP Server Testing Web App

🚀 MCP サーバーテストネットワークアプリケーション

このネットワークアプリケーションは、ユーザーが JSON 形式で MCP サーバーの設定を入力し、その接続性と機能性を検証し、ユーザーフレンドリーなインターフェースに結果を表示することを可能にします。このアプリケーションは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 后端
npm install

cd 前端
npm install

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

cd 后端
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 サーバーに接続し、利用可能なツールを取得します。
   • 結果をフロントエンドに返します。

💻 使用例

基本的な使用法

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