MCP Visualizer

MCP Visualizer is a VS Code extension designed to visualize and manage your Model Context Protocol (MCP) server configuration. It provides a convenient explorer view to inspect your configured servers, their commands, arguments, and environment variables.

Features

• MCP Server Visualization: View a list of all configured MCP servers directly in the Activity Bar.
• Detailed Inspection: Expand any server to inspect its:
  • Command: The executable command used to start the server.
  • Args: A detailed list of arguments passed to the server.
  • Env: Environment variables configured for the server.
• Smart Validation: Automatically checks if your server's command exists. Invalid commands are marked with a ⚠️ warning icon.
• Environment Variables: Supports expansion of environment variables in arguments (e.g., ${HOME}/projects, ${env:APPDATA}).
• Live Updates: The view automatically refreshes instantly when you save changes to your configuration file.
• Quick Navigation: Easily open your mcp_config.json configuration file for editing with a single click.

Configuration

The extension looks for your MCP configuration file in the following order:

1. Custom Path: defined in the VS Code setting mcp.configPath.
2. Default Path: ~/.mcp/config.json.

Settings

• mcp.configPath: (Optional) Absolute path to your mcp_config.json file.

Requirements

This extension expects a valid JSON configuration file with the following structure:

{
  "mcpServers": {
    "server-name": {
      "command": "executable-command",
      "args": ["arg1", "arg2"],
      "env": {
        "ENV_VAR": "value"
      }
    }
  }
}

Usage

1. Install the extension.
2. Click on the "MCP" rocket icon in the Activity Bar.
3. The "Servers" view will populate with your configuration.
4. Click the "Open Config" (gear icon) to edit your configuration file.
5. After editing, click "Refresh" (refresh icon) to update the view.