从 TRAE 脚手架 到 Coze 智能体 ：打造支持 RAG 的编程教育客服系统

有意义
116 阅读8分钟

写在前面
本文将手把手教你如何使用 Coze 智能体平台构建一个面向编程教育产品的智能客服，并通过 RAG（检索增强生成）技术实现精准问答。建议先完成 Coze 账号注册并登录，再继续阅读。具体可以看我的这篇文章：Coze 智能体创建步骤指南

一、什么是 RAG？

RAG（Retrieval-Augmented Generation，检索增强生成） 是一种融合外部知识检索与大语言模型生成能力的先进 AI 架构。它让模型在回答问题时不再依赖“内部记忆”或泛化猜测，而是先从你提供的专属知识库中检索最相关的信息，再基于真实上下文生成答案。

RAG 的工作流程

  1. 构建知识库
    将私有文档（如 PDF、Word、网页等）进行文本提取、分段处理，并通过嵌入模型（Embedding Model）转换为向量，存储到向量数据库（如 Milvus、Pinecone 或阿里云 OpenSearch）。
  2. 实时检索
    当用户提问时，系统将问题向量化，在知识库中快速匹配最相关的若干段落。
  3. 生成答案
    将原始问题 + 检索到的上下文一并输入大语言模型（如 Qwen、ChatGLM 或 GPT），由模型综合信息生成准确、有依据的回答。

二、项目初始化：用 TRAE 快速搭建前端脚手架

尽管 TRAE 工具近期已正式推出功能强大的 SOLO 独立开发模式，该模式在单人项目开发、灵活调试等场景下具备显著优势，能为开发者提供更高效的独立工作流支持，但结合本项目的核心目标与实际开发需求来看，目前暂无需启用这一进阶功能。

从项目当前阶段的核心诉求出发，我们的首要任务是快速完成项目框架搭建与基础结构初始化，而 TRAE 自带的高效代码生成能力恰好能满足这一需求 —— 借助其预设模板、自动化配置等特性，可大幅减少手动编写基础代码的工作量，缩短项目启动周期。因此，本阶段我们将聚焦于利用 TRAE 的代码生成核心功能，快速推进项目初始化进程，SOLO 模式的相关特性将留待后续项目迭代或场景需求变化时再行评估是否启用

在新建文件夹中，依次输入以下指令（可通过 TRAE 或手动创建）：

创建一个通用的原生 HTML/CSS/JS 项目

帮我初始化 Vite 配置

c7d3cea37fdc687c7a7c772de4820e6c.png

1b4d73670eadabe09dd933657a3200b6.png

这将为你生成一个轻量、现代化的前端开发环境。

三、准备课程知识库

为了让你的智能客服能准确回答课程相关问题，请提前准备好结构化的课程信息。例如：

课程 A：Python 基础入门

课程简介：  
专为编程初学者设计，系统讲解 Python 核心语法与基础概念，帮助学员快速上手编程。

课程目录：  
第一章：Python 基础  
第二章：Python 的数字类型与运算  
第三章：数据结构  
3.1 列表（List）  
3.2 元组（Tuple）

价格：99 元

* * *

课程 B：Python 爬虫实战

课程简介：  
聚焦网络爬虫开发，从网络原理到实战项目，带你掌握使用 Python 抓取和处理网页数据的核心技能。

课程目录：  
第一章：网络基础知识（HTTP、URL、请求响应模型）  
第二章：HTML 与 CSS 基础（网页结构解析）  
第三章：Requests 模块详解  
第四章：综合爬虫项目实战

价格：199 元

💡 提示：这些内容将作为你的“知识库”上传至 Coze 平台，用于 RAG 检索。

四、在 Coze 中创建智能体

  1. 进入 Coze 开发平台
    登录后点击顶部「开发平台」，你会看到每日默认 500 点的调用额度。
  2. 点击「创建」→ 配置智能体核心
    在编辑界面中，重点配置「智能体」模块——这是决定响应逻辑与能力范围的核心。
  3. 设置提示词（Prompt）
    输入以下系统提示词（可点击左上角「AI 润色」优化表达）：
