Typescript MCP Demo

🚀 MCP 与Claude 的聊天应用

本项目是一个全栈应用程序，展示了模型上下文协议（MCP）与Anthropic的Claude大语言模型（LLM）的集成。它提供了一个交互式聊天界面，还能利用MCP工具进行功能扩展，为用户带来更丰富的交互体验。

🚀 快速开始

先决条件

• Node.js（版本14或更高）
• npm（版本6或更高）
• Anthropic API密钥

安装步骤

下载项目

在终端中运行以下命令克隆仓库：

git clone [仓库地址]
cd mcp-chat-with-claude

安装依赖

进入client目录安装客户端依赖：

cd client
npm install

进入server目录安装服务端依赖：

cd ../server
npm install

配置环境变量

创建一个.env文件并添加以下内容：

ANTHROPIC_API_KEY=your_api_key_here
PORT=3000

设置与运行

启动MCP服务器：

cd server
node mcp-server.ts

启动宿主应用：

cd ../client
npm start

✨ 主要特性

• 提供与Claude AI的交互式聊天界面，方便用户与AI进行交流。
• 采用双面板UI，可同时显示对话和工具执行详情，让用户清晰了解交互过程。
• 能够动态发现MCP服务器提供的工具，为用户提供更多功能选择。
• 支持多种具有不同参数的工具，满足多样化的使用需求。
• 通过MCP正确处理Claude的工具调用，确保功能的稳定运行。

📦 安装指南

下载项目

在终端中运行以下命令克隆仓库：

git clone [仓库地址]
cd mcp-chat-with-claude

安装依赖

进入client目录安装客户端依赖：

cd client
npm install

进入server目录安装服务端依赖：

cd ../server
npm install

配置环境变量

创建一个.env文件并添加以下内容：

ANTHROPIC_API_KEY=your_api_key_here
PORT=3000

💻 使用示例

基础用法

聊天界面

用户可以通过输入文本并按回车键发送消息。Claude会根据上下文生成响应。

工具调用

MCP服务器提供多种工具供Claude调用，包括但不限于：

• 文本分析工具
• 网络请求工具
• 数据处理工具

这些工具的名称和功能会在聊天过程中动态显示。

📚 详细文档

项目概述

该项目包含两个主要组件：

1. MCP服务器：使用Node.js实现的Model Context Protocol服务器，提供多种工具供LLM调用。
2. 宿主应用：作为聊天界面的应用程序，充当用户、Claude AI与MCP服务器之间的桥梁。

项目结构

├── client/                 # 客户端及宿主应用  
│   ├── dist/               # 编译后的TypeScript文件  
│   ├── host-app.ts         # 宿主应用程序服务器  
│   ├── chat.js             # 聊天界面逻辑  
│   ├── index.html          # 主网页界面  
│   ├── styles.css          # ⾯样式  
│   ├── package.json        # 客户端依赖  
│   └── mcp-client-example.ts # 示例MCP客户端（用于测试）  
│
├── server/                 # MCP服务器  
│   ├── dist/               # 编译后的TypeScript文件  
│   ├── mcp-server.ts       # MCP服务器实现  
│   └── package.json        # 服务端依赖  
└── .env                    # 环境变量配置文件

项目架构

                ┌───────────────┐
                │               │
                │   MCP服务器   │
                │               │
                └──────┬───────┘
                        │
                        ▼
                 ┌───────────────┐
                 │               │
                 │  宿主应用     │
                 │               │
                 └──────┬───────┘
                         │
                         ▼
                  ┌──────▼──────┐
                  │             │
                  │   Claude API   │
                  │   (Anthropic)  │
                  │             │
                  └───────────────┘

常见问题

1. 连接问题：确保MCP服务器和宿主应用都在运行，并查看控制台的错误信息。
2. 工具未找到：确认MCP服务器已启动且工具名称完全匹配。
3. API密钥错误：检查.env文件中的Anthropic API密钥是否正确设置。
4. 工具调用错误：在响应面板中查找详细错误信息。

📄 许可证

MIT

致谢

• 模型上下文协议
• Anthropic Claude API