AI导哈

电商功能实现

一个完整的MCP服务器和React客户端实现，用于使用Fake Store API实现电商功能。

  • by Bighero0122
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 bighero0122/fakestore-mcp-server

使用说明

假冒商店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

🧪 测试

手动测试

  1. 打开 http://localhost:3000
  2. 使用测试凭据登录
  3. 浏览产品并添加到购物车
  4. 验证购物车计算和持久性
  5. 测试注销和重新登录

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文件
  • ✅ 健康监测端点

相关 MCP