MCP Debug Client

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.