打造专属智能客服机器人：结合Coze与RAG技术的实战教程

xhxxx
173 阅读3分钟

使用 Coze 构建 RAG 智能客服，并用原生 HTML/JS/CSS 集成

引言

随着大模型（LLM）能力的普及，越来越多的产品开始尝试引入“智能客服”或“知识助手”功能。然而，单纯依赖通用模型往往无法回答特定领域的问题——比如课程安排、产品文档、内部制度等。这时候，RAG（Retrieval-Augmented Generation） 技术就派上了用场。

本文将带你从零开始：

  1. 在 Coze 平台上创建一个带有知识库的智能体（Agent）；
  2. 使用原生 HTML/JavaScript/CSS 搭建一个轻量级前端界面；
  3. 通过 Vite 构建项目并安全注入 API Key；
  4. 调用 Coze 的 Open API，实现用户提问 → 智能体回答的完整流程。

整个过程无需框架（如 React/Vue），仅用原生 Web 技术即可完成，适合快速验证想法或嵌入现有系统。

第一步：在 Coze 中创建带知识库的智能体

  1. 打造专属的知识库

    • 给智能体配置相关的课程知识
    • 给智能体配置人工客服的联系方式，可以是文本也可以是联系方式截图 image.png

  2. 创建并配置智能体

    • 名称：例如 “智能客服”
    • 行为：设置一段prompt设定智能体的回复逻辑
    • 模型：可以根据需求选择
    • 功能：开启 知识库（RAG）

image.png

  1. 发布并获取关键信息

    • Bot ID：当发布后，可以在网页链接末尾看见botid，需要记录下来
    • API Token：在coze的api管理中，选择SDK--->webSDK获取

image.png

提示：Coze 的 RAG 能力会自动在用户提问时检索相关知识片段，并作为上下文输入给 LLM，从而生成精准回答。

第二步：使用Trae搭建一个HTML/JS/CSS原生项目

image.png

第三步：使用 Vite 构建并安全注入密钥

直接在代码中写死 API Key 是危险的。Vite 提供了安全的环境变量机制。

1. 配置Vite(同样使用Trae完成构建)

image.png

2. 创建 .env.local 文件（不要提交到 Git！ ）

VITE_BOT_ID=你的BOT_ID
VITE_API_KEY=你的Coze_API_KEY

3. 项目结构：

image.png

Vite 会自动将 VITE_ 开头的变量注入到 import.meta.env 中，且不会暴露给客户端以外的环境。

4. 启动开发服务器

npm run dev

访问 http://localhost:5173，输入问题，即可看到 Coze 智能体的回答！

代码

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Coze API Demo</title>
<link rel="stylesheet" href="/src/styles.css">
</head>
<body>
  <h1>Coze API Demo 随处智能</h1>
  <input type="text" id="ipt" placeholder="请输入问题">
  <div id="reply">think...</div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>


const ipt = document.getElementById('ipt');
const reply = document.getElementById('reply');
const endpoint = 'https://api.coze.cn/open_api/v2/chat';
// DOM 2 
ipt.addEventListener('change',async function(event) {
  const prompt = event.target.value;
  console.log(prompt);
  const payload = {
    bot_id: import.meta.env.VITE_BOT_ID,
    user: 'yvo',
    query: prompt,
    chat_history:[],
    stream: false,
    custom_variables: {
      prompt: '你是一个AI助手'
    }
  }
  const response = await fetch(endpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${import.meta.env.VITE_API_KEY}`
    },
    body: JSON.stringify(payload)
  })
  const data = await response.json();
  console.log(data, '////');
  reply.innerHTML = data.messages[0].content;
})
关键代码解析：
  • 定义API端点

const endpoint = 'https://api.coze.cn/open_api/v2/chat';    // Coze 官方提供的聊天接口地址
  • 监听输入框change事件(change 事件只在用户完成输入并失去焦点（比如按回车或点击别处）时触发)
ipt.addEventListener('change',async function(event)
  • 获取用户输入内容

const prompt = event.target.value;
  • 构造请求载荷

const payload = {
   bot_id: import.meta.env.VITE_BOT_ID,
   user: 'yvo',
   query: prompt,
   chat_history:[],
   stream: false,
   custom_variables: {
     prompt: '你是一个AI助手'
   }
  1. bot_id :你在 Coze 平台创建的 Bot 的唯一 ID。通过 Vite 环境变量注入（安全）。
  2. user: 用户标识符，用于区分不同用户（Coze 用它管理会话上下文）。这里写死为 'yvo'，实际项目应使用真实用户ID
  3. query:用户当前的问题（即输入框内容）。
  4. chat_history:对话历史记录。当前为空数组 []，表示单轮对话（无上下文记忆）。若要支持多轮，需保存之前的问答
  5. stream:是否启用流式响应。false 表示等待完整回答后再返回（适合简单展示）。设为 true 可实现“打字机”效果，但需处理 SSE 或 WebSocket
  6. custom_variables:自定义变量，可在 Coze Bot 的 Prompt 中引用（如 {{prompt}}）。此处覆盖系统提示词，强化角色设定。
  • 发送post请求
 const response = await fetch(endpoint, {
    method: 'POST',//请求方式
    headers: {
      'Content-Type': 'application/json',//告诉服务器我们发送的是 JSON
      Authorization: `Bearer ${import.meta.env.VITE_API_KEY}`//`Bearer <token>`：携带 API 密钥进行身份验证
    },
    body: JSON.stringify(payload)//将 `payload` 转为 JSON 字符串发送。
  })
  • 解析响应并返回
 const data = await response.json();
  reply.innerHTML = data.messages[0].content;

通常大模型会返回多条结果让我们选择，messages[0]代表我们选择第一条，你也可以做出其他选择

总结与扩展

通过以上步骤，我们完成了：

  • 在 Coze 中构建带 RAG 能力的知识库 智能体
  • 用原生 Web 技术搭建轻量前端
  • 通过 Vite 安全管理敏感信息
  • 实现端到端的智能问答流程

结语

RAG 不再是大厂专属。借助 Coze 这样的低代码平台，配合简单的前端集成，任何人都能快速打造一个“懂业务”的 AI 助手。无论是教育、电商还是内部工具，这种模式都能显著提升用户体验。

让知识流动起来，而不是沉睡在文档里。

希望这篇博客草稿对你有帮助！

avatar
文章
阅读
粉丝