你是一个公司的智能客服，公司产品主要是编程教育类的视频课程，因此你需要满足用户的以下需求：
- 关于课程信息的问题，需要查询知识库寻找答案；
- 关于编程技术的问题，可直接使用大语言模型回答；
- 如果用户上传了图片，需调用「图片理解」插件进行解析；
- 若用户要求联系人工客服，请从知识库中返回人工客服的联系方式。

d898994c592c79e135b284e57ef3c7ab.png

  1. 启用插件
    务必开启「图片理解」插件，以支持用户上传截图或代码图片。

  2. 调试与测试
    在调试面板中尝试提问，例如：

    • “A 课程讲什么？”
    • “B 课程多少钱？”
    • “怎么联系人工客服？”

    确保回答准确、流畅。

73374c5e10587fc45108fff14733e177.png

  1. 发布为 API
    ⚠️ 关键步骤：发布时一定要选择 「API 发布」，否则无法通过代码调用！

五、前端集成 Coze API

将 TRAE 生成的代码替换为以下内容：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coze 智能客服 Demo</title>
</head>
<body>
    <h1>编程课程智能客服</h1>
    <input type="text" id="ipt" placeholder="请输入您的问题..." />
    <div id="reply">思考中...</div>
    <script type="module" src="./assets/js/main.js"></script>
</body>
</html>

  • <input>：一个文本输入框，用户可以在这里输入问题。

    • id="ipt"：给输入框一个唯一标识，方便 JavaScript 获取内容。
    • placeholder：提示文字“请输入您的问题...”。

  • <div id="reply">思考中...</div>：用于显示客服的回复，默认显示“思考中...”。

  • <script type="module" src="./assets/js/main.js"></script>：

    • 引入一个 JavaScript 模块文件 main.js（位于 ./assets/js/ 目录下）。
    • 使用 type="module" 表示该脚本是 ES6 模块，可以使用 import/export 等现代语法。
    • 这个 JS 文件应该负责监听用户输入、调用 AI 接口（比如 Coze 平台），并把回复显示在 #reply 区域。

这个页面是一个前端界面，用户输入问题后，通过 main.js 脚本与后端或 AI 服务通信，获取智能回复并展示出来。整体结构简洁，适合做智能客服的演示原型。

main.js

const ipt = document.getElementById('ipt');
const reply = document.getElementById('reply');
const endpoint = 'https://api.coze.cn/open_api/v2/chat';

ipt.addEventListener('change', async function (event) {
  const prompt = event.target.value.trim();
  if (!prompt) return;

  const payload = {
    bot_id: import.meta.env.VITE_BOT_ID,
    user: 'user_001',
    query: prompt,
    chat_history: [],
    stream: false,
    custom_variables: {}
  };

  try {
    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('API Response:', data);

    if (data.messages && data.messages.length > 0) {
      reply.innerHTML = data.messages[0].content;
    } else {
      reply.innerHTML = '抱歉，暂时无法回答该问题。';
    }
  } catch (error) {
    console.error('请求失败:', error);
    reply.innerHTML = '网络错误，请稍后重试。';
  }
});

这段 JavaScript 代码实现了与 Coze 智能客服 API 的交互，功能是：当用户在输入框中输入问题并失去焦点（比如按回车或点击别处）时，自动向 Coze 发送请求，并将 AI 的回复显示在页面上。

获取 DOM 元素

const ipt = document.getElementById('ipt');
const reply = document.getElementById('reply');
  • ipt：获取页面中 ID 为 ipt 的输入框。
  • reply：获取 ID 为 reply 的 <div>，用于显示 AI 回复。

 定义 API 地址

const endpoint = 'https://api.coze.cn/open_api/v2/chat';

这是 Coze 平台提供的聊天接口地址。

 监听输入框的 change 事件

ipt.addEventListener('change', async function (event) { ... });
  • 当用户修改输入内容并离开输入框（如按 Enter 或点击页面其他地方）时触发。
  • 注意：不是实时输入（input 事件），而是“确认输入”后才发送请求。

 构建请求参数（payload）

const prompt = event.target.value.trim();
if (!prompt) return; // 如果为空，不发送请求

