drio
Open app

MCP Inspector VSCode Extension

Source

Extension visual testing tool for MCP servers of vscode

Catalog onlyCatalog onlySTDIO

Overview

MCP Inspector is a Visual Studio Code extension designed for visual testing and debugging of MCP (Model Control Protocol) servers, providing a user-friendly interface for developers.

To use the extension, install it from the VSCode Extension Marketplace, open it via the activity bar, start the MCP Inspector server, and use the WebView interface to build and send requests to the MCP server.

  • Visual Interface for displaying MCP server requests and responses - Real-time Monitoring of server activities - Request Testing interface for building and sending test requests - Response Analysis for easy debugging - Server Management functions to control MCP servers directly from VSCode - Automatic Port Allocation to avoid conflicts
  1. Debugging MCP server behavior during development
  2. Testing requests and analyzing responses for server validation
  3. Monitoring real-time server activities for performance assessment

Add to your AI client

Use these steps to connect MCP Inspector VSCode Extension in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "mcp-inspector-vscode-kshern": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-inspector-vscode-kshern"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "mcp-inspector-vscode-kshern": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-inspector-vscode-kshern"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "mcp-inspector-vscode-kshern": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-inspector-vscode-kshern"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mcp-inspector-vscode-kshern": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-inspector-vscode-kshern"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-inspector-vscode-kshern": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-inspector-vscode-kshern"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "mcp-inspector-vscode-kshern": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-inspector-vscode-kshern"
      ]
    }
  }
}

FAQ

Is MCP Inspector compatible with all versions of VSCode?

It requires Visual Studio Code 1.97.0 or higher.

How do I install the extension?

You can install it from the VSCode Extension Marketplace or download the `.vsix` file for manual installation.

Can I contribute to the project?

Yes! Contributions are welcome, and you can follow the guidelines in the repository.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":2645,"uuid":"3ccb4bdf-0a79-478a-9ca6-b2fba3c12cd4","name":"mcp-inspector-vscode","title":"MCP Inspector VSCode Extension","description":"Extension visual testing tool for MCP servers of vscode","avatar_url":"https://avatars.githubusercontent.com/u/13652283?v=4","created_at":"2025-03-13T09:21:33.460Z","updated_at":"2025-03-13T09:40:07.905Z","status":"created","author_name":"kshern","author_avatar_url":"https://avatars.githubusercontent.com/u/13652283?v=4","tags":"[]","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/kshern/mcp-inspector-vscode","target":"_self","content":"$29","summary":"$2a","img_url":"https://github.com/kshern/mcp-inspector-vscode/raw/master/resources/mcp.png","type":null,"metadata":"{\"star\":\"1\",\"license\":\"MIT license\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-03-20 15:29:04\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools
MCP Inspector VSCode Extension — MCP Registry