用 Coze 打造你的教育智能客服：从想法到前端集成的完整实践

最近，我在 Coze 上完成了一个小而美的项目------一个专为教育产品打造的智能客服机器人。整个过程轻松又高效，不仅让我深刻体会到"知识库 + 大模型"的威力，也让我用最朴素的原生 HTML/JS 实现了前端集成。今天就来和稀土掘金的朋友们分享这段愉快的开发经历！

为什么要做这个智能客服？

设想一下：你上线了一门编程课程，用户访问官网后可能会问：

"这门课适合零基础吗？"
"有没有配套的实战项目？"
"第三章讲的是什么内容？"

如果每个问题都靠人工回复，成本高、响应慢。而通用大模型虽然聪明，却对你的课程一无所知。这时候，RAG（检索增强生成）技术就成了关键------通过构建专属知识库，让 AI "吃透"你的资料，变成真正懂你产品的客服。

更妙的是，当它遇到无法回答的问题（比如退款、账号异常），还能自动引导用户"转人工"，实现 AI 与人工的无缝衔接。

在 Coze 上搭建智能体：三步搞定

我登录 Coze 后，做了三件事：

1. 创建人工客服知识库

上传了一段提示文本："如问题超出我的能力范围，请联系客服微信：xxx。" 这就是我们的兜底策略。

2. 创建课程知识库

把课程大纲、章节简介、常见问题等文档上传进去。Coze 会自动处理并建立向量索引。

3. 创建智能客服 Agent

将上述两个知识库绑定到 Bot，并设置人设 Prompt：

"你是一个公司的智能客服，公司产品主要是编程教育类的视频课程，因此你需要满足用户的以下需求:"

关于课程信息的问题，需要查询知识库寻找答案
关于编程问题，需要使用大模型语言来处理
如果对方上传了图片，那么需要通过调用插件图片解析来处理
如果联系人工客服，查询知识库，将联系人信息的联系方式返回给用户

发布后，Coze 自动生成了 API 调用地址，并提供了 bot_id 和 API Token。

🔑 注意：Token 是敏感信息！在代码中必须妥善处理，绝不能硬编码或提交到 Git。

本地开发：用 Trae 快速初始化项目

为了快速启动，我使用了 AI 编程工具 Trae，让它帮我：

"初始化一个原生 HTML/CSS/JS 项目，并配置 Vite 支持环境变量。"

几秒后，项目骨架就绪。以下是核心文件，这是我根据需求进行修改后的代码：

`index.html`

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coze API Demo</title>
</head>
<body>
    <h1>Coze API Demo 随处智能</h1>
    <input type="text" id="ipt" placeholder="请输入问题">
    <div id="reply">think...</div>
    <script type="module" src="/main.js"></script>
</body>
</html>

简洁明了，没有任何框架依赖，纯粹的 Web 原生体验。

`main.js`

javascript 复制代码

const ipt = document.getElementById('ipt')
const reply = document.getElementById('reply')
//coze api调用的地址
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: 'user',
    api_key: import.meta.env.VITE_API_KEY,
    query: prompt,
    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()
  reply.innerHTML = data.messages[0].content

})

这段代码有几个关键点：

使用 import.meta.env.VITE_BOT_ID 和 VITE_API_KEY 读取环境变量，避免泄露敏感信息。
通过 fetch 直接调用 Coze 的官方 API。
监听 input 的 change 事件（回车或失焦触发），获取用户输入并发送请求。
将返回结果中的第一条消息内容渲染到页面。

环境变量配置

在项目根目录创建 .env.local 文件（不要提交到 Git）：

ini 复制代码

VITE_BOT_ID=7577742610921029667
VITE_API_KEY=your_api_key

Vite 会自动加载以 VITE_ 开头的变量，并注入到客户端代码中。

效果与思考

现在，当我输入"课程包含 Vue3 实战吗？"，Bot 会从知识库中精准召回相关内容；当我问"怎么退款？"，它会立刻引导我联系人工客服。

整个过程没有复杂的部署、没有后端服务，只用了 Coze + 原生前端，就实现了一个可用的智能客服系统。

这让我意识到：AI 应用的门槛正在急剧降低。你不需要成为算法专家，只要会整理知识、会写几行 JS，就能打造出属于自己的智能体。

那么在以后的开发协作中，可能开发不再只是程序员才能干的活了，所以人只要你有想法，都可以一起协作创建属于自己的agent

写在最后

这次实践让我感受到"随处智能"的真正含义------智能不该局限于某个 App 或平台，而应该像水电一样，嵌入到每一个需要它的产品中。

如果你也在做教育、电商、SaaS 或任何有客服需求的产品，不妨试试 Coze。用知识库喂养大模型，再用几十行代码把它带到你的用户面前。

🌟 项目虽小，意义不小。AI 的未来，属于每一个愿意动手尝试的人。

快去 Coze 创建你的第一个 Agent 吧！欢迎在评论区交流你的想法或踩坑经验～ 😊