feie9454/csdesign-pc-diy-store

Fork 0

feie9456 8a4ccd5ef2 实现了AI助手

2025-06-24 14:09:12 +08:00

3.5 KiB

Raw Blame History

PC DIY 商店 AI 助手使用说明

功能概述

AI 助手集成了 Anthropic 的 Claude AI，可以帮助用户：

查询配件信息 - 按类型、品牌、价格范围搜索配件
获取配件类型 - 查看所有可用的配件类型
智能推荐 - 基于用户需求提供配件推荐
价格对比 - 帮助用户比较不同配件的价格和性能

环境配置

1. 安装依赖

确保已安装 Anthropic SDK：

bun add @anthropic-ai/sdk

2. 环境变量

在 .env.local 文件中添加：

ANTHROPIC_API_KEY=your_anthropic_api_key_here
NEXT_PUBLIC_APP_URL=http://localhost:3000

3. 获取 Anthropic API Key

访问 Anthropic Console
注册/登录账户
创建 API Key
将 API Key 添加到环境变量中

API 使用

发送查询请求

const response = await fetch('/api/ai', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ 
    query: '推荐一些价格在1000-2000元的显卡' 
  }),
});

const data = await response.json();
console.log(data.response);

支持的工具调用

1. query-components

查询配件信息，支持以下参数：

type: 配件类型ID
brand: 品牌名称
minPrice: 最低价格
maxPrice: 最高价格
search: 搜索关键词
page: 页码（默认1）
limit: 每页数量（默认12）

2. get-component-types

获取所有配件类型列表，无需参数。

使用示例

示例查询

查询配件类型

"显示所有配件类型"
"有哪些配件类型可以选择？"

搜索特定配件

"推荐一些价格在1000-2000元的显卡"
"查找华硕品牌的主板"
"有什么高性能的CPU推荐"

价格筛选

"500元以下的内存条有哪些"
"3000元左右的显卡推荐"

品牌筛选

"华硕的所有配件"
"英特尔的CPU产品"

页面访问

访问 /ai-assistant 页面可以使用图形界面与 AI 助手交互。

技术架构

文件结构

lib/
  ai-assistant.ts        # AI 助手核心逻辑
app/
  api/ai/route.ts        # AI API 端点
  ai-assistant/page.tsx  # AI 助手前端页面
components/
  Navbar.tsx            # 导航栏（已添加AI助手链接）

核心组件

MCPClient 类 - 封装 Anthropic API 调用
工具调用处理 - 处理 AI 对数据库的查询需求
消息处理 - 管理对话上下文和工具结果

注意事项

API Key 安全 - 确保 API Key 不要提交到版本控制系统
错误处理 - AI 助手包含完整的错误处理机制
费用控制 - Anthropic API 按 token 计费，建议设置使用限制
网络依赖 - 需要稳定的网络连接到 Anthropic 服务

故障排除

常见问题

API Key 错误
- 检查环境变量是否正确设置
- 确认 API Key 是否有效
网络连接问题
- 检查网络连接
- 确认 Anthropic 服务是否可访问
数据库连接问题
- 确保数据库正常运行
- 检查 Prisma 配置

调试方法

查看浏览器控制台错误
检查服务器端日志
验证 API 响应格式

后续扩展

可以考虑添加：

用户偏好记忆 - 记住用户的配件偏好
配置推荐 - 根据预算推荐完整的装机配置
性能对比 - 添加配件性能参数对比功能
库存提醒 - 监控配件库存状态

3.5 KiB Raw Blame History Unescape Escape