小程序接入AI客服实战指南

最近不少朋友问我：小程序里想加个 AI 客服，到底该怎么接？是直接调微信自带的客服，还是自己接大模型？这篇文章就把两种主流方案讲清楚，并给出一套可直接落地的流式对话实现。

先想清楚要解决什么问题

在动手之前，先明确你的场景属于哪一类：

• 纯人工客服：用户提问，真人回复。适合订单纠纷、售后等需要人工判断的场景。
• AI 自动应答：常见问题由大模型直接回答，答不上来再转人工。
• AI 辅助人工：AI 帮客服生成回复草稿，人工确认后发送。

大部分个人开发者和小团队，目标其实是第二种。下面重点讲这条路径。

方案一：微信原生客服消息

微信小程序自带「客服消息」能力，接入成本极低。核心是两步：

1. 在小程序后台配置客服人员，或接入第三方客服系统。
2. 前端用 button 组件的 open-type="contact" 直接唤起客服会话。

<button open-type="contact" type="primary">联系客服</button>

优点是不用写后端，消息推送到微信客服端。缺点是无法接入大模型，只能人工或第三方平台托管。如果你的诉求是 AI 应答，这条路走不通，必须自建。

方案二：自建后端 + 大模型 API

这是目前最灵活的做法。整体链路是：

小程序 → 你的后端 → 大模型 API → 流式返回 → 小程序渲染

为什么必须走后端

很多人第一反应是让小程序直接请求大模型接口。这样有两个致命问题：

• API Key 泄露：小程序代码可被反编译，密钥一旦暴露会被盗刷。
• 域名白名单：小程序只能请求已备案并配置的合法域名，大模型官方域名通常不在其中。

所以后端是必需的中间层，它负责鉴权、限流、拼接上下文和转发流式数据。

后端：转发流式响应

以 Node.js 为例，用原生 fetch 接收大模型的 SSE 流，再原样透传给小程序：

app.post('/api/chat', async (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const upstream = await fetch('https://api.deepseek.com/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.API_KEY}`
    },
    body: JSON.stringify({
      model: 'deepseek-chat',
      messages: req.body.messages,
      stream: true
    })
  });

  const reader = upstream.body.getReader();
  const decoder = new TextDecoder();
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    res.write(decoder.decode(value));
  }
  res.end();
});

注意：小程序对 SSE 支持不完整，推荐用 wx.request 的 enableChunked 分块接收，而不是 EventSource。

小程序端：分块接收并渲染

关键点是开启分块传输，并在 onChunkReceived 里增量解析：

const task = wx.request({
  url: 'https://your-domain.com/api/chat',
  method: 'POST',
  enableChunked: true,
  data: { messages: this.data.history },
  success: () => {}
});

task.onChunkReceived((res) => {
  const text = decodeUtf8(res.data);
  const lines = text.split('\n').filter(l => l.startsWith('data:'));
  lines.forEach(line => {
    const payload = line.replace('data:', '').trim();
    if (payload === '[DONE]') return;
    const delta = JSON.parse(payload).choices[0].delta.content || '';
    this.setData({ answer: this.data.answer + delta });
  });
});

这里有个坑：res.data 是 ArrayBuffer，需要自己实现 UTF-8 解码，否则中文会乱码。可以借助 TextDecoder 的 polyfill，或按字节手动拼接。

上下文与成本控制

接上只是第一步，真正上线还要处理这几件事：

• 历史裁剪：只保留最近 N 轮对话，避免 token 爆炸。可以用滑动窗口，或对早期对话做摘要。
• 系统提示词：用 system 角色限定 AI 的身份和边界，比如「你是 XX 商城的客服，只回答商品相关问题」。
• 限流与鉴权：后端按用户 openid 做频率限制，防止恶意刷接口。
• 兜底转人工：当 AI 连续答不上来或用户主动要求时，引导到微信原生客服会话。

小结

小程序接入 AI 客服，核心就是后端转发 + 分块流式渲染这两件事。原生客服消息适合纯人工场景，想接大模型就必须自建后端。把鉴权、上下文管理和限流做扎实，一个体验流畅的 AI 客服就能跑起来了。