What is Mcp Debug

mcp_debug is a Vue.js-based debug client designed for testing Model Context Protocol (MCP) servers, providing a user-friendly interface for interacting with MCP tools and resources.

Use cases

Use cases for mcp_debug include testing MCP server functionalities, exploring available tools, simulating interactions with mock data, and integrating with Claude 4 for enhanced conversational capabilities.

How to use

To use mcp_debug, configure the MCP server settings and Anthropic API key, then connect to the server. You can explore available tools and test them directly through the interface.

Key features

Key features include a settings panel for configuration, tools discovery for viewing and testing MCP tools, a resources browser for loading MCP resources, a chat interface for interacting with Claude 4, and a development mode for testing with mock data.

Where to use

mcp_debug is primarily used in software development and testing environments where developers need to interact with MCP servers and tools for building applications.

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: Usually node
• 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.