MCP Chat with Claude
About
A typescript example for web app as the host connecting node mcp server
Explore
- 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 with different parameters from each server
- Proper handling of Claude's tool use via MCP
- Node.js 17 or higher
- npm or yarn
- Anthropic API key
The project includes two distinct MCP servers:
1. TodoPlan MCP Server (server/mcp-server-todoplan.ts): Provides tools for managing todos and plans
- get-todo: Get a todo item for a specific category
- get-plan: Get the overall plan
2. Project MCP Server (server/mcp-server-project.ts): Provides tools for accessing project information
- get-project-details: Get details for a specific project
category
String (e.g., "life", "work", "family", "friends")
project_name
String (e.g., "Earth", "Mars", "Jupiter", "Saturn")
The MCP servers provide the following tools that Claude can use:
1. todoplan-server_get-todo: Get a todo item for a specific category
- Parameters:
- category: String (e.g., "life", "work", "family", "friends")
2. todoplan-server_get-plan: Get the overall plan
- Parameters: None
3. project-server_get-project-details: Get details for a specific project
- Parameters:
- project_name: String (e.g., "Earth", "Mars", "Jupiter", "Saturn")
Project Overview
This project consists of three main components: 1. Multiple MCP Servers: Node.js servers implementing the Model Context Protocol that provide various specialized tools for the LLM to use. 2. Host App: An Express server that acts as the intermediary between the user, Claude AI, and the MCP servers. 3. Web Client: A browser-based chat interface that communicates with the Host App.Features
- 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 with different parameters from each server - Proper handling of Claude's tool use via MCPProject Structure
``
├── client/ # Host app & web client
│ ├── dist/ # Compiled TypeScript
│ ├── host-app.ts # Host application server
│ ├── chat.js # Frontend chat interface logic
│ ├── index.html # Main web interface
│ ├── styles.css # Styling for web interface
│ ├── package.json # Client dependencies
│ └── mcp-client-example.ts # Example MCP client for testing
│
├── server/ # MCP servers
│ ├── dist/ # Compiled TypeScript
│ ├── mcp-server-todoplan.ts # TodoPlan MCP server implementation
│ ├── mcp-server-project.ts # Project MCP server implementation
│ └── package.json # Server dependencies
│
├── .gitignore # Git ignore file
└── README.md # Project documentation
`
Prerequisites
- Node.js 17 or higher
- npm or yarn
- Anthropic API key
Installation
1. Clone the repository:
`
git clone https://github.com/jiangyan/typescript-mcp-demo.git
cd typescript-mcp-demo
`
2. Install dependencies for both client and server:
`
cd server
npm install
cd ../client
npm install
`
3. Create .env file in the client directory with your Anthropic API key:
`
ANTHROPIC_API_KEY=your-api-key-here
MCP_SERVER_TODOPLAN_URL=http://localhost:8000/sse
MCP_SERVER_PROJECT_URL=http://localhost:8001/sse
PORT=3000
`
4. Create .env file in the server directory:
`
MCP_SERVER_TODOPLAN_PORT=8000
MCP_SERVER_PROJECT_PORT=8001
`
Setup and Running
Step 1: Start the MCP servers
``bashSign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
