类型脚本MCP演示

Name: 类型脚本MCP演示
Author: jiangyan

作者：jiangyan5 星标更新：2025-04-12

安装使用来源：spider==github.com

项目介绍

MCP Chat with Claude

一个全栈应用程序，演示了模型上下文协议（MCP）与Anthropic的Claude大型语言模型（LLM）的集成，提供了一个利用MCP工具的交互式聊天界面。

项目概述

该项目由三个主要组件组成：

多个MCP服务器：使用Node.js实现的MCP服务器，提供各种专门工具供LLM使用。
主机应用：作为用户、Claude AI和MCP服务器之间中介的Express服务器。
Web客户端：一个基于浏览器的聊天界面，与主机应用通信。

功能

与Claude AI的交互式聊天界面
显示对话和工具执行详情的双面板UI
从多个MCP服务器动态发现工具
支持来自每个服务器的不同参数的专用工具
通过MCP正确处理Claude的工具使用

项目结构

├── client/                 # 主机应用及Web客户端
│   ├── dist/               # 编译后的TypeScript
│   ├── host-app.ts         # 主机应用服务器
│   ├── chat.js             # 前端聊天界面逻辑
│   ├── index.html          # 主要Web界面
│   ├── styles.css          # Web界面样式
│   ├── package.json        # 客户端依赖
│   └── mcp-client-example.ts # 测试用的MCP客户端示例
│
├── server/                 # MCP服务器
│   ├── dist/               # 编译后的TypeScript
│   ├── mcp-server-todoplan.ts # TodoPlan MCP服务器实现
│   ├── mcp-server-project.ts  # Project MCP服务器实现
│   └── package.json        # 服务器依赖
│
├── .gitignore              # Git忽略文件
└── README.md               # 项目文档

预备条件

Node.js 17或更高版本
npm或yarn
Anthropic 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

设置和运行

第一步：启动MCP服务器

# 终端1：启动TodoPlan MCP服务器
cd server
npm run build:todoplan
npm run start:todoplan

# 终端2：启动Project MCP服务器
cd server
npm run build:project
npm run start:project

默认情况下，TodoPlan MCP服务器将在8000端口启动，而Project MCP服务器将在8001端口启动。

第二步：启动主机应用（Web服务器）

cd client
npm run build
npm start

默认情况下，Web服务器将在3000端口启动。

第三步：访问聊天界面

打开您的浏览器并导航到：

http://localhost:3000

可用的MCP工具

MCP服务器提供了以下Claude可以使用的工具：

todoplan-server_get-todo：获取特定类别的待办事项
- 参数：
  - category：字符串（例如："生活"，"工作"，"家庭"，"朋友"）
todoplan-server_get-plan：获取总体计划
- 参数：无
project-server_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 }) => {
    // 工具实现
    return {
      content: [{ type: "text", text: "结果" }]
    };
  }
);

重新构建并重启服务器

主机应用开发

主机应用包括：

后端（host-app.ts）：与Claude和多个MCP服务器通信的Express服务器
前端（chat.js，index.html，styles.css）：与后端通信的聊天界面

架构

┌─────────────┐       ┌────────────────┐       ┌───────────────┐
│             │       │                │       │               │
│  Web UI     │◄─────►│  Host App      │◄─────►│  MCP Servers  │
│  (浏览器)    │       │  (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所需的格式（仅限字母数字字符、下划线和连字符）。

许可证

MIT