假冒商店MCP项目
一个完整的MCP（模型上下文协议）服务器和React客户端实现，用于使用虚假商店API的电子商务功能。
🎯 概述
此项目使用现代TypeScript堆栈实现了所有必需的MCP服务器功能：
演示织机链接
https://www.loom.com/share/9c123e1acd1148de890be2aadf65c94b?sid=29cd007d-0311-4d1f-9411-b458015fbdb3
✅ 核心要求
- 用户认证 -使用用户名/密码登录
- 购物车管理 -添加/删除具有数量控制的项目
- 产品浏览 -查看和过滤产品
- 逐项购物车显示 -明细表，包括小计、税款和总计
✅ 奖励功能
- 类别筛选 -按类别浏览产品（电子产品、珠宝、男装/女装）
- 用户配置文件显示 -在标题中显示经过身份验证的用户详细信息
- 购物车持久性 -跨会话维护购物车状态
- 税款计算 -购物车自动加收8%的税
- 清空购物车 -散装推车操作
- 实时更新 -实时购物车计数和总更新
- 健康监测 -服务器健康检查端点
🏗️ 建筑
React客户端（端口3000）←→ MCP服务器（端口8080）←→ 假冒商店API
前端： React 18+TypeScript+顺风CSS\ 后端： Node.js+Express+TypeScript\ API 假冒商店API(https://fakestoreapi.com)
🚀 快速开始
1.服务器设置
cd mcp-server
npm install
cp .env.example .env
npm run build
npm start服务器在上运行 http://localhost:8080
2.客户端设置
cd client
npm install
npm start客户端运行 http://localhost:3000
3.测试登录
使用这些凭据：
- 用户名：
johnd - 密码：
m38rmF$
🔧 API文档
MCP工具可用
| 工具 | 用途 | 参数 |
|---|---|---|
login_user | 用户身份验证 | username, password |
get_products | 获取产品 | category?, limit? |
get_categories | 列出类别 | 无 |
add_to_cart | 将商品添加到购物车 | user_id, product_id, quantity? |
remove_from_cart | 从购物车中删除 | user_id, product_id, quantity? |
display_cart | 显示购物车详细信息 | user_id |
clear_cart | 空购物车 | user_id |
get_users | 列出所有用户（奖励） | 无 |
HTTP端点
GET /health # Server health check
GET /mcp/tools # List available tools
POST /mcp/tools/{toolName} # Execute MCP tool🧪 测试
手动测试
- 打开
http://localhost:3000 - 使用测试凭据登录
- 浏览产品并添加到购物车
- 验证购物车计算和持久性
- 测试注销和重新登录
API测试
# Health check
curl http://localhost:8080/health
# Login test
curl -X POST http://localhost:8080/mcp/tools/login_user \
-H "Content-Type: application/json" \
-d '{"username": "johnd", "password": "m38rmF$"}'
# Get products
curl -X POST http://localhost:8080/mcp/tools/get_products \
-H "Content-Type: application/json" \
-d '{"category": "electronics"}'⚙️ 配置
服务器（.env）
PORT=8080
FAKESTORE_API_URL=https://fakestoreapi.com
CORS_ORIGIN=http://localhost:3000
DEBUG=true可用测试用户
| 用户名 | 密码 | 姓名 |
|---|---|---|
johnd | m38rmF$ | 约翰·多伊 |
mor_2314 | 83r5^_ | 莫里森 |
kevinryan | kev02937@ | 凯文·瑞安 |
donero | ewedon 《Don Ero》 |
🚨 故障排除
端口冲突： 改变 PORT 在服务器中 .env 或 REACT_APP_MCP_BRIDGE_URL 在客户端\ CORS 错误 ： 确保 CORS_ORIGIN 匹配客户端URL\ 构建错误： 跑 npm run build 在服务器目录中\ 登录问题： 验证服务器是否正在运行且可访问
📊 演示的功能
核心功能
- ✅ 使用虚假商店API进行用户身份验证
- ✅ 使用真实的API数据浏览产品
- ✅ 购物车CRUD操作
- ✅ 含税计算的逐项购物车
技术实现
- ✅ 完整的TypeScript实现
- ✅ 错误处理和验证
- ✅ RESTful API设计
- ✅ 响应式React UI
- ✅ 带钩子的状态管理
- ✅ 浏览器存储持久性
奖金实施
- ✅ 高级过滤和分类
- ✅ 用户会话管理
- ✅ 全面的API文件
- ✅ 健康监测端点