网站如何接入AI客服：从零搭建完整教程

为什么网站要接 AI 客服

传统客服需要人工值守，成本高、响应慢。接入 AI 客服后，可以 7×24 小时自动回答访客常见问题，减少重复咨询，提升用户体验。尤其适合个人站长、小型电商、SaaS 产品和技术文档站点。

本教程介绍从零开始给网站接入 AI 客服的完整流程，包括选择方案、准备知识库、前端嵌入代码、配置提示词、控制费用。

方案选择

目前主流的 AI 客服接入方案有三种：

本教程重点讲方案三（调 API 自己写）和方案二（开源项目），因为对站长来说最实用、最可控。

方案 A：自己写前端 + 调 OpenAI 兼容 API

1. 准备 API

你需要一个 OpenAI 兼容的 API 端点和 Key。可以用：

• OpenAI 官方 API
• 国内大模型 API（如通义千问、文心一言、DeepSeek）
• 自建中转站（用 New API 等工具聚合多个模型）

假设你的 API 地址是 https://api.yourdomain.com/v1/chat/completions，Key 是 sk-xxxxx。

2. 准备知识库

AI 客服的回答质量取决于你提供的知识库。建议准备以下内容：

• 常见问题 FAQ：整理 20-50 个用户最常问的问题和标准回答
• 产品文档：功能说明、使用教程、配置方法
• 价格和套餐信息：各套餐对比、付费方式、退款政策
• 联系方式和工单流程：什么时候该转人工

将知识库整理成结构化的文本，后面写进系统提示词里。

3. 写前端聊天组件

在网站页面中嵌入一个聊天窗口。以下是基础 HTML + JS 实现：

<!-- 聊天窗口 HTML -->
<div id="ai-chat-widget">
  <div id="chat-header">在线客服<span id="chat-close">&times;</span></div>
  <div id="chat-messages"></div>
  <div id="chat-input-area">
    <input type="text" id="chat-input" placeholder="输入你的问题..." />
    <button id="chat-send">发送</button>
  </div>
</div>
<button id="chat-toggle">💬</button>

JavaScript 核心逻辑：

const API_URL = 'https://api.yourdomain.com/v1/chat/completions';
const API_KEY = 'sk-xxxxx';

// 系统提示词，包含知识库
const SYSTEM_PROMPT = \`你是一个友好的在线客服助手。以下是我们的常见问题和回答：

【产品相关】
Q: 你们提供什么服务？
A: 我们提供 xxx 服务，包括...

Q: 怎么退款？
A: 在订单页面点击"申请退款"，3个工作日内处理。

【注意事项】
- 如果用户问题超出知识库范围，诚实说明并建议联系人工客服
- 回答要简洁友好，不要超过 200 字
- 不要编造不确定的信息
\`;

const messages = [{ role: 'system', content: SYSTEM_PROMPT }];

async function sendMessage(userMsg) {
  messages.push({ role: 'user', content: userMsg });

  const response = await fetch(API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': \`Bearer \${API_KEY}\`
    },
    body: JSON.stringify({
      model: 'gpt-4o-mini',
      messages: messages,
      max_tokens: 500,
      temperature: 0.7
    })
  });

  const data = await response.json();
  const reply = data.choices[0].message.content;
  messages.push({ role: 'assistant', content: reply });
  return reply;
}

4. 安全注意事项

绝对不要把 API Key 写在前端代码里！访客可以查看网页源码拿到你的 Key。

正确做法：写一个后端代理接口：

// Node.js Express 示例
app.post('/api/chat', async (req, res) => {
  const { message } = req.body;

  const response = await fetch('https://api.yourdomain.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': \`Bearer \${process.env.API_KEY}\`
    },
    body: JSON.stringify({
      model: 'gpt-4o-mini',
      messages: [
        { role: 'system', content: SYSTEM_PROMPT },
        { role: 'user', content: message }
      ],
      max_tokens: 500
    })
  });

  const data = await response.json();
  res.json({ reply: data.choices[0].message.content });
});

前端只调 /api/chat，不直接调 AI API。

5. 加入上下文管理

为了让 AI 记住对话历史，需要在后端维护会话。可以用 Redis 或内存存储：

// 简单会话管理
const sessions = {};

app.post('/api/chat', async (req, res) => {
  const { message, sessionId } = req.body;

  if (!sessions[sessionId]) {
    sessions[sessionId] = [{ role: 'system', content: SYSTEM_PROMPT }];
  }

  sessions[sessionId].push({ role: 'user', content: message });

  // 只保留最近 10 轮对话，防止 token 超限
  const recentMessages = sessions[sessionId].slice(-21);

  const response = await callAI(recentMessages);
  sessions[sessionId].push({ role: 'assistant', content: response });

  res.json({ reply: response });
});

方案 B：用 Chatbase / Dify 快速搭建

如果不想自己写代码，可以用现成的 AI 客服平台。

Chatbase

1. 注册 chatbase.co
2. 上传知识库文档（支持 PDF、TXT、网页链接）
3. 训练 AI 模型
4. 获取嵌入代码，粘贴到网站 HTML 里
5. 免费版每月 100 条消息，付费版 $19/月起

Dify（自建推荐）

1. Docker 部署 Dify：

   git clone https://github.com/langgenius/dify.git
   cd dify/docker
   cp .env.example .env
   docker compose up -d

2. 访问 Dify 后台（默认 80 端口）
3. 创建「聊天助手」应用
4. 上传知识库文档
5. 配置提示词和模型
6. 发布后获取 API 或嵌入代码

Dify 的好处是数据完全自控，支持多种模型切换，知识库管理方便。

费用控制

AI 客服最大的风险是费用失控。以下措施必须做：

• 限制每人每天对话次数：比如每人每天最多 20 轮
• 限制每条回复的 token 数：max_tokens: 500
• 使用便宜的模型：GPT-4o-mini、DeepSeek V3 等，不要用 Claude Opus
• 设置总预算上限：在 API 平台后台设置每月消费上限
• 监控使用量：定期查看 API 调用量和费用
• 转人工机制：当 AI 无法回答时，引导用户发邮件或提交工单，不要让 AI 一直兜圈子浪费 token

提示词优化技巧

AI 客服的效果 80% 取决于提示词。几个要点：

• 在系统提示词里写清楚身份：”你是 XX 网站的客服助手”
• 明确边界：”只回答与我们产品相关的问题”
• 给出回答风格：”简洁友好，每次不超过 150 字”
• 写清兜底策略：”如果不确定，说’这个问题我需要转接人工客服'”
• 把知识库直接写进提示词（简单场景），或用 RAG 检索（复杂场景）

小结

网站接入 AI 客服并不难。技术站长推荐自己写前端+后端代理+调 API 的方式，最灵活可控。不想折腾就用 Chatbase 或 Dify。关键是写好提示词、控制好费用、设置好转人工的机制。

来源：

• OpenAI API 文档
• Dify GitHub
• Chatbase 官网