使用nodejs和taotoken为你的web应用添加智能聊天侧边栏
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度
使用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_在这里 PORT=3000接下来，在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', // 注意：这里是 /api，SDK会自动拼接 /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 lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.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 id="chat-sidebar"> <div id="chat-header">智能助手</div> <div id="chat-messages"> <div class="message bot-message">你好！我是AI助手，有什么可以帮你的？</div> </div> <div id="chat-input-area"> <input type="text" id="user-input" placeholder="输入你的问题..."> <button id="send-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 开始使用。
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度