MCP与克劳德聊天
一个全栈应用程序，演示了模型上下文协议（MCP）与Anthropic的Claude LLM的集成，提供了一个利用MCP工具的交互式聊天界面。
项目概述
该项目由三个主要部分组成：
- 多个MCP服务器：实现模型上下文协议的Node.js服务器，为LLM提供各种专用工具。
- 主机应用程序：充当用户Claude AI和MCP服务器之间中介的Express服务器。
- web客户端：与Host App通信的基于浏览器的聊天界面。
特性
- 与Claude AI的交互式聊天界面
- 显示对话和工具执行详细信息的双面板UI
- 从多个MCP服务器动态发现工具
- 支持来自每台服务器的具有不同参数的专用工具
- 通过MCP正确处理克劳德的工具使用
项目结构
├── 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先决条件
- Node.js 17或更高版本
- npm或纱线
- 无烟煤API键
安装
- 克隆存储库：
git clone https://github.com/jiangyan/typescript-mcp-demo.git
cd typescript-mcp-demo- 为客户端和服务器安装依赖关系：
cd server
npm install
cd ../client
npm install- 创建
.env使用Anthropic API密钥在客户端目录中的文件：
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- 创建
.env服务器目录中的文件：
MCP_SERVER_TODOPLAN_PORT=8000
MCP_SERVER_PROJECT_PORT=8001设置和运行
步骤1：启动MCP服务器
# Terminal 1: Start the TodoPlan MCP server
cd server
npm run build:todoplan
npm run start:todoplan
# Terminal 2: Start the Project MCP server
cd server
npm run build:project
npm run start:project默认情况下，TodoPlan MCP服务器将从端口8000启动，Project MCP服务器将在端口8001启动。
步骤2：启动主机应用程序（web服务器）
cd client
npm run build
npm start默认情况下，web服务器将在端口3000上启动。
步骤3：访问聊天界面
打开浏览器并导航到：
http://localhost:3000可用的MCP工具
MCP服务器提供了Claude可以使用的以下工具：
- todoplan-server_get-todo：获取特定类别的待办事项
- 参数： - category：字符串（例如“生活”、“工作”、“家庭”、“朋友”）
- todoplan-server_get-plan：获得总体计划
- 参数：无
- 项目服务器get-project-details：获取特定项目的详细信息
- 参数： - project_name：字符串（例如“地球”、“火星”、“木星”、“土星”）
附加示例
该项目包括一个独立的MCP客户端示例(mcp-client-example.ts)它演示了如何在没有web界面的情况下以编程方式连接到MCP服务器。
要运行此示例：
cd client
npm run client发展
MCP服务器开发
要向MCP服务器添加新工具，请执行以下操作：
- 打开服务器文件（例如。，
server/mcp-server-todoplan.ts) - 在现有模式之后添加新的工具定义：
server.tool("tool-name",
{ param1: z.string() },
async ({ param1 }) => {
// Tool implementation
return {
content: [{ type: "text", text: "Result" }]
};
}
);- 重建并重新启动服务器
主机应用程序开发
主机应用程序由以下部分组成：
- 后端(
host-app.ts)：与Claude和多个MCP服务器通信的Express服务器 - 前端(
chat.js,index.html,styles.css)：与后端通信的聊天界面
建筑
┌─────────────┐ ┌────────────────┐ ┌───────────────┐
│ │ │ │ │ │
│ Web UI │◄─────►│ Host App │◄─────►│ MCP Servers │
│ (Browser) │ │ (Express) │ │ (Node.js) │
│ │ │ │ │ │
└─────────────┘ └───────┬────────┘ └───────────────┘
│
▼
┌───────────────┐
│ │
│ Claude API │
│ (Anthropic) │
│ │
└───────────────┘多MCP服务器实现
该项目实现了多服务器MCP架构，允许Claude从不同的专用服务器访问工具。
服务器配置
该项目包括两个不同的MCP服务器：
- TodoPlan MCP服务器 (
server/mcp-server-todoplan.ts)：提供管理待办事项和计划的工具
- get-todo：获取特定类别的待办事项 - get-plan：获得总体计划
- Project MCP服务器 (
server/mcp-server-project.ts)：提供用于访问项目信息的工具
- get-project-details：获取特定项目的详细信息
主机应用程序集成
主机应用程序(client/host-app.ts)已实施以：
- 同时连接到多个MCP服务器
- 使用下划线在工具名称前加上它们的服务器名称，以避免冲突（例如。，
todoplan-server_get-todo) - 根据前缀将工具调用路由到相应的服务器
- 向LLM展示一套统一的工具
查询示例
尝试以下查询以测试多个服务器的集成：
- “告诉我地球项目”
- “我的工作类别是什么？”
- “在工作类别中找到我的待办事项，并告诉我哪些项目与之相关”
- “我的计划是什么？”
故障排除
- 连接问题：确保MCP服务器和主机应用程序都在运行，并检查控制台是否有错误消息。
- 未找到工具：确保MCP服务器正在运行，工具名称完全匹配。
- API关键错误：验证您的Anthropic API密钥在客户的
.env文件。
- 工具使用错误：查看响应面板以获取详细的错误信息。
- 工具名称格式无效：确保工具名称遵循Anthropic要求的格式（仅限字母数字字符、下划线和连字符）。
