-
Step 1 · 选模型与接口:先跑通一次调用
用 OpenAI 兼容接口,curl 打通再写页面
别挑花眼:选支持 OpenAI 兼容协议的服务商,这样你写的页面换个 base_url 就能换模型,代码一行不用改。
先在本地终端打通一次调用,确认密钥、模型名、计费都正常:
curl https://<服务商>/v1/chat/completions \ -H "Authorization: Bearer $KEY" \ -H "Content-Type: application/json" \ -d '{"model":"<模型名>","messages":[{"role":"user","content":"说句话"}]}'能拿到
choices[0].message.content再往下做。选模型看三件事:中文能力、单价(元/百万 token)、有没有免费额度。个人站起步用带赠金额度的国产模型最划算,先用完免费的再决定要不要付费。
自查清单
- curl 能拿到正常回复
- 知道模型名与单价
- 确认接口是 OpenAI 兼容协议
-
Step 2 · 密钥绝不下发到浏览器
前端直连 = 密钥裸奔,必须走一层转发
这是新手最贵的一个坑:把 API Key 写在前端 JS 里,等于公开送钱。别人 F12 就能抄走,几小时刷爆额度。
三种正确做法(按成本从低到高):
- 云函数转发(推荐):腾讯云 SCF / 阿里云 FC,一个函数收用户问题、带上密钥请求模型、返回结果。免费额度足够个人站用
- 现成中转程序:One API / New API 这类开源项目,自带 key 分发、额度控制、渠道管理,装好即用
- Nginx 反代:在服务器 Nginx 里把
/v1/反代到服务商,并在请求头里注入密钥——配置简单但额度控制弱
无论哪种,都要做三件事:
- 限制单次最大 token 与请求频率
- 按 IP 或会话做速率限制
- 记录用量日志,异常立刻能发现
自查清单
- 前端代码里搜不到任何密钥字符串
- 用 F12 看网络请求,看不到真实密钥
- 设了速率限制与单次 token 上限
-
Step 3 · 写对话页:流式输出 + 上下文
fetch 读 stream,逐字渲染,上下文只留最近几轮
对话页的核心体验是流式输出——用户发完问题 1 秒内就开始吐字,而不是干等 10 秒。
const res = await fetch('/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model, stream: true, messages }) }); // res.body 用 TextDecoder 按 SSE 逐块解析 data: 行上下文控制(省钱关键):
- 只保留最近 5–8 轮对话,更早的丢掉
- 系统提示词固定一段,写清身份、回答风格、不能承诺什么
- 长对话做摘要压缩,或直接开新会话
兜底体验:网络失败给重试按钮;超时给「模型在忙,稍后再试」;回答结束给「复制 / 重新生成」两个按钮。别让页面卡在转圈。
自查清单
- 回答是逐字流式输出,不是等完一次性出现
- 多轮对话能记住上文,超过 8 轮自动裁剪
- 断网时页面有明确提示且有重试入口
-
Step 4 · 加护栏:提示词、敏感内容与成本上限
限定回答范围、过滤输入、设每日预算
公开的对话页必须加护栏,不然你会同时遇到「被刷爆额度」和「被诱导输出不该说的话」。
三层护栏:
- 提示词约束:系统提示里写明「只回答 XX 领域问题,超出范围礼貌拒绝」「不提供他人隐私与违法内容」
- 输入过滤:本地先过一遍敏感词表,命中直接拒答(省钱也省事)
- 成本上限:按天设预算,超了返回「今日额度用尽,明天再来」
页面上要写明:这是 AI 自动回复,内容仅供参考;不收集个人信息;对话可能被用于改进服务(如果你确实记录日志)。
每日看一眼用量:用量曲线突然拉直,多半是被刷了,第一时间降限额。
自查清单
- 问无关领域问题时会被礼貌拒绝
- 设了每日预算上限并验证过触发
- 页面有 AI 免责说明
-
Step 5 · 上线 + 转化观测 + 变现
埋点看真实使用,底部接模型厂商返利
对话页上线后,你会想知道:有没有人用、用到第几轮就走、有没有点推广。
必埋事件(写进
data/conversion.json,用Tracker.track上报):chat_start:第一次发送消息chat_turn:每轮问答完成(props 带轮次序号)chat_error:接口失败aff_click:点击底部模型 / 服务器推广
看这三个数:人均轮次(<2 说明首答质量差)、
chat_error占比(>5% 要查接口)、aff_click/chat_start(真实转化率)。变现:来看 AI 对话页的人本来就要用模型,底部放模型厂商邀请链接转化很自然;再放一条服务器链接(「想自己搭一个?」)。推广位标「推广 · 含返利」。
收录:对话页本身是工具页,静态部分要有正文说明(它是干什么的、怎么用),别只留一个空输入框给爬虫。
自查清单
- chat_start / chat_turn / aff_click 三个事件能查到
- 页面静态部分有可被抓取的正文说明
- 推广位已标注且页脚有声明