const payload = {
  bot_id: import.meta.env.VITE_BOT_ID,
  user: 'user_001',
  query: prompt,
  chat_history: [],
  stream: false,
  custom_variables: {}
};
  • bot_id：从环境变量 VITE_BOT_ID 读取（通过 Vite 构建工具注入），代表你创建的 Coze 机器人 ID。
  • user：模拟用户 ID（可自定义）。
  • query：用户输入的问题。
  • chat_history：对话历史（这里留空，表示每次都是新对话）。
  • stream: false：不使用流式响应（即一次性返回完整回答）。

 发送 POST 请求到 Coze API

const response = await fetch(endpoint, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${import.meta.env.VITE_API_KEY}`
  },
  body: JSON.stringify(payload)
});
  • 使用 fetch 发起 HTTP 请求。
  • 在 Authorization 头中携带 API 密钥（来自 VITE_API_KEY 环境变量）。
  • 请求体是 JSON 格式的 payload。

 处理响应

const data = await response.json();
console.log('API Response:', data);

if (data.messages && data.messages.length > 0) {
  reply.innerHTML = data.messages[0].content;
} else {
  reply.innerHTML = '抱歉，暂时无法回答该问题。';
}
  • 解析返回的 JSON 数据。
  • 如果 data.messages 存在且有内容，取第一条消息的 content 显示。
  • 否则显示默认错误提示。

 错误处理

} catch (error) {
  console.error('请求失败:', error);
  reply.innerHTML = '网络错误，请稍后重试。';
}
  • 捕获网络错误或异常（如断网、API 密钥无效等）。
  • 在页面上提示用户“网络错误”。

⚠️ 注意事项

  • API 密钥安全：此方式将密钥嵌入前端代码，仅适用于演示或本地开发。实际生产环境应通过后端代理调用 API，避免密钥泄露。
  • 事件选择：使用 change 而非 input 或 keydown（比如监听回车），体验上可能不够即时。若想按回车发送，可改用 keydown 监听 Enter 键。

总结

这段代码是一个前端调用 Coze 聊天机器人的最小实现，结合 HTML 页面，构成了一个简单的智能客服 Demo。核心流程：

用户输入 → 发送请求 → 接收 AI 回复 → 显示结果。

配置环境变量

在项目根目录创建 .env.local 文件：

VITE_BOT_ID=your_bot_id_from_coze_url
VITE_API_KEY=your_api_key_from_coze_sdk_page

🔑 获取方式：

  • VITE_BOT_ID：来自 Coze 智能体详情页 URL 中的 ID。
  • VITE_API_KEY：进入「API 管理」→「SDK」→「Web SDK」，复制「访问密钥」。

6949beadf12e8a5681980b3c2ae2e0dd.png

effe1c124b561020c0f0521d5d7dec33.png

20bad29ed98407d25266538413157e8c.png

六、运行与调试

  1. 启动项目：npm run dev

image.png

7ec225e08fc1bdbbdea9b86ead199074.png

  1. 打开浏览器，输入问题（如“B课程包含哪些内容？”）

baef6ddfa4ed9a54b547f9b847f694ab.png

  1. 打开开发者工具（F12），查看 Network 和 Console：

    • 若返回 4101 错误（token incorrect），请检查 VITE_API_KEY 是否正确或已更新。
    • 注意：Coze 的 API Key 每次重新生成都会失效旧密钥。

稍等片刻，页面将显示智能客服的回复！

image.png

当前版本对 Coze 返回的转义字符（如 \n、"）处理尚不完善，导致部分回答显示异常，该问题将在下一期更新中修复，感谢理解！

结语

通过 Coze 与 RAG（检索增强生成）的结合，你可以轻松构建一个既懂业务又懂技术的智能客服：它不仅能准确回答“课程包含哪些内容”“适合零基础吗”这类产品问题，还能针对用户的编程疑问提供专业解答。这不仅大幅提升了用户咨询的响应效率和准确性，也显著降低了人工客服的重复工作负担。更重要的是，这个系统具备良好的扩展性——未来只需接入更多数据源，就能支持多轮上下文对话、订单状态查询、学习进度跟踪，甚至个性化课程推荐，真正迈向智能化的教育服务闭环。

avatar
文章
阅读
粉丝