MCP电子商务应用
一个使用MCP-UI、React、TypeScript构建的全栈电子商务应用程序，并与OpenAI集成，用于AI驱动的购物辅助。
建筑
/mcp-server - MCP Server with tools for product search, filter, and cart
/web-client - React application with @mcp-ui/client integration特性
- 产品搜索 -按名称或关键字搜索产品
- 类别筛选器 -按鞋类、服装或配饰筛选
- 加入购物车 -将产品添加到购物车
- 从购物车中删除 -从购物车中删除产品
- 购物车摘要 -查看购物车总数和商品
- AI助手 -与OpenAI驱动的人工智能聊天，帮助购物
技术栈
- 前端：React 18+TypeScript+Vite
- 主控程序：@modelcontextprotocol/sdk，@mcp-ui/client
- 人工智能：OpenAI API
- 设计：具有现代电子商务样式的自定义CSS
快速开始
先决条件
- Node.js 18+
- npm或纱线
安装
- 安装根依赖项：
npm install- 安装服务器依赖项：
cd mcp-server
npm install
cd ..- 安装客户端依赖关系：
cd web-client
npm install
cd ..运行应用程序
选项1：运行两台服务器（推荐）
npm run dev这将开始：
- stdio上的MCP服务器
- Web客户端位于
- OpenAI代理位于
选项2：单独运行
终端1-MCP服务器：
cd mcp-server
npm run dev终端2-Web客户端：
cd web-client
npm run devOpenAI API设置
要在OpenAI中使用AI助手：
- 从获取API密钥 .
- 创建
mcp-server/.env从 mcp服务器/.env.示例 并设置：
OPENAI_API_KEY=your-actual-api-key
OPENAI_MODEL=gpt-4o-mini
API_PORT=8787- （可选）创建
web-client/.env从 web客户端/.env.示例 如果需要覆盖代理基URL。
应用程序在没有API密钥的情况下仍然以演示模式工作，使用回退响应。
MCP工具
服务器提供以下工具：
| 工具 | 说明 |
|---|---|
search_products | 按名称/关键字搜索产品 |
filter_products | 按类别筛选 |
add_to_cart | 将产品添加到购物车 |
remove_from_cart | 从购物车中删除产品 |
get_cart | 获取购物车内容 |
get_products | 获取所有产品 |
get_categories | 获取所有类别 |
模拟产品
| ID | 名称 | 类别 | 价格 |
|---|---|---|---|
| 1 | 耐克鞋 | 鞋类 | ₹4,999 |
| 2 | 阿迪达斯T恤 | 服装 | ₹1,999 |
| 3 | 彪马帽 | 配饰 | ₹999 |
| 4 | 耐克夹克 | 服装 | ₹3,999 |
| 5 | 阿迪达斯运动鞋 | 鞋类 | ₹5,999 |
| 6 | 彪马手表 | 配饰 | ₹2,999 |
| 7 | Nike包 | 配件 | ₹1,999 |
| 8 | 阿迪达斯短裤 | 服装 | ₹1,499 |
交互示例
- “向我展示Nike产品”
- “你有什么鞋？”
- “将Puma手表添加到我的购物车”
- “显示我的购物车”
- “我的车里有什么？”
用户界面资源
MCP服务器返回以下内容的HTML资源：
- 产品列表(
ecommerce://products/list) - 购物车视图(
ecommerce://cart/view)
这些内容在聊天界面中呈现，以获得无缝体验。
项目结构
.
├── docs/
│ └── decision-log.md # Architecture and implementation decisions
├── package.json # Root package.json
├── mcp-server/
│ ├── package.json
│ └── src/
│ └── index.js # MCP Server with tools
└── web-client/
├── package.json
├── vite.config.ts
├── tsconfig.json
├── index.html
└── src/
├── main.tsx
├── App.tsx # Main React app
├── index.css # Styles
└── vite-env.d.ts文档
- 决策日志： docs/decision-log.md
许可证
麻省理工学院