Typescript MCP Demo

🚀 MCP Chat Application with Claude

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

🚀 Quick Start

This project is a full - stack application that integrates the Model Context Protocol (MCP) with Anthropic's Claude LLM. It offers an interactive chat interface and uses MCP tools for functionality expansion.

✨ Features

• Interactive chat interface with Claude AI.
• Dual - panel UI to display conversations and tool execution details.
• Dynamically discover tools provided by the MCP server.
• Support multiple tools with different parameters.
• Correctly handle Claude's tool calls through MCP.

📦 Installation

Prerequisites

• Node.js (version 14 or higher).
• npm (version 6 or higher).
• Anthropic API key.

Download the Project

Run the following commands in the terminal to clone the repository:

git clone [repository address]
cd mcp-chat-with-claude

Install Dependencies

Enter the client directory to install client - side dependencies:

cd client
npm install

Enter the server directory to install server - side dependencies:

cd ../server
npm install

Configure Environment Variables

Create a .env file and add the following content:

ANTHROPIC_API_KEY=your_api_key_here
PORT=3000

💻 Usage Examples

Set Up and Run

Start the MCP server:

cd server
node mcp-server.ts

Start the host application:

cd ../client
npm start

Chat Interface

Users can send messages by entering text and pressing the Enter key. Claude will generate responses based on the context.

Tool Calls

The MCP server provides various tools for Claude to call, including but not limited to:

• Text analysis tools
• Network request tools
• Data processing tools

The names and functions of these tools will be dynamically displayed during the chat.

📚 Documentation

Project Overview

This project consists of two main components:

1. MCP Server: A Model Context Protocol server implemented in Node.js, providing multiple tools for the LLM to call.
2. Host Application: An application serving as the chat interface, acting as a bridge between the user, Claude AI, and the MCP server.

Project Structure

├── client/                 # Client and host application  
│   ├── dist/               # Compiled TypeScript files  
│   ├── host-app.ts         # Host application server  
│   ├── chat.js             # Chat interface logic  
│   ├── index.html          # Main web page interface  
│   ├── styles.css          # Page styles  
│   ├── package.json        # Client dependencies  
│   └── mcp-client-example.ts # Example MCP client (for testing)  
│
├── server/                 # MCP server  
│   ├── dist/               # Compiled TypeScript files  
│   ├── mcp-server.ts       # MCP server implementation  
│   └── package.json        # Server dependencies  
└── .env                    # Environment variable configuration file

Project Architecture

                ┌───────────────┐
                │               │
                │   MCP Server   │
                │               │
                └──────┬───────┘
                        │
                        ▼
                 ┌───────────────┐
                 │               │
                 │  Host Application  │
                 │               │
                 └──────┬───────┘
                         │
                         ▼
                  ┌──────▼──────┐
                  │             │
                  │   Claude API   │
                  │   (Anthropic)  │
                  │             │
                  └───────────────┘

Frequently Asked Questions

1. Connection Issues: Ensure that both the MCP server and the host application are running, and check the console for error messages.
2. Tool Not Found: Confirm that the MCP server is started and the tool names match exactly.
3. API Key Error: Check if the Anthropic API key in the .env file is set correctly.
4. Tool Call Error: Look for detailed error information in the response panel.

📄 License

MIT

Acknowledgments

• Model Context Protocol
• Anthropic Claude API