mcpField
O
Online MCP Inspector: Web-Based Tool for Testing & Debugging

Online MCP Inspector: Web-Based Tool for Testing & Debugging

github.com/web-mcpチャットアプリ1020 週間前に更新

Online MCP Inspector: Web-Based Tool for Testing & Debugging について

MCP Inspectorは、MCPサーバーのテストとデバッグに使うブラウザベースの開発者向けクライアントです。Web UIとプロキシでstdio、SSE、streamable HTTPの各サーバーに接続し、再利用可能な設定を出力できます。

主な機能

  1. 01サーバーテスト用の対話型ブラウザーUI
  2. 02stdio、SSE、streamable HTTPで接続
  3. 03SSEのBearer token認証
  4. 04サーバー項目または設定ファイル全体を出力
  5. 05リクエストタイムアウトの設定

活用シーン

  1. 01ローカルMCPサーバーのツールを確認
  2. 02異なるトランスポートを使うサーバーをデバッグ
  3. 03MCPクライアントで再利用するサーバー設定を保存

MCP 対応

プロキシを介してMCPクライアントとして動作し、ブラウザーUIをstdio、SSE、streamable HTTP対応のMCPサーバーに接続します。SSE接続ではBearer token認証を利用できます。

詳細

MCP Inspector

MCP Inspector は、MCP サーバーのテストとデバッグに使用する開発者向けツールです。

MCP Inspector のスクリーンショット

アーキテクチャの概要

MCP Inspector は、連携して動作する次の 2 つの主要コンポーネントで構成されています。

  • MCP Inspector クライアント(MCPI):MCP サーバーのテストとデバッグに使用する、インタラクティブなインターフェースを提供する React ベースの Web UI です
  • MCP Proxy(MCPP):プロトコルブリッジとして機能する Node.js サーバーです。さまざまなトランスポート方式(stdio、SSE、streamable-http)を介して、Web UI と MCP サーバーを接続します

このプロキシは、トラフィックを傍受するネットワークプロキシではありません。MCP クライアント(MCP サーバーに接続)と HTTP サーバー(Web UI を提供)の両方として機能し、異なるトランスポートプロトコルを使用する MCP サーバーとのブラウザベースのやり取りを可能にします。

Inspector の実行

必要条件
  • Node.js:^22.7.5
クイックスタート(UI モード)

すぐに UI を起動するには、次のコマンドを実行してください。

npx @modelcontextprotocol/inspector

サーバーが起動し、http://localhost:6274 で UI にアクセスできるようになります。

Docker コンテナ

次のコマンドを使用して、Docker コンテナ内で起動することもできます。

docker run --rm \
  -p 127.0.0.1:6274:6274 \
  -p 127.0.0.1:6277:6277 \
  -e HOST=0.0.0.0 \
  -e MCP_AUTO_OPEN_ENABLED=false \
  ghcr.io/modelcontextprotocol/inspector:latest
MCP サーバーのリポジトリから

MCP サーバーの実装を調査する場合、このリポジトリをクローンする必要はありません。代わりに npx を使用してください。たとえば、サーバーが build/index.js にビルドされている場合は、次のようにします。

npx @modelcontextprotocol/inspector node build/index.js

MCP サーバーに引数と環境変数の両方を渡すことができます。引数はサーバーに直接渡され、環境変数は -e フラグを使用して設定できます。

# Pass arguments only
npx @modelcontextprotocol/inspector node build/index.js arg1 arg2

# Pass environment variables only
npx @modelcontextprotocol/inspector -e key=value -e key2=$VALUE2 node build/index.js

# Pass both environment variables and arguments
npx @modelcontextprotocol/inspector -e key=value -e key2=$VALUE2 node build/index.js arg1 arg2

# Use -- to separate inspector flags from server arguments
npx @modelcontextprotocol/inspector -e key=$VALUE -- node build/index.js -e server-flag

Inspector は、MCP Inspector(MCPI)クライアント UI(デフォルトポート 6274)と MCP Proxy(MCPP)サーバー(デフォルトポート 6277)の両方を実行します。Inspector を使用するには、ブラウザーで MCPI クライアント UI を開いてください。(これらのポート番号は、覚えやすいように、それぞれ MCPI と MCPP の T9 キーパッド上の文字対応から導き出されています。)必要に応じてポートをカスタマイズできます。

CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build/index.js

Inspector の使用方法の詳細については、MCP ドキュメントサイトの Inspector セクションを参照してください。デバッグについては、デバッグガイドを参照してください。

サーバーファイルのエクスポート

MCP Inspector には、Cursor、Claude Code、Inspector の CLI などのクライアントで使用するサーバー起動設定をエクスポートする便利なボタンがあります。ファイル名は通常 mcp.json です。

  • サーバーエントリ - 単一のサーバー設定エントリをクリップボードにコピーします。任意のサーバー名を付けて、mcpServers オブジェクト内の mcp.json ファイルに追加できます。

    STDIO トランスポートの例:

    {
      "command": "node",
      "args": ["build/index.js", "--debug"],
      "env": {
        "API_KEY": "your-api-key",
        "DEBUG": "true"
      }
    }
    

    SSE トランスポートの例:

    {
      "type": "sse",
      "url": "http://localhost:3000/events",
      "note": "For SSE connections, add this URL directly in Client"
    }
    

    Streamable HTTP トランスポートの例:

    {
      "type": "streamable-http",
      "url": "http://localhost:3000/mcp",
      "note": "For Streamable HTTP connections, add this URL directly in your MCP Client"
    }
    
  • サーバーファイル - 完全な MCP 設定ファイルの構造をクリップボードにコピーします。現在のサーバー設定は default-server として追加されます。そのまま mcp.json として保存できます。

    STDIO トランスポートの例:

    {
      "mcpServers": {
        "default-server": {
          "command": "node",
          "args": ["build/index.js", "--debug"],
          "env": {
            "API_KEY": "your-api-key",
            "DEBUG": "true"
          }
        }
      }
    }
    

    SSE トランスポートの例:

    {
      "mcpServers": {
        "default-server": {
          "type": "sse",
          "url": "http://localhost:3000/events",
          "note": "For SSE connections, add this URL directly in Client"
        }
      }
    }
    

    Streamable HTTP トランスポートの例:

    {
      "mcpServers": {
        "default-server": {
          "type": "streamable-http",
          "url": "http://localhost:3000/mcp",
          "note": "For Streamable HTTP connections, add this URL directly in your MCP Client"
        }
      }
    }
    

これらのボタンは、サーバー設定を構成すると Inspector UI に表示され、設定を簡単に保存して再利用できます。

SSE および Streamable HTTP トランスポートの接続では、Inspector の両方のボタンで同様の機能を利用できます。「サーバーエントリ」ボタンは、既存の設定ファイルに追加できる設定をコピーします。一方、「サーバーファイル」ボタンは、クライアントで直接使用できる URL を含む完全な設定ファイルを作成します。

「サーバーエントリ」を既存の mcp.json ファイルの任意のサーバー名の下に貼り付けるか、「サーバーファイル」の完全なペイロードを使用して新しい設定ファイルを作成できます。

認証

インスペクターは、SSE 接続でのベアラートークン認証に対応しています。MCP サーバーへの接続時に UI でトークンを入力すると、Authorization ヘッダーで送信されます。サイドバーの入力欄を使用すると、ヘッダー名を上書きできます。

セキュリティに関する考慮事項

MCP Inspector には、ローカルの MCP プロセスを起動して通信できるプロキシサーバーが含まれています。プロキシサーバーにはローカルプロセスを起動する権限があり、指定された任意の MCP サーバーに接続できるため、信頼できないネットワークに公開しないでください。

認証

MCP Inspector のプロキシサーバーでは、デフォルトで認証が必要です。サーバーの起動時にランダムなセッショントークンが生成され、コンソールに表示されます。

🔑 Session token: 3a1c267fad21f7150b7d624c160b7f09b0b8c4f623c7107bbf13378f051538d4

🔗 Open inspector with token pre-filled:
   http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=3a1c267fad21f7150b7d624c160b7f09b0b8c4f623c7107bbf13378f051538d4

このトークンは、サーバーへのすべてのリクエストの Authorization ヘッダーにベアラートークンとして含める必要があります。インスペクターは、トークンがあらかじめ URL に入力された状態でブラウザーを自動的に開きます。

