MCP Debug Client
- other
Postman for your MCP server with a Claude chat that calls your tools
About
What is MCP Debug Client?
MCP Debug Client is a Vue.js-based browser tool for testing and debugging Model Context Protocol (MCP) servers. It runs on any modern web browser and is intended for developers working with MCP servers.
How to use MCP Debug Client?
Run ./start.sh to install dependencies and start both the bridge server (port 3002) and the Vue client (port 3001), then open http://localhost:3001. Configure MCP server details (command, arguments, Anthropic API key, environment variables), click “Connect to MCP Server”, and use the tools discovery, resources browser, and chat interface to test your server.
Key features of MCP Debug Client
- Settings panel for MCP server and API key configuration
- Tools discovery to view and test available MCP tools
- Resources browser to load and inspect MCP resources
- Chat interface to interact with Claude using MCP tools
- Development mode with mock data for offline testing
Use cases of MCP Debug Client
- Testing a new MCP server during development without writing a custom client
- Validating MCP tool inputs and outputs before integrating into a larger application
- Debugging environment variable or command-line arguments for an MCP server
- Demonstrating MCP server capabilities to stakeholders via the chat interface
FAQ from MCP Debug Client
What does MCP Debug Client do that a regular API client cannot?
It translates browser HTTP requests to the MCP protocol via a bridge server, enabling interaction with stdio-based MCP servers from a browser UI. It also includes a chat interface that connects Anthropic’s Claude to your MCP tools.
Which models and platforms are supported?
The client uses the Anthropic SDK (Claude 4) for chat, and requires an Anthropic API key (sk-ant-...). It works with any MCP server that can be spawned as a child process.
How does MCP Debug Client connect to an MCP server?
A bridge server (port 3002) spawns the MCP server as a child process and translates HTTP requests from the browser into stdio MCP calls. The browser communicates only with the bridge server.
How do I test the client without a real MCP server?
Toggle “Use mock data” in the settings to enable development mode, which uses predefined mock responses that match the schema of a Code Graph RAG server.
What should I do if I get a “global is not defined” error?
This is a known Vite configuration fix—the client defines global: 'globalThis' in its Vite config to resolve the issue. Ensure that fix is present if you build from source.
Details
- Author
- faraazahmad
- GitHub stars
- 8
- Category
- other
- Repository
- faraazahmad/mcp_debug
MCP Debug Client
A Vue.js-based debug client for testing Model Context Protocol (MCP) servers.
Features
- Settings Panel: Configure MCP server connection and Anthropic API key
- Tools Discovery: View and test all available MCP tools
- Resources Browser: Browse and load MCP resources
- Chat Interface: Chat with Claude 4 using your MCP tools
- Development Mode: Test with mock data when server isn't available
Setup
Quick Start (Recommended)
./start.sh
This will:
- Install all dependencies
- Start the MCP bridge server (port 3002)
- Start the Vue.js client (port 3001)
Open http://localhost:3001 in your browser
Configuration
MCP Server Settings
- Server Command: Usuallynode
- Server Arguments: Path to your MCP server, e.g., ../../build/mcp.js
- Anthropic API Key: Your Claude API key (sk-ant-...)
- Environment Variables: Add any environment variables your MCP server needs
Development Mode
Toggle "Use mock data" to test the interface without connecting to an actual MCP server. This uses predefined mock responses that match the schema of your Code Graph RAG server.Usage
1. Configure Settings: Enter your MCP server details, Anthropic API key, and any required environment variables
2. Connect: Click "Connect to MCP Server"
3. Explore Tools: View available tools and test them with sample inputs
4. Browse Resources: Load and inspect available resources
5. Chat with Claude: Use the chat interface to interact with Claude using your MCP tools
MCP Server Integration
This client is designed to work with any MCP server. You can just provide the command and env vars to run it.
Architecture
The system consists of three components:
1. Vue.js Client (port 3001) - The browser-based UI
2. Bridge Server (port 3002) - HTTP-to-MCP protocol translator
3. MCP Server (your actual server) - The Code Graph RAG server
Browser → HTTP → Bridge Server → stdio → MCP Server
The bridge server is necessary because:
- MCP uses stdio transport which doesn't work in browsers
- The bridge server spawns your MCP server as a child process
- It translates HTTP requests to MCP protocol calls
Troubleshooting
- Bridge Server Issues: Make sure port 3002 is available
- Connection Issues: Try development mode first to verify the UI works
- CORS Errors: The Anthropic SDK is configured for browser use with dangerouslyAllowBrowser: true
- Server Path: Make sure the server arguments point to your built MCP server file
- "global is not defined": Fixed by Vite config defining global: 'globalThis'
Build for Production
npm run build
The built files will be in the dist/ directory.
