AI导哈

AI产品推荐应用

一个基于OpenAI的Next.js应用，通过分析客户查询提供智能化的产品推荐，特别适用于车辆轮胎和电子产品的个性化推荐。

  • by vkumar04
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 vkumar04/mcp-ui

使用说明

人工智能产品推荐应用程序

由OpenAI支持的Next.js应用程序，根据客户查询提供智能产品推荐。该应用程序使用人工智能来分析客户需求，并从目录中推荐最合适的产品。

特性

  • 基于人工智能的推荐：使用OpenAI GPT-4了解客户需求并提供个性化的产品建议
  • 车辆专用轮胎安装：根据客户的车辆品牌和型号自动推荐正确的车轮和轮胎尺寸
  • 配件风格检测：从客户查询中智能检测所需的装修风格（轻度下垂、攻击性或袋装）
  • 智能搜索：自然语言搜索-客户可以用简单的英语描述他们的需求
  • 综合装修数据库：包括宝马、日产、丰田、本田、斯巴鲁等80多种车型的装配数据
  • 产品分类：目前支持轮胎和电子产品，可轻松扩展到其他类别
  • 漂亮的UI：采用Tailwind CSS构建的现代响应式界面
  • 详细的产品卡片：显示全面的产品信息，包括车轮尺寸、轮胎尺寸、规格、评级和评论

技术栈

  • Next.js 15：带有App Router的React框架
  • TypeScript：类型安全开发
  • 顺风 CSS：实用程序优先的CSS框架
  • OpenAI API：GPT-4用于智能推荐
  • MCP-UI：模型上下文协议UI组件

入门指南

先决条件

安装

  1. 克隆存储库或导航到项目目录：
cd product-recommendation-app
  1. 安装依赖项：
npm install
  1. 设置环境变量：

复制 .env.example 文件到 .env.local:

cp .env.example .env.local

然后编辑 .env.local 并添加您的OpenAI API密钥：

OPENAI_API_KEY=your_actual_api_key_here
  1. 运行开发服务器：
npm run dev
  1. 打开 http://localhost:3000 在浏览器中

用法

查询示例

以下是一些您可以尝试的示例查询：

对于轮胎（配备特定车辆配件）：

  • 查询：“我需要性能轮胎”+车辆：“宝马E46 M3”→ 自动推荐18x9.5+22配件
  • 查询：“寻找冬季轮胎”+车辆：“日产350Z”→ 建议使用正确尺寸的冬季轮胎
  • 问题：“我想要一个激进的装备”+车辆：“斯巴鲁WRX”→ 建议18x9.5+22个选项
  • 查询：“日常驾驶需要轮胎”+车辆：“本田S2000”→ 显示18x8.5+35轻度跌落配件
  • 查询：“我有一辆袋装车”+车辆：“丰田GT86”→ 建议18x10.5+12极端安装

轮胎（一般）：

  • “适用于高速公路驾驶的经济型旅行轮胎”
  • “适用于赛道日的高性能夏季轮胎”

对于电子产品：

  • “我上班需要降噪耳机”
  • “正在寻找用于编程的笔记本电脑”

运作原理

  1. 客户输入：用户以自然语言输入他们的要求，并可选择输入他们的车辆信息
  2. 车辆配件查询：如果提供车辆，系统会自动：
    • 标识品牌和型号
    • 从数据库中查找正确的车轮配件
    • 从查询中检测装修风格（轻度跌落、攻击性或袋装）
    • 过滤产品以匹配推荐的车轮尺寸
  3. AI分析：OpenAI GPT-4分析查询，考虑：
    • 产品规格
    • 用户需求
    • 为特定车辆正确安装车轮和轮胎
    • 物有所值
    • 评级和评论
    • 季节性考虑
    • 配件风格偏好
  4. 智能推荐：AI通过推理返回3-4个最合适的产品
  5. 显示：产品以卡片形式显示，详细规格包括车轮尺寸和轮胎尺寸

项目结构

product-recommendation-app/
├── app/
│   ├── api/
│   │   └── recommendations/
│   │       └── route.ts          # API endpoint for recommendations
│   └── page.tsx                   # Main page
├── components/
│   ├── ProductCard.tsx            # Product display component
│   └── ProductSearch.tsx          # Search interface component
├── lib/
│   ├── ai/
│   │   └── recommendations.ts     # OpenAI integration logic
│   └── data/
│       ├── products.ts            # Product catalog with tire sizes
│       └── vehicle-fitment.ts     # Vehicle fitment database (80+ vehicles)
├── .env.local                     # Environment variables (not in git)
├── .env.example                   # Environment variables template
└── next.config.ts                 # Next.js configuration

定制

添加新产品

编辑 lib/data/products.ts 要将新产品添加到目录中，请执行以下操作：

export const yourCategory: Product[] = [
  {
    id: "product-1",
    name: "Product Name",
    brand: "Brand",
    category: "Category",
    price: 99.99,
    image: "image-url",
    description: "Product description",
    specs: {
      "Spec 1": "Value 1",
      "Spec 2": "Value 2",
    },
    rating: 4.5,
    reviews: 100
  },
  // ... more products
];

自定义AI行为

在中编辑系统提示 lib/ai/recommendations.ts 调整人工智能评估和推荐产品的方式。

样式

该应用程序使用Tailwind CSS。您可以通过编辑自定义设计：

  • components/ProductCard.tsx -产品卡片样式
  • components/ProductSearch.tsx -搜索界面样式
  • tailwind.config.ts -全局主题配置

API终点

POST/api/建议

请求正文：

{
  "query": "I need tires for winter driving",
  "userDetails": {
    "vehicle": "2020 Honda Civic",
    "preferences": "Budget-friendly"
  }
}

答复：

{
  "recommendations": [
    {
      "id": "tire-1",
      "name": "Product Name",
      "brand": "Brand",
      // ... product details
    }
  ],
  "reasoning": "AI explanation of why these products were recommended"
}

部署

Vercel（推荐）

  1. 将代码推送到GitHub
  2. 将项目导入 维塞尔
  3. 添加您的 OPENAI_API_KEY Vercel项目设置中的环境变量
  4. 部署

其他平台

该应用程序可以部署到支持Next.js的任何平台：

  • Netlify
  • AWS Amplify
  • 铁路
  • 渲染

确保设置 OPENAI_API_KEY 部署平台中的环境变量。

发展

运行测试

npm run test

生产大楼

npm run build

代码检查

npm run lint

未来的增强功能

  • []用户身份验证
  • []购物车功能
  • []实时库存集成
  • []产品比较功能
  • []保存喜爱的产品
  • []价格跟踪和警报
  • []与真实的电子商务API集成
  • []更多产品类别
  • []高级过滤选项

许可证

麻省理工学院

支持

如有疑问或问题，请在GitHub上打开问题。

相关 MCP