MCP Chat with Claude

What is MCP Chat with Claude?

MCP Chat with Claude is a full-stack application that demonstrates the integration of the Model Context Protocol (MCP) with Anthropic’s Claude LLM. It provides an interactive chat interface where Claude can discover and use tools from multiple MCP servers. This project is aimed at developers exploring MCP‑enabled agent architectures.

How to use MCP Chat with Claude?

After cloning the repository, install dependencies in both server/ and client/ directories with npm install. Create .env files for the client (with ANTHROPIC_API_KEY, MCP_SERVER_TODOPLAN_URL, MCP_SERVER_PROJECT_URL, PORT) and the server (with MCP_SERVER_TODOPLAN_PORT, MCP_SERVER_PROJECT_PORT). Start the TodoPlan and Project MCP servers using npm run start:todoplan and npm run start:project from the server/ folder. Then start the host app from client/ with npm start and navigate to http://localhost:3000.

Key features of MCP Chat with Claude

• Interactive chat interface with Claude AI
• Two‑panel UI showing conversation and tool execution details
• Dynamic tool discovery from multiple MCP servers
• Support for specialized tools from each server
• Proper handling of Claude’s tool use via MCP
• Standalone MCP client example for programmatic access

Use cases of MCP Chat with Claude

• Query project details using the Project MCP server (e.g., “Tell me about project Earth”)
• Retrieve todo items for specific categories through the TodoPlan MCP server
• Combine insights from multiple servers, such as finding a todo and related projects
• Test and develop new MCP tools with a ready‑made web interface

FAQ from MCP Chat with Claude

What MCP servers are included?

Two servers are provided: the TodoPlan MCP server (tools: get-todo, get-plan) and the Project MCP server (tool: get-project-details).

What are the runtime requirements?

Node.js 17 or higher, npm or yarn, and an Anthropic API key are required.

How do I add a new tool to an MCP server?

Open the relevant server file (e.g., mcp-server-todoplan.ts), add a tool definition following the existing pattern, then rebuild and restart the server.

Why do I get a “tool not found” error?

Ensure both MCP servers are running and that tool names match exactly (server‑prefixed names like todoplan-server_get-todo are used).

How do I connect programmatically without the web UI?

A standalone MCP client example (mcp-client-example.ts) is included; run it with npm run client from the client/ directory.