使用说明

项目简介

本项目是一个全栈应用示例，展示了如何使用 Model Context Protocol (MCP) 与 Anthropic 的 Claude LLM 集成，构建一个交互式聊天界面。它包含多个 MCP 服务器，分别提供不同的工具，Host App 作为桥梁连接用户、Claude AI 和 MCP 服务器，Web Client 提供用户界面。

主要功能点

交互式聊天界面: 与 Claude AI 进行对话。
双面板 UI: 清晰展示对话内容和工具执行详情。
动态工具发现: Host App 可以从多个 MCP 服务器动态发现可用的工具。
支持多类型工具: 每个 MCP 服务器可以提供具有不同参数的专业工具。
Claude 工具调用: 完整演示 Claude 如何通过 MCP 协议调用和使用工具。
多 MCP 服务器架构: 演示了如何集成和管理多个独立的 MCP 服务器。

安装步骤

克隆仓库

git clone https://github.com/jiangyan/typescript-mcp-demo.git
cd typescript-mcp-demo

安装依赖 分别进入 'server' 和 'client' 目录，运行 'npm install' 安装依赖。

cd server
npm install
cd ../client
npm install

配置环境变量

在 'client' 目录下创建 '.env' 文件，并填入你的 Anthropic API 密钥和 MCP 服务器地址。

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

在 'server' 目录下创建 '.env' 文件，配置 MCP 服务器端口。

MCP_SERVER_TODOPLAN_PORT=8000
MCP_SERVER_PROJECT_PORT=8001

服务器配置 (MCP 客户端配置)

对于需要连接到此 MCP 服务器的 MCP 客户端，你需要配置服务器连接信息。由于本项目包含两个 MCP 服务器 (TodoPlan 和 Project)，你需要分别配置。以下是配置信息示例，假设你的 MCP 客户端需要连接这两个服务器以使用其提供的工具：

[
  {
    "serverName": "todoplan-server",
    "command": "npm",
    "args": ["run", "start:todoplan"],
    "description": "TodoPlan MCP 服务器，提供待办事项和计划管理工具。"
  },
  {
    "serverName": "project-server",
    "command": "npm",
    "args": ["run", "start:project"],
    "description": "Project MCP 服务器，提供项目信息查询工具。"
  }
]

配置参数说明:

'serverName': 服务器名称，用于在客户端标识和区分不同的 MCP 服务器。例如 'todoplan-server' 和 'project-server'。
'command': 启动 MCP 服务器的命令。本项目使用 'npm' 作为包管理器，所以命令为 'npm'。
'args': 启动命令的参数。根据 'server/package.json' 中的 scripts 配置，'start:todoplan' 和 'start:project' 分别用于启动 TodoPlan 和 Project MCP 服务器。
'description': 服务器的简要描述，帮助用户理解服务器的功能。

注意: 实际的 MCP 客户端配置可能需要根据客户端的具体实现方式进行调整。上述 JSON 配置仅为示例，展示了如何根据仓库信息推断 MCP 服务器的启动方式和所需参数。

基本使用方法

启动 MCP 服务器 打开两个终端窗口，分别进入 'server' 目录，启动 TodoPlan 和 Project 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

启动 Host App (Web 服务器) 打开第三个终端窗口，进入 'client' 目录，启动 Host App。
```
cd client
npm run build
npm start
```
访问 Web 界面 打开浏览器，访问 'http://localhost:3000'，即可开始与 Claude AI 聊天并体验工具调用功能。

可用 MCP 工具

本项目提供的 MCP 服务器包含以下工具，Claude 可以根据用户指令调用这些工具来获取信息或执行操作：

todoplan-server_get-todo: 获取指定类别的待办事项。
- 参数:
  - 'category': 类别 (字符串，例如 "life", "work", "family", "friends")
todoplan-server_get-plan: 获取整体计划。
- 参数: 无
project-server_get-project-details: 获取指定项目的详细信息。
- 参数:
  - 'project_name': 项目名称 (字符串，例如 "Earth", "Mars", "Jupiter", "Saturn")

示例查询

尝试以下查询，体验多服务器工具集成：

"Tell me about project Earth" (了解 Earth 项目)
"What's my todo for the work category?" (查询工作类别的待办事项)
"Find my todo in the work category and tell me what projects are related to it" (组合使用工具)
"What's my plan?" (查询整体计划)

关键词