ブラウザーの自動起動 — 認証が有効な場合、インスペクターはトークンがあらかじめ URL に入力された状態でブラウザーを自動的に開くようになりました。

代替手段:手動設定 — インスペクターをすでに開いている場合:

  1. サイドバーの「Configuration」ボタンをクリックします
  2. 「Proxy Session Token」を見つけ、プロキシコンソールに表示されたトークンを入力します
  3. 「Save」をクリックして設定を適用します

トークンは、今後も使用できるようブラウザーのローカルストレージに保存されます。

認証を無効にする必要がある場合(推奨しません)は、DANGEROUSLY_OMIT_AUTH 環境変数を設定できます。

DANGEROUSLY_OMIT_AUTH=true npm start

🚨 警告 🚨

DANGEROUSLY_OMIT_AUTH で認証を無効にすることは、非常に危険です!認証を無効にすると、パブリックインターネットに公開したときだけでなく、ウェブブラウザー経由でもマシンが攻撃にさらされます。つまり、悪意のあるウェブサイトにアクセスしたり、悪意のある広告を表示したりするだけで、攻撃者がコンピューターをリモートから侵害できる可能性があります。リスクを十分に理解していない限り、この機能を無効にしないでください。

この脆弱性のリスクについて詳しくは、Oligo のブログをご覧ください:Anthropic MCP Inspector における重大な RCE 脆弱性 - CVE-2025-49596


サーバーの起動時に MCP_PROXY_AUTH_TOKEN 環境変数を使ってトークンを設定することもできます。

MCP_PROXY_AUTH_TOKEN=$(openssl rand -hex 32) npm start
ローカル限定のバインド

デフォルトでは、MCP Inspector のプロキシサーバーとクライアントは、ネットワークからアクセスできないよう localhost のみにバインドします。これにより、ネットワーク上の他のデバイスからアクセスできなくなります。開発目的で全インターフェースにバインドする必要がある場合は、HOST 環境変数で設定を上書きできます。

HOST=0.0.0.0 npm start

警告: 全インターフェースへのバインドは、信頼できるネットワーク環境でのみ行ってください。プロキシサーバーがローカルプロセスを実行する機能と、両方のサービスがネットワークからアクセス可能になるためです。

DNS リバインディング対策

DNS リバインディング攻撃を防ぐため、MCP Inspector は受信リクエストの Origin ヘッダーを検証します。デフォルトでは、クライアントのオリジンからのリクエストのみが許可されます(CLIENT_PORT が設定されている場合はその値を使用し、デフォルトはポート 6274 です)。ALLOWED_ORIGINS 環境変数を設定すると、許可するオリジンを追加できます(カンマ区切りのリスト)。

ALLOWED_ORIGINS=http://localhost:6274,http://localhost:8000 npm start
設定

MCP Inspector は、以下の設定に対応しています。変更するには、MCP Inspector の UI で Configuration ボタンをクリックしてください。

設定説明デフォルト
MCP_SERVER_REQUEST_TIMEOUTクライアント側のタイムアウト(ms)。この時間内に応答がない場合、Inspector はリクエストをキャンセルします。注:サーバーにも独自のタイムアウトが設定されている場合があります300000
MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS進行状況の通知を受け取ったときにタイムアウトをリセットしますtrue
MCP_REQUEST_MAX_TOTAL_TIMEOUTMCP サーバーに送信するリクエストの最大合計タイムアウト(ms)(進行状況の通知と併用)60000
MCP_PROXY_FULL_ADDRESSMCP Inspector Proxy をデフォルト以外のアドレスで実行する場合に設定します。例:http://10.1.1.22:5577""
MCP_AUTO_OPEN_ENABLEDInspector の起動時にブラウザーを自動的に開きます(認証が有効な場合に動作します)。環境変数としてのみ設定でき、ブラウザーからは設定できません。true

