行业资讯
通过Nodejs和Taotoken快速构建一个支持多模型切换的聊天机器人
通过Node.js和Taotoken快速构建一个支持多模型切换的聊天机器人基础教程类面向有一定Node.js基础的前后端开发者目标是构建一个可切换模型的简易聊天机器人后端教程将演示如何安装openai包通过环境变量配置Taotoken的baseURL和apiKey并编写异步函数调用聊天补全接口同时在前端提供模型选择下拉菜单。1. 项目初始化与环境准备我们将创建一个简单的Node.js后端服务它使用Express框架处理HTTP请求并集成OpenAI官方Node.js SDK来调用Taotoken平台提供的模型API。首先确保你的开发环境中已安装Node.js建议版本18或更高和npm。创建一个新的项目目录并通过终端进入该目录运行npm init -y初始化项目。接下来安装项目所需的依赖包。npm install express openai dotenv这里我们安装了三个包express用于构建Web服务器openai是OpenAI官方SDK兼容Taotoken的APIdotenv用于从.env文件加载环境变量便于管理敏感信息。2. 配置Taotoken API密钥与端点在项目根目录下创建一个名为.env的文件用于存放你的Taotoken API密钥。你可以在Taotoken平台的控制台中创建API Key。同时你需要从平台的模型广场查看并记录下你想要使用的模型ID例如claude-sonnet-4-6或gpt-4o-mini。你的.env文件内容应如下所示TAOTOKEN_API_KEYyour_taotoken_api_key_here TAOTOKEN_BASE_URLhttps://taotoken.net/api DEFAULT_MODELclaude-sonnet-4-6请注意TAOTOKEN_BASE_URL的值是https://taotoken.net/api。这是使用OpenAI兼容SDK时的正确配置SDK会自动在内部拼接/v1等路径。请务必不要在此处添加/v1。为了安全起见请将.env文件添加到你的.gitignore中避免将密钥提交到版本控制系统。3. 构建后端API服务接下来我们创建主服务器文件server.js。首先引入必要的模块并加载环境变量。// server.js import express from express; import OpenAI from openai; import dotenv from dotenv; dotenv.config(); const app express(); const port process.env.PORT || 3000; // 初始化OpenAI客户端指向Taotoken const client new OpenAI({ apiKey: process.env.TAOTOKEN_API_KEY, baseURL: process.env.TAOTOKEN_BASE_URL, }); app.use(express.json()); app.use(express.static(public)); // 用于托管前端静态文件我们创建了一个OpenAI客户端实例其baseURL和apiKey均来自环境变量。这样所有通过这个客户端发起的请求都会发送到Taotoken平台。现在我们创建一个处理聊天请求的POST接口。这个接口将接收用户消息和选定的模型ID然后调用Taotoken的聊天补全接口。app.post(/api/chat, async (req, res) { try { const { message, model } req.body; // 如果请求中没有指定模型则使用环境变量中的默认模型 const modelToUse model || process.env.DEFAULT_MODEL; const completion await client.chat.completions.create({ model: modelToUse, messages: [{ role: user, content: message }], stream: false, // 为简化示例关闭流式输出 }); const reply completion.choices[0]?.message?.content; res.json({ success: true, reply: reply }); } catch (error) { console.error(API调用错误:, error); res.status(500).json({ success: false, error: error.message }); } }); app.listen(port, () { console.log(服务器运行在 http://localhost:${port}); });这个/api/chat接口接收JSON格式的请求体包含message用户输入和可选的model参数。它使用客户端调用chat.completions.create方法并将模型的回复以JSON格式返回。4. 创建简易前端界面为了让演示更完整我们创建一个简单的前端页面来调用这个后端接口。在项目根目录下创建一个public文件夹并在其中创建index.html文件。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title多模型聊天机器人演示/title style body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; } .container { display: flex; flex-direction: column; gap: 20px; } select, textarea, button { padding: 10px; font-size: 16px; } #chatLog { border: 1px solid #ccc; padding: 15px; min-height: 300px; background: #f9f9f9; } .message { margin-bottom: 10px; } .user { color: blue; } .bot { color: green; } /style /head body div classcontainer h1Taotoken多模型聊天机器人/h1 div label formodelSelect选择模型/label select idmodelSelect option valueclaude-sonnet-4-6Claude 3.5 Sonnet/option option valuegpt-4o-miniGPT-4o Mini/option !-- 你可以在此添加更多从Taotoken模型广场获取的模型ID -- /select /div textarea iduserInput placeholder请输入你的消息... rows4/textarea button onclicksendMessage()发送/button div idchatLog/div /div script async function sendMessage() { const userInput document.getElementById(userInput).value; const model document.getElementById(modelSelect).value; const chatLog document.getElementById(chatLog); if (!userInput.trim()) return; // 在聊天记录中显示用户消息 chatLog.innerHTML div classmessage userstrong你/strong ${userInput}/div; document.getElementById(userInput).value ; try { const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ message: userInput, model: model }) }); const data await response.json(); if (data.success) { chatLog.innerHTML div classmessage botstrong机器人/strong ${data.reply}/div; } else { chatLog.innerHTML div classmessage bot stylecolor:red;strong错误/strong ${data.error}/div; } } catch (error) { chatLog.innerHTML div classmessage bot stylecolor:red;strong网络错误/strong ${error.message}/div; } chatLog.scrollTop chatLog.scrollHeight; } // 允许按Enter键发送消息 document.getElementById(userInput).addEventListener(keypress, function(e) { if (e.key Enter !e.shiftKey) { e.preventDefault(); sendMessage(); } }); /script /body /html这个前端页面包含一个模型选择下拉框、一个文本输入框和一个发送按钮。当用户发送消息时JavaScript代码会收集用户输入和选中的模型通过fetchAPI调用我们刚刚创建的后端接口并将对话记录显示在页面上。5. 运行与测试现在所有代码都已就绪。在终端中运行以下命令启动服务器node server.js如果一切正常终端会显示“服务器运行在 http://localhost:3000”。打开浏览器访问这个地址你将看到聊天界面。尝试在下拉框中选择不同的模型并发送消息后端服务会通过Taotoken平台调用对应的模型并返回结果。通过这个简单的项目你实现了一个核心功能通过一个统一的API端点动态切换调用不同的大语言模型。这得益于Taotoken平台提供的OpenAI兼容API使得切换模型就像更换一个字符串参数一样简单。在实际开发中你可以在此基础上扩展用户会话管理、流式响应、更复杂的错误处理等功能。希望这篇教程能帮助你快速上手。要获取最新的模型列表和API文档请访问 Taotoken 官方平台。
郑州网站建设
网页设计
企业官网
