通过Nodejs快速搭建一个接入Taotoken的简单聊天演示
通过Nodejs快速搭建一个接入Taotoken的简单聊天演示本文面向具备基础Node.js知识的前端或全栈开发者介绍如何快速构建一个接入Taotoken的简易聊天演示应用。整个过程将分为几个清晰的步骤从获取API凭证、配置开发环境到编写后端API调用逻辑最后搭建一个最简的Web界面。目标是在几分钟内让你看到一个可运行的演示。1. 准备工作获取API Key与选择模型在开始编码之前你需要准备好两样东西Taotoken的API Key和一个你想要调用的模型ID。首先访问Taotoken平台注册并登录后在控制台的“API密钥”页面创建一个新的密钥。请妥善保管这个密钥它相当于访问服务的密码。其次前往“模型广场”页面浏览并选择你希望使用的模型。每个模型都有一个唯一的模型ID例如claude-sonnet-4-6或gpt-4o-mini。记下你选择的模型ID后续代码中会用到。为了安全地管理密钥我们强烈建议使用环境变量而不是将其硬编码在代码中。2. 初始化项目与安装依赖创建一个新的项目目录并初始化一个Node.js项目。打开终端执行以下命令mkdir taotoken-chat-demo cd taotoken-chat-demo npm init -y接下来安装项目所需的依赖。核心是openai这个官方Node.js库它将帮助我们以兼容的方式调用Taotoken的API。同时为了构建一个简单的Web界面我们还需要一个Web框架这里选择轻量级的express。npm install openai express此外为了方便开发过程中的热重载你可以选择安装nodemon作为开发依赖。npm install --save-dev nodemon安装完成后在package.json文件中添加一个启动脚本。{ scripts: { start: node server.js, dev: nodemon server.js } }3. 编写后端API服务现在我们来创建项目的主文件server.js。这个文件将同时包含提供API接口的后端逻辑和托管前端静态页面的功能。首先在项目根目录下创建一个名为.env的文件用于存储环境变量。将你的Taotoken API Key和选定的模型ID填入其中。TAOTOKEN_API_KEY你的_API_Key_在这里 TAOTOKEN_MODEL你选择的模型ID然后创建server.js文件并写入以下代码// server.js import OpenAI from openai; import express from express; import dotenv from dotenv; import path from path; import { fileURLToPath } from url; // 加载环境变量 dotenv.config(); // 解决ES模块中 __dirname 的问题 const __filename fileURLToPath(import.meta.url); const __dirname path.dirname(__filename); // 初始化Express应用 const app express(); const port process.env.PORT || 3000; // 中间件解析JSON请求体并托管静态文件前端页面 app.use(express.json()); app.use(express.static(public)); // 初始化OpenAI客户端关键是指定Taotoken的baseURL const client new OpenAI({ apiKey: process.env.TAOTOKEN_API_KEY, baseURL: https://taotoken.net/api, // 注意此处末尾没有 /v1 }); // 定义聊天API端点 app.post(/api/chat, async (req, res) { try { const { message } req.body; if (!message) { return res.status(400).json({ error: 消息内容不能为空 }); } // 调用Taotoken聊天补全接口 const completion await client.chat.completions.create({ model: process.env.TAOTOKEN_MODEL, // 从环境变量读取模型 messages: [{ role: user, content: message }], stream: false, // 为简化演示关闭流式输出 }); const reply completion.choices[0]?.message?.content || 未收到回复; res.json({ reply }); } catch (error) { console.error(API调用错误:, error); res.status(500).json({ error: 服务端请求失败, details: error.message }); } }); // 启动服务器 app.listen(port, () { console.log(服务已启动访问 http://localhost:${port}); });这段代码的核心在于OpenAI客户端的配置。baseURL必须设置为https://taotoken.net/api。这是与Taotoken平台对接的正确地址SDK会自动在其后拼接/v1/chat/completions等具体路径。请务必确保地址准确这是成功调用的关键。4. 创建最简Web界面为了让演示更直观我们创建一个简单的前端页面来发送消息并显示回复。在项目根目录下创建一个public文件夹然后在其中创建index.html文件。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleTaotoken 聊天演示/title style body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; } #chatBox { border: 1px solid #ccc; height: 300px; overflow-y: auto; padding: 10px; margin-bottom: 10px; } .message { margin-bottom: 10px; } .user { color: blue; } .assistant { color: green; } input, button { padding: 10px; font-size: 16px; } input { width: 70%; margin-right: 10px; } /style /head body h1Taotoken 简易聊天演示/h1 div idchatBox/div div input typetext iduserInput placeholder输入你的消息... / button onclicksendMessage()发送/button /div script const chatBox document.getElementById(chatBox); const userInput document.getElementById(userInput); function addMessage(role, content) { const msgDiv document.createElement(div); msgDiv.className message ${role}; msgDiv.innerHTML strong${role user ? 你 : 助手}:/strong ${content}; chatBox.appendChild(msgDiv); chatBox.scrollTop chatBox.scrollHeight; // 滚动到底部 } async function sendMessage() { const message userInput.value.trim(); if (!message) return; addMessage(user, message); userInput.value ; userInput.disabled true; try { const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ message }) }); const data await response.json(); if (response.ok) { addMessage(assistant, data.reply); } else { addMessage(system, 错误: ${data.error}); } } catch (error) { addMessage(system, 网络请求失败: ${error.message}); } finally { userInput.disabled false; userInput.focus(); } } // 支持按回车键发送 userInput.addEventListener(keypress, (e) { if (e.key Enter) sendMessage(); }); /script /body /html这个界面包含了基本的聊天区域、输入框和发送按钮并通过JavaScript调用我们刚刚编写的/api/chat接口。5. 运行与测试所有代码准备就绪后就可以运行你的演示了。确保你的.env文件已正确配置。在终端中运行npm run dev如果一切正常终端会显示服务启动的日志。打开浏览器访问http://localhost:3000。在页面的输入框中键入一句话点击发送稍等片刻你应该就能看到来自你所选大模型的回复了。至此你已经成功搭建了一个接入Taotoken的完整Node.js演示应用。这个项目清晰地展示了从环境配置、API调用到前后端交互的全流程。你可以基于此骨架继续扩展更多功能如对话历史管理、流式响应或更复杂的UI。希望这个快速上手的教程对你有帮助。想探索更多模型或管理你的API使用情况可以随时访问 Taotoken 平台的控制台和文档中心。