mcpField
M
MCP Debug Client

MCP Debug Client

github.com/faraazahmadFrameworks & SDKs14Updated 73w ago
Repository

About MCP Debug Client

MCP Debug Client is a Vue.js browser client for testing MCP servers. Developers can inspect and run tools, browse resources, and chat with Claude 4 using server tools, with mock data available for development.

Key features

  1. 01Configure server and API settings
  2. 02Discover and test tools
  3. 03Browse and load resources
  4. 04Chat with Claude 4 using tools
  5. 05Mock-data development mode

Use cases

  1. 01Test tool inputs and responses
  2. 02Inspect server resources
  3. 03Develop the interface without a live server

MCP support

The client connects to an MCP server through a bridge that translates browser HTTP requests to MCP calls over stdio. It can launch the configured server as a child process.

Details

From the project README

MCP Debug Client

A Vue.js-based debug client for testing Model Context Protocol (MCP) servers.

image image

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.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.