5 分钟把 Coze 智能体嵌入网页：原生 JS + Vite 极简方案

作者烟袅

2025年11月29日 17:49

你已经创建好了 Coze 智能体，现在想快速把它接入一个网页？不用 React、不用 Vue，甚至不用手敲 npm create —— 本文教你用 trae 的 AI 助手 + 原生 HTML/JS，5 分钟搭建一个可运行、可部署、安全调用 Coze OpenAPI 的前端 Demo。

我们将实现：

通过 trae AI 一键生成项目并初始化 Vite
安全注入 Bot ID 和 API Token
调用 Coze 接口实现问答交互

一、用 trae AI 快速搭建项目（无需手动命令）

告别 npm init 和配置文件！我们借助 trae 的右侧 AI 对话栏，全自动完成项目创建。

操作步骤如下：

打开 trae 平台，进入任意工作区

在右侧 AI 对话框 中输入：

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

等待 AI 生成基础结构（通常包含 index.html、main.js、style.css）
接着在同一对话中继续输入：
```
帮我初始化vite配置
```
AI 会自动为你：
- 创建 vite.config.js
- 添加 package.json 脚本（如 dev、build）
- 安装 vite 依赖（或提示你运行 npm install）

✅ 此时你已拥有一个标准的 Vite 原生 JS 项目，无需任何手动配置！

将项目同步到本地后，执行：

npm run dev

确保页面能正常打开，接下来我们集成 Coze。

二、获取 Coze 智能体凭证

复制两个关键信息：
- Bot ID 进入你的智能体，在链接最后那一串就是你的ID，选择复制
- API Key 点击Web SDK 将其中的token复制下来

⚠️ 这个 API Key 具有调用权限，请务必保密！

关于智能体具体的创建 juejin.cn/post/757769… 这篇文章里面有，当然智能体发布的时候一定要选择API选项

三、安全注入环境变量

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

VITE_BOT_ID=your_actual_bot_id
VITE_API_KEY=your_actual_api_key

🔒 Vite 只会暴露以 VITE_ 开头的变量到客户端代码，这是官方推荐的安全做法。

四、编写前端交互逻辑

1. `index.html`

可以把trae生成的代码删掉用下面这份

<!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>
  <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/lib/marked.umd.min.js"></script>
</head>
<body>
  <h1>Coze API Demo 随处智能</h1>
  <input type="text" id="ipt" placeholder="请输入问题">
  <div id="reply">think...</div>
  <script type="module" src="./script.js"></script>
</body>
</html>

在这段代码看起有点不一样

<script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/lib/marked.umd.min.js"></script>

是哪里冒出来的呢？

其实加上这个主要是为了待会我们从智能体那里获取图片展示到网页上，如果不加的话我们只会获得图片的链接，这还要结合待会的js一起使用

2. `main.js`

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[1].content;
  reply.innerHTML=marked.parse(data.messages.find(item => item.type === 'answer').content);
})

代码分析

  reply.innerHTML=marked.parse(data.messages.find(item => item.type === 'answer').content);

这段代码可能看起来有点突兀，那我们拆开来看首先我们看吧

data.messages.find(item => item.type === 'answer').content

这主要是获取智能体的回答，这时就有人问了一般获取信息不都是使用 .choices[0].message.content来获取吗？

但是coze的智能体返回的结构是不一样的

看这个结构很容易观察到其实coze智能体返回的结构需要在messages[1].content或type:"answer"才能拿到结果，这就是coze与我们调用一般的llm不一样的地方。

接下来我们继续分析

marked.parse()

将 Markdown 格式的字符串 → 转换成 HTML 字符串

这样浏览器才能正确显示标题、列表、链接、图片等内容。

这也就实现了我们能在页面上获取智能体给我们的图片了。我们可以删去试试看效果

我们并没有得到我们想要的只获得了https地址

那加上试试呢？

成功将照片拿到。

 const payload = {
    bot_id: import.meta.env.VITE_BOT_ID,
    user: 'yvo',
    query: prompt,
    chat_history:[],
    stream: false,
    custom_variables: {
      prompt: '你是一个AI助手'
    }

这段代码好像见的也不多，这段其实就要根据www.coze.cn/open/docs/d… coze的官方文档去使用了

五、启动 & 验证

npm run dev

在浏览器输入问题（如“JavaScript 如何判断数组？”），即可看到 Coze 智能体的实时回复！

七、常见问题

Q：返回 {"code":4101,"msg":"The token you entered is incorrect"}？
A：请检查：

.env.local 是否命名正确
Token 是否正确或过期

结语

通过 trae AI + Vite + Coze OpenAPI，我们用最轻量的方式实现了智能体前端集成。整个过程：

无框架负担
无复杂构建
环境变量安全隔离
代码清晰可维护

一个输入框，一行 API 调用，背后是千行训练数据与万亿参数的智能体在为你思考。
而你，只用了 5 分钟，就把它请进了自己的网页。
这不是魔法——这是新时代前端工程师的日常。

普通视图