使用说明

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客户端位于 http://localhost:5173
OpenAI代理位于 http://localhost:8787

选项2：单独运行

终端1-MCP服务器：

cd mcp-server
npm run dev

终端2-Web客户端：

cd web-client
npm run dev

OpenAI API设置

要在OpenAI中使用AI助手：

从获取API密钥 https://platform.openai.com/.

创建 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

许可证

麻省理工学院