MCP Client Demo

MCP Client Demo

一个完整的 Model Context Protocol (MCP) 演示系统，包含服务器、客户端和用户界面。

功能特性

MCP Server

• 计算器工具: 支持加、减、乘、除运算
• 天气查询工具: 获取城市天气信息
• 多协议支持: stdio 和 SSE (Server-Sent Events) 模式
• 配置化: 通过 config.json 切换协议模式

MCP Client

• MCP服务器连接: 自动连接和管理MCP服务器
• DeepSeek AI集成: 集成DeepSeek API进行智能对话
• 工具调用: 自动识别并调用可用工具
• RESTful API: 提供完整的API接口

React UI界面

• 聊天界面: 与AI进行自然语言对话
• 工具面板: 直接测试和调用工具
• 状态监控: 实时显示系统状态
• 响应式设计: 支持移动端和桌面端

技术栈

• 后端: Node.js + TypeScript
• 前端: React + TypeScript
• 协议: Model Context Protocol (MCP)
• AI: DeepSeek API
• HTTP: Express.js + Axios

快速开始

自动启动（推荐）

运行启动脚本来自动安装依赖并启动所有服务：

# Windows
.\scripts\start-all.bat

手动启动

1. 安装依赖

npm install
cd src/ui && npm install

1. 构建项目

npm run build

1. 配置API密钥（可选）

编辑 config.json 文件：

{
  "deepseek": {
    "apiKey": "你的_DEEPSEEK_API_密钥"
  },
    "weather": {
    "apiKey": "你的_WEATHERAPI_API_密钥"  
  }
}

1. 启动服务

启动MCP服务器（SSE模式）：

npm run server
# 或者使用 stdio 模式：
# set MCP_MODE=stdio && npm run server

启动客户端服务器：

npm run client

启动React UI：

cd src/ui && npm start

访问地址

• React UI: http://localhost:3002
• Client API: http://localhost:3000/api
• MCP Server: http://localhost:3001

API接口

健康检查

GET /api/health

获取可用工具

GET /api/tools

调用工具

POST /api/tools/:toolName
Content-Type: application/json

{
  "operation": "add",
  "a": 10,
  "b": 5
}

AI聊天

POST /api/chat
Content-Type: application/json

{
  "messages": [
    {"role": "user", "content": "计算 15 + 27"}
  ],
  "useTools": true
}

工具使用示例

计算器

{
  "operation": "add",      // add, subtract, multiply, divide
  "a": 15,
  "b": 27
}

天气查询

{
  "city": "北京",
  "units": "metric"        // metric, imperial, kelvin
}

配置说明

config.json 文件包含所有配置选项：

{
  "server": {
    "mode": "sse",         // "stdio" 或 "sse"
    "port": 3001,
    "host": "localhost"
  },
  "client": {
    "port": 3000,
    "host": "localhost",
    "mcpServerUrl": "http://localhost:3001"
  },
  "deepseek": {
    "apiKey": "你的_DEEPSEEK_API_密钥",
    "baseUrl": "https://api.deepseek.com/v1"
  },
  "weather": {
    "apiKey": "你的_WEATHER_API_密钥",
    "baseUrl": "https://api.openweathermap.org/data/2.5"
  }
}

开发说明

项目结构

mcp-client-demo/
├── src/
│   ├── server/           # MCP服务器
│   │   ├── tools/        # 工具实现
│   │   ├── transports/   # 传输协议
│   │   └── index.ts      # 服务器入口
│   ├── client/           # MCP客户端
│   │   ├── index.ts      # 客户端入口
│   │   └── ...
│   ├── ui/               # React前端
│   │   ├── src/
│   │   │   ├── components/
│   │   │   ├── services/
│   │   │   └── types/
│   │   └── package.json
│   └── types/            # 共享类型定义
├── scripts/              # 启动脚本
├── config.json           # 配置文件
└── package.json

添加新工具

1. 在 src/server/tools/ 中创建新的工具文件
2. 实现工具接口和执行函数
3. 在 src/server/tools/index.ts 中注册新工具

协议模式切换

通过环境变量或配置文件切换：

# stdio 模式
set MCP_MODE=stdio && npm run server

# SSE 模式（默认）
set MCP_MODE=sse && npm run server