必须搭建后端代理服务以安全调用DeepSeek API，前端通过客服浮窗组件接入，配置system prompt增强上下文，并完成三项验证确保链路可用。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要把DeepSeek API接入网站客服系统，让访客在网页上直接与AI对话，必须打通前端用户输入→后端调用DeepSeek→返回结构化响应→渲染到聊天窗口的完整链路，不能只写个fetch就完事。
第一步：在DeepSeek控制台创建客服专用应用
登录DeepSeek开发者平台→进入「应用管理」→点击「新建应用」→应用类型选「网页客服系统」→填写名称如「官网在线客服v1」→勾选「启用Webhook回调」和「允许CORS跨域」→提交后立即生成一对密钥。
【务必复制并安全保存Secret Key，页面关闭后无法再次查看】
此时你会得到类似这样的配置对象：
{ "app_id": "ds_web_cust_8892", "api_key": "sk-abc123def456...", "endpoint": "https://api.deepseek.com/v1/chat/completions" }
第二步：搭建后端代理服务（必须做）
浏览器直连DeepSeek API会暴露你的api_key，这是严重安全风险。必须用你自己的服务器做一层代理。
以Node.js为例，在项目根目录新建chat-proxy.js：
const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());
app.post('/api/chat', async (req, res) => {
const { message } = req.body;
try {
const response = await axios.post('https://api.deepseek.com/v1/chat/completions', {
model: 'deepseek-chat',
messages: [{ role: 'user', content: `网页客服场景：${message}` }],
temperature: 0.5,
max_tokens: 512
}, {
headers: {
'Authorization': 'Bearer sk-abc123def456...',
'Content-Type': 'application/json'
}
});
res.json({ reply: response.data.choices[0].message.content.trim() });
} catch (e) {
res.status(500).json({ error: 'AI服务暂时不可用' });
}
});
app.listen(3001);
运行node chat-proxy.js，确保服务监听在http://localhost:3001或你部署的域名下。
第三步：前端集成客服浮窗组件
在网站HTML底部引入一个轻量级聊天窗口脚本：
<script>function initChatWidget(){const container = document.createElement('div');container.id='ds-chat-widget';document.body.appendChild(container);const script = document.createElement('script');script.src='https://cdn.jsdelivr.net/npm/deepseek-chat-widget@1.2.0/dist/widget.min.js';script.onload=()=>{window.DeepSeekChat.init({proxyUrl:'/api/chat',triggerSelector:'#chat-trigger',position:'bottom-right'});};document.head.appendChild(script);}initChatWidget();</script>
这段代码会自动加载一个右下角悬浮按钮，点击后弹出对话框。它内部已封装好WebSocket心跳、消息队列、输入防抖和错误重试逻辑。
统一LLM网关 - 一个API对接70+AI模型，使用单一API密钥即可调用GPT、Claude、Gemini、Qwen、Deepseek、Grok等主流模型。
如果你用Vue/React框架，直接安装npm包：npm install deepseek-chat-widget，然后按文档挂载即可。
第四步：配置客服话术与上下文增强
方法一：在发送请求前拼接业务上下文
修改代理服务中的prompt构造逻辑——不要只传用户原话，要注入当前网页信息：
messages: [ { role: 'system', content: '你是XX公司官网客服，只回答产品咨询、售后政策、物流查询三类问题；禁止承诺退款或透露内部数据；所有回复必须控制在80字以内。' }, { role: 'user', content: `当前页面URL：${req.headers.referer}｜用户输入：${message}` }]
方法二：前端传入用户行为快照
在调用/api/chat时，额外附带字段：
fetch('/api/chat', { method: 'POST', body: JSON.stringify({ message: input.value, page_type: 'product_detail', product_id: 'P92837' }) })
后端代理据此动态调整system prompt，比如看到page_type: 'checkout'就激活支付异常话术库。
第五步：上线前必做的三项验证
① 打开浏览器开发者工具 → Network标签页 → 发起一次客服对话 → 查看/api/chat请求是否返回200且body含reply字段。
② 故意向客服提问“你们支持微信支付吗”，确认返回内容与你配置的system指令一致，不出现“我无法回答”等兜底话术。
③ 在无痕窗口打开网站 → 点击客服按钮 → 输入“你好” → 观察气泡是否3秒内弹出回复，且没有控制台报错。