タイムアウトに関する注記: 上記のタイムアウト設定は、Inspector(MCP クライアント)がリクエストをキャンセルするタイミングを制御します。これらはサーバー側のタイムアウトとは独立しています。たとえば、サーバーのツールのタイムアウトが 10 分で、Inspector のタイムアウトが 30 秒に設定されている場合、Inspector は 30 秒後にリクエストをキャンセルします。反対に、Inspector のタイムアウトが 10 分で、サーバーが 30 秒後にタイムアウトした場合は、サーバーのタイムアウトエラーが返されます。ユーザー操作(エリシテーションなど)が必要なツールや、長時間実行される処理では、Inspector のタイムアウトを適切に設定してください。

これらの設定は UI からリアルタイムで変更でき、セッションをまたいで保持されます。

Inspector は、さまざまな MCP サーバーの設定を保存する設定ファイルにも対応しています。複数のサーバーや複雑な設定を扱う場合に便利です。

npx @modelcontextprotocol/inspector --config path/to/config.json --server everything

サーバー設定ファイルの例:

{
  "mcpServers": {
    "everything": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-everything"],
      "env": {
        "hello": "Hello MCP!"
      }
    },
    "my-server": {
      "command": "node",
      "args": ["build/index.js", "arg1", "arg2"],
      "env": {
        "key": "value",
        "key2": "value2"
      }
    }
  }
}
設定ファイルでのトランスポートの種類

Inspector は、設定ファイルからトランスポートの種類を自動的に検出します。異なるトランスポートの種類を指定できます。

STDIO(デフォルト):

{
  "mcpServers": {
    "my-stdio-server": {
      "type": "stdio",
      "command": "npx",
      "args": ["@modelcontextprotocol/server-everything"]
    }
  }
}

SSE(Server-Sent Events):

{
  "mcpServers": {
    "my-sse-server": {
      "type": "sse",
      "url": "http://localhost:3000/sse"
    }
  }
}

Streamable HTTP:

{
  "mcpServers": {
    "my-http-server": {
      "type": "streamable-http",
      "url": "http://localhost:3000/mcp"
    }
  }
}
デフォルトのサーバー選択

設定ファイルに以下のいずれかが含まれている場合、サーバー名を指定せずに Inspector を起動できます。

  1. サーバーが 1 つ — 自動的に選択されます。
# Automatically uses "my-server" if it's the only one
npx @modelcontextprotocol/inspector --config mcp.json
  1. 「default-server」という名前のサーバー — 自動的に選択されます。
{
  "mcpServers": {
    "default-server": {
      "command": "npx",
      "args": ["@modelcontextprotocol/server-everything"]
    },
    "other-server": {
      "command": "node",
      "args": ["other.js"]
    }
  }
}

ヒント: 上記の「サーバーファイルのエクスポート」セクションで説明されているように、Inspector UI の Server Entry ボタンと Servers File ボタンを使うと、この形式の設定を簡単に生成できます。

クエリパラメーターを使って、初期の transport の種類、serverUrl、serverCommand、serverArgs を設定することもできます。例:

http://localhost:6274/?transport=sse&serverUrl=http://localhost:8787/sse
http://localhost:6274/?transport=streamable-http&serverUrl=http://localhost:8787/mcp
http://localhost:6274/?transport=stdio&serverCommand=npx&serverArgs=arg1%20arg2

クエリパラメーターを使って、初期設定を指定することもできます。例:

http://localhost:6274/?MCP_SERVER_REQUEST_TIMEOUT=60000&MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS=false&MCP_PROXY_FULL_ADDRESS=http://10.1.1.22:5577

クエリパラメーターと対応する localStorage の項目の両方が設定されている場合は、クエリパラメーターが優先されます。

このリポジトリから

Inspector 自体を開発する場合:

開発モード:

npm run dev

# To co-develop with the typescript-sdk package (assuming it's cloned in ../typescript-sdk; set MCP_SDK otherwise):
npm run dev:sdk "cd sdk && npm run examples:simple-server:w"
# then open http://localhost:3000/mcp as SHTTP in the inspector.
# To go back to the deployed SDK version:
#   npm run unlink:sdk && npm i

Windows ユーザーへの注記: Windows では、代わりに次のコマンドを使用してください。

npm run dev:windows

本番モード:

npm run build
npm start
CLI モード

CLI モードでは、コマンドラインから MCP サーバーとプログラムでやり取りできます。スクリプト作成、自動化、コーディングアシスタントとの統合に最適です。これにより、MCP サーバーの開発における効率的なフィードバックループを実現できます。

npx @modelcontextprotocol/inspector --cli node build/index.js

CLI モードでは、ツール、リソース、プロンプトに関するほとんどの操作がサポートされています。例をいくつか紹介します。

# Basic usage
npx @modelcontextprotocol/inspector --cli node build/index.js

# With config file
npx @modelcontextprotocol/inspector --cli --config path/to/config.json --server myserver

# List available tools
npx @modelcontextprotocol/inspector --cli node build/index.js --method tools/list

# Call a specific tool
npx @modelcontextprotocol/inspector --cli node build/index.js --method tools/call --tool-name mytool --tool-arg key=value --tool-arg another=value2

# Call a tool with JSON arguments
npx @modelcontextprotocol/inspector --cli node build/index.js --method tools/call --tool-name mytool --tool-arg 'options={"format": "json", "max_tokens": 100}'

# List available resources
npx @modelcontextprotocol/inspector --cli node build/index.js --method resources/list

# List available prompts
npx @modelcontextprotocol/inspector --cli node build/index.js --method prompts/list

# Connect to a remote MCP server (default is SSE transport)
npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com

# Connect to a remote MCP server (with Streamable HTTP transport)
npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --transport http --method tools/list

# Connect to a remote MCP server (with custom headers)
npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --transport http --method tools/list --header "X-API-Key: your-api-key"

# Call a tool on a remote server
npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --method tools/call --tool-name remotetool --tool-arg param=value

# List resources from a remote server
npx @modelcontextprotocol/inspector --cli https://my-mcp-server.example.com --method resources/list
UI モードと CLI モード:使い分け
ユースケースUI モードCLI モード
サーバー開発開発中の対話的なテストやデバッグに使える視覚的なインターフェース迅速なテストや継続的インテグレーションに使えるスクリプト可能なコマンド。Cursor などの AI コーディングアシスタントとのフィードバックループを構築し、迅速な開発を実現します
リソースの探索階層ナビゲーションと JSON の視覚化に対応したインタラクティブなブラウザー自動化やスクリプト作成に使える、プログラムによる一覧表示と読み取り
ツールのテストリアルタイムの応答表示に対応したフォーム形式のパラメーター入力スクリプト作成向けの JSON 出力に対応したコマンドラインからのツール実行
プロンプトエンジニアリングストリーミング応答と視覚的な比較に対応したインタラクティブなサンプリング機械可読な出力を用いたプロンプトのバッチ処理
デバッグリクエスト履歴、エラーの視覚化、リアルタイム通知ログ分析や他のツールとの統合に使える直接的な JSON 出力
自動化該当なしCI/CD パイプライン、バッチ処理、コーディングアシスタントとの統合に最適
MCP の学習新しいユーザーがサーバーの機能を理解するのに役立つ、豊富な視覚的インターフェース特定のエンドポイントに焦点を当てて学習するための、簡潔なコマンド

ツール入力の検証ガイドライン

Inspector でツール入力パラメーターの処理を実装または変更する場合は、次のガイドラインに従ってください。

  • 値が空のオプションフィールドは省略する - フォーム入力の処理時には、スキーマに現在の値と一致する明示的なデフォルト値が設定されている場合を除き、オプションパラメーターの空文字列または null 値を省略します
  • 明示的なデフォルト値を保持する - フィールドのスキーマに明示的なデフォルト値(例:default: null)が含まれており、現在の値がそのデフォルト値と一致する場合は、リクエストに含めます。これはツールが想定する意味のある値です
  • 必須フィールドは常に含める - 値が空の場合でも必須フィールドの値を保持し、MCP サーバーが検証して適切なエラーメッセージを返せるようにします
  • 詳細な検証はサーバーに委ねる - Inspector クライアントでは基本的なフィールドの有無を確認しますが、スキーマに基づくパラメーターの検証は MCP サーバーに任せます

これらのガイドラインにより、パラメーターの受け渡しが適切に保たれ、Inspector クライアントと MCP サーバーの間で責任を適切に分離できます。

ライセンス

このプロジェクトは MIT License の下でライセンスされています。詳細については、LICENSE ファイルをご覧ください。

コメント

MCP は初めてですか?

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

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