MCP Chat with Claude

A full-stack application demonstrating the integration of Model Context Protocol (MCP) with Anthropic's Claude LLM, providing an interactive chat interface that leverages MCP tools.

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 MCP

Project 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

``bash