用 AI 做一个网页聊天机器人实战

2026-06-18

很多人想给自己的网站、产品或店铺加一个能 7×24 答问题的客服机器人，但一看”训练大模型”就劝退了。其实用 AI 做聊天机器人，今天根本不需要你训练模型——你只要拼三块乐高：一个网页聊天界面、一个大模型 API、（可选）一份你自己的知识库。这篇带你从零做到一个能答业务问题的网页 bot，给可复制的最小代码，新手照着走也能跑通。

聊天机器人到底是什么，和”训练模型”有什么不一样

先纠正一个误区：做聊天机器人 ≠ 训练模型。

训练模型：从海量数据炼出一个会说话的大脑，成本几十万起，是 OpenAI、DeepSeek 这种公司干的事。
做聊天机器人：把现成的大脑（大模型 API）借过来，套一层你的界面和你的资料，让它替你回答。成本几乎为零，是你能在一个下午干完的事。

所以本质上，一个网页聊天机器人就是三部分：

前端界面——用户输入框 + 对话气泡，网页上那个聊天窗。
大模型 API——真正”思考”和生成回答的引擎，你调接口、它返文字。
（可选）知识库 RAG——让它能答”你家业务”的私有问题，而不是只会聊通用常识。

理解这三块的边界，后面就不会绕晕。下面逐块来做。

第一步：搭一个最小的聊天界面

聊天界面不复杂，核心就是”一个输入框 + 一个消息列表 + 一个发送按钮”。下面是一个纯 HTML + JS 的最小版本，复制到一个 .html 文件就能打开：

<div id="chat"></div>
<input id="msg" placeholder="输入问题..." />
<button onclick="send()">发送</button>

<script>
async function send() {
  const input = document.getElementById('msg');
  const text = input.value;
  document.getElementById('chat').innerHTML += `<p><b>我：</b>${text}</p>`;
  input.value = '';

  const reply = await askAI(text);   // 下一步实现
  document.getElementById('chat').innerHTML += `<p><b>Bot：</b>${reply}</p>`;
}
</script>

这一步先把”壳”做出来，AI 还没接。 真正动脑子的活，在下一步的 askAI() 里。

如果你想要更好看、带头像和打字动画的界面，可以让 Cursor 或 Claude Code 直接帮你生成一个 React 聊天组件——把上面这段贴给它，说”帮我做成带气泡和加载状态的聊天界面”，几分钟就有。

第二步：接上大模型 API，让它真的会答

这一步是关键：让 askAI() 去调一个大模型的接口。国产模型里 DeepSeek、Kimi 的 API 都兼容 OpenAI 格式，调用方式几乎一样，国内访问也稳。

最小调用长这样（以兼容 OpenAI 格式的接口为例，具体端点和模型名以官方文档为准）：

async function askAI(text) {
  const res = await fetch('https://api.xxx.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer 你的API_KEY'
    },
    body: JSON.stringify({
      model: '模型名',           // 以官方文档为准
      messages: [
        { role: 'system', content: '你是某店铺的客服，回答简洁友好。' },
        { role: 'user', content: text }
      ]
    })
  });
  const data = await res.json();
  return data.choices[0].message.content;
}

到这一步，你的网页 bot 已经能聊天了——但它只会答通用问题，比如”今天天气怎样”，不知道”你家几点关门”。

⚠️ 关键提醒：API Key 绝不能写在前端。上面为了演示直接写了 Key，真实上线时任何人按 F12 就能偷走它。正确做法是放到后端中转：前端只调你自己的服务器接口，服务器再拿着 Key 去调大模型。这一点务必记牢。

那个 system 提示词（system prompt）很重要——它决定 bot 的人设和回答风格。想把它写好，可以参考提示词写法的专门文章 AI 编程提示词怎么写。

第三步（可选）：挂上知识库，让它会答业务问题

要让 bot 答”你家退货政策""产品参数”这种私有问题，就得给它喂资料。直接把几百页文档全塞进提示词不现实（超出长度、还烧钱），正确解法是 RAG（检索增强生成）。

一句话理解 RAG：它像让大模型”开卷考试”——用户问问题时，先从你的资料库里检索出最相关的几段，连同问题一起喂给模型，让它照着资料回答。这样既准确，又不用训练模型。

RAG 的工作流大致是：

把你的文档切成小块，转成向量存进向量库（建库，一次性）。
用户提问时，把问题也转成向量，去库里找最相似的几段。
把”检索到的段落 + 用户问题”拼成提示词，发给大模型生成回答。

原理和踩坑细节，强烈建议先读这篇打底：RAG 是什么。

新手最快的捷径是别自己撸 RAG——用现成的 Agent 搭建平台。比如把知识库丢进 Coze 扣子或 Dify 这类工具，上传文档、绑定模型，它自动帮你做切块、向量化、检索，再导出一个能嵌到网页的对话接口。自己从零写 RAG 适合学原理，要快速上线就用平台。

第四步：部署上线

bot 跑通后，要让别人能用，得部署。最简单的路径分两块：

前端页面：扔到 Vercel、Netlify 或任意静态托管，甚至直接嵌进你现有网站的一个 <iframe>。
后端中转（藏 API Key 那层）：用一个轻量 Serverless 函数（如 Vercel Functions）就够，不用买服务器。

如果你做的是一个完整的、带账号和后台的产品级 bot，那就接近做一个小型 SaaS 了，可以参考用 AI 做一个 SaaS 的完整链路。

新手常见坑

把 API Key 写进前端——最致命，等于把信用卡贴墙上。一定用后端中转。
指望它无所不知——不挂知识库，它答不了你家业务；挂了 RAG 才会”开卷”。
system 提示词太随意——人设、语气、能答什么不能答什么，都靠它约束，值得反复打磨。
没做兜底——检索不到资料时，让 bot 老实说”这个我不确定”，别让它瞎编（业内叫”幻觉”）。
一上来就追求大而全——先把”前端+API”跑通，再加 RAG，再加多轮记忆，一步步来。

常见问题

做一个网页聊天机器人需要会编程吗？ 需要一点点，但门槛很低。前端界面和 API 调用都可以让 Claude Code 或 Cursor 帮你写；如果完全不想碰代码，用 Coze、Dify 这类可视化平台拖拽搭建即可。完全零基础也能上手，可参考不会编程也能用 AI 写代码。

接大模型 API 贵不贵？ 按调用量（token）计费，做个小工具或店铺客服，量不大时成本很低。具体单价各家不同且会变动，以官方计费页为准。省钱技巧：控制提示词长度、给回答设上限、对重复问题做缓存。

怎么让它只答我业务相关的问题，不跑题？ 两手抓：一是用 system 提示词限定角色和边界（“只回答本店相关问题”）；二是挂 RAG 知识库，让它的回答有据可依。检索不到时设置兜底话术，引导用户转人工或换个问法。

RAG 一定要自己搭吗？ 不一定。想学原理就自己搭一遍很有价值；想快速上线，直接用 Coze、Dify 这类平台自带的知识库功能更省事，它们把切块、向量化、检索都封装好了。先看懂 RAG 是什么，再决定走哪条路。

前端界面和后端必须分开吗？ 为了藏 API Key，必须有一层后端中转，但它可以极轻——一个 Serverless 函数就够，不用买服务器、不用搭复杂架构。前端静态托管 + 后端一个函数，是网页 bot 最经济的上线方式。

👉 看看我们的 AI 编程实战体系课，或逛 AI 编程教程大全把基本功打扎实。