告别海外账号与网络限制稳定直连全球优质大模型限时半价接入中。 点击领取海量免费额度使用Node.js和Taotoken为你的Web应用添加智能聊天侧边栏1. 项目概述与准备工作为现有的Web应用添加一个智能聊天侧边栏可以显著提升用户体验提供即时的客服支持或内容辅助。本教程将引导你使用Node.js后端服务通过集成Taotoken平台提供的OpenAI兼容API快速实现这一功能。整个方案的核心思路是前端页面通过JavaScript调用你编写的后端API后端服务使用官方的openainpm包与Taotoken通信处理并返回AI的响应。在开始之前你需要准备以下几项一个基本的Node.js开发环境建议Node.js 18或更高版本。一个现有的Web应用项目或者创建一个新的用于测试。一个Taotoken账户及有效的API Key。你可以在Taotoken控制台创建API Key并在模型广场查看可供使用的模型ID。2. 创建Node.js后端服务首先在你的项目根目录下初始化一个新的Node.js服务如果已有后端服务可跳过此步。创建一个新的目录例如chat-backend并进入该目录。mkdir chat-backend cd chat-backend npm init -y接下来安装必要的依赖。我们将使用express来构建Web服务器使用openai官方SDK来调用AI接口同时使用dotenv来管理环境变量。npm install express openai dotenv cors安装完成后在项目根目录下创建两个文件.env用于存储敏感配置index.js作为服务的主入口文件。3. 配置环境变量与Taotoken客户端在.env文件中添加你的Taotoken API Key。你可以从Taotoken控制台获取它。TAOTOKEN_API_KEY你的_API_Key_在这里 PORT3000接下来在index.js文件中我们进行初始配置。首先加载环境变量然后初始化OpenAI客户端关键点在于正确设置baseURL指向Taotoken的OpenAI兼容端点。// index.js require(dotenv).config(); const express require(express); const cors require(cors); const OpenAI require(openai); const app express(); const port process.env.PORT || 3000; // 初始化OpenAI客户端配置Taotoken端点 const openai new OpenAI({ apiKey: process.env.TAOTOKEN_API_KEY, baseURL: https://taotoken.net/api, // 注意这里是 /apiSDK会自动拼接 /v1/chat/completions 等路径 }); app.use(cors()); // 允许前端跨域请求 app.use(express.json()); // 解析JSON请求体 // 后续将在这里添加API路由 app.listen(port, () { console.log(Chat backend service listening on port ${port}); });请注意baseURL设置为https://taotoken.net/api。这是使用OpenAI官方Node.js SDK时的标准配置方式SDK会在内部自动为你拼接完整的API路径例如/v1/chat/completions。这是与直接使用curl命令时指定完整URL的区别。4. 实现聊天API端点现在我们来实现一个处理聊天请求的POST接口。这个接口将接收来自前端的用户消息调用Taotoken API获取AI回复然后返回给前端。在index.js文件的app.listen之前添加以下路由// 定义处理聊天请求的端点 app.post(/api/chat, async (req, res) { try { const userMessage req.body.message; const model req.body.model || claude-sonnet-4-6; // 可从前端传递或使用默认模型 if (!userMessage) { return res.status(400).json({ error: Message is required }); } // 调用Taotoken API const completion await openai.chat.completions.create({ model: model, // 模型ID可在Taotoken模型广场查看 messages: [{ role: user, content: userMessage }], stream: false, // 本例使用非流式响应 max_tokens: 500, }); const aiResponse completion.choices[0]?.message?.content; res.json({ reply: aiResponse }); } catch (error) { console.error(Error calling Taotoken API:, error); res.status(500).json({ error: Failed to get response from AI service }); } });这段代码创建了一个/api/chat的POST接口。它从请求体中获取用户消息和可选的模型参数然后使用之前配置好的OpenAI客户端向Taotoken发起请求。错误处理确保了服务在API调用失败时能向客户端返回友好的错误信息。5. 前端集成示例后端服务完成后你需要在前端页面中添加一个简单的聊天侧边栏界面并调用我们刚创建的后端接口。以下是一个使用纯HTML、CSS和JavaScript的极简示例。你可以将其嵌入到你现有Web应用页面的合适位置。创建一个index.html文件内容如下!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title智能助手侧边栏/title style #chat-sidebar { position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: 300px; height: 500px; background: #f7f9fc; border: 1px solid #ddd; border-radius: 10px 0 0 10px; box-shadow: -2px 0 5px rgba(0,0,0,0.1); display: flex; flex-direction: column; font-family: sans-serif; } #chat-header { background: #2c3e50; color: white; padding: 15px; border-radius: 10px 0 0 0; font-weight: bold; } #chat-messages { flex: 1; padding: 15px; overflow-y: auto; } .message { margin-bottom: 10px; padding: 8px 12px; border-radius: 18px; max-width: 80%; } .user-message { background: #007bff; color: white; align-self: flex-end; margin-left: auto; } .bot-message { background: #e9ecef; color: #333; } #chat-input-area { display: flex; padding: 15px; border-top: 1px solid #ddd; } #user-input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 20px; margin-right: 10px; } #send-btn { padding: 10px 20px; background: #2c3e50; color: white; border: none; border-radius: 20px; cursor: pointer; } /style /head body !-- 你的主应用内容在这里 -- h1我的Web应用/h1 p这是一个示例页面右下角嵌入了智能聊天侧边栏。/p !-- 聊天侧边栏 -- div idchat-sidebar div idchat-header智能助手/div div idchat-messages div classmessage bot-message你好我是AI助手有什么可以帮你的/div /div div idchat-input-area input typetext iduser-input placeholder输入你的问题... button idsend-btn发送/button /div /div script const backendUrl http://localhost:3000; // 替换为你的后端服务实际地址 const chatMessages document.getElementById(chat-messages); const userInput document.getElementById(user-input); const sendBtn document.getElementById(send-btn); function addMessage(content, isUser) { const msgDiv document.createElement(div); msgDiv.className message ${isUser ? user-message : bot-message}; msgDiv.textContent content; chatMessages.appendChild(msgDiv); chatMessages.scrollTop chatMessages.scrollHeight; // 滚动到底部 } async function sendMessage() { const message userInput.value.trim(); if (!message) return; addMessage(message, true); userInput.value ; sendBtn.disabled true; try { const response await fetch(${backendUrl}/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ message: message }) }); const data await response.json(); if (response.ok) { addMessage(data.reply, false); } else { addMessage(出错: ${data.error}, false); } } catch (error) { addMessage(网络请求失败请检查后端服务。, false); console.error(error); } finally { sendBtn.disabled false; userInput.focus(); } } sendBtn.addEventListener(click, sendMessage); userInput.addEventListener(keypress, (e) { if (e.key Enter) sendMessage(); }); /script /body /html这个前端示例创建了一个固定在页面右侧的侧边栏。它包含了消息展示区域和输入框。当用户发送消息时JavaScript代码会调用我们部署在http://localhost:3000/api/chat的后端接口在生产环境中需要替换为实际的公网地址并将AI的回复展示在聊天窗口中。6. 运行与后续步骤现在你可以启动整个应用进行测试。首先确保后端服务运行起来。# 在 chat-backend 目录下 node index.js如果看到“Chat backend service listening on port 3000”的日志说明后端启动成功。然后用浏览器打开包含上述前端代码的HTML文件。在输入框中尝试发送一条消息你应该能收到来自Taotoken AI模型的回复。至此一个基础的集成已经完成。你可以在此基础上进行扩展例如在前端界面中增加模型选择下拉框让用户可以选择不同的AI模型。在后端实现对话历史管理支持多轮上下文对话。为后端服务增加身份验证和速率限制以保障安全。将前端组件封装成Vue或React组件以便更好地集成到现代前端框架中。所有关于可用模型、API调用详情和计费信息请以Taotoken控制台和官方文档为准。希望这篇教程能帮助你顺利起步。如果你还没有Taotoken账户可以访问 Taotoken 开始使用。 告别海外账号与网络限制稳定直连全球优质大模型限时半价接入中。 点击领取海量免费额度