当前位置：首页 > news >正文

使用Nodejs和Taotoken为前端应用集成AI对话能力

news 2026/5/23 13:13:55

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度

使用Node.js和Taotoken为前端应用集成AI对话能力

为前端应用添加AI对话功能，通常需要一个可靠的后端服务来处理模型调用、密钥管理和请求转发。Taotoken作为一个提供统一OpenAI兼容API的平台，能够简化这一过程。本文将指导你如何在Node.js服务端项目中集成Taotoken，构建一个为Web前端提供AI对话能力的后端服务。

1. 项目初始化与环境配置

首先，确保你已安装Node.js（建议版本18或更高）。创建一个新的Node.js项目目录，并初始化项目。

mkdir ai-backend-service cd ai-backend-service npm init -y

接下来，安装必要的依赖。核心是openai官方Node.js库，用于调用兼容API。我们也会安装dotenv来管理环境变量，以及express来构建一个简单的Web服务器（如果你需要提供HTTP接口给前端）。

npm install openai dotenv express npm install -D nodemon

在项目根目录创建.env文件，用于存储敏感信息。你需要从Taotoken控制台获取API Key，并在模型广场查看你希望使用的模型ID。

# .env TAOTOKEN_API_KEY=your_taotoken_api_key_here TAOTOKEN_MODEL=claude-sonnet-4-6 # 示例模型ID，请替换为实际值 PORT=3000 # 可选，用于Express服务器

请务必将.env文件添加到.gitignore中，避免将密钥提交到版本控制系统。

2. 配置OpenAI客户端并调用API

创建一个核心服务文件，例如src/aiService.js。在这里，我们将配置OpenAI客户端，指向Taotoken的端点，并编写调用函数。

// src/aiService.js import OpenAI from 'openai'; import dotenv from 'dotenv'; dotenv.config(); // 初始化客户端，关键是指定baseURL为Taotoken的OpenAI兼容端点 const client = new OpenAI({ apiKey: process.env.TAOTOKEN_API_KEY, baseURL: 'https://taotoken.net/api', // 注意：baseURL末尾不带/v1 }); /** * 调用AI聊天补全接口（非流式） * @param {Array} messages - 消息历史数组，格式如 [{role: 'user', content: 'Hello'}] * @returns {Promise<string>} - AI返回的文本内容 */ export async function createChatCompletion(messages) { try { const completion = await client.chat.completions.create({ model: process.env.TAOTOKEN_MODEL, messages: messages, // 可根据需要调整其他参数，如temperature、max_tokens等 // temperature: 0.7, // max_tokens: 500, }); return completion.choices[0]?.message?.content || ''; } catch (error) { console.error('AI API调用失败:', error); throw new Error(`AI服务暂时不可用: ${error.message}`); } } /** * 调用AI聊天补全接口（流式响应） * @param {Array} messages - 消息历史数组 * @returns {AsyncIterable} - 一个异步迭代器，用于逐步读取流式响应 */ export async function* createChatCompletionStream(messages) { try { const stream = await client.chat.completions.create({ model: process.env.TAOTOKEN_MODEL, messages: messages, stream: true, // 启用流式输出 }); for await (const chunk of stream) { const content = chunk.choices[0]?.delta?.content || ''; if (content) { yield content; } } } catch (error) { console.error('AI流式API调用失败:', error); yield `[错误] 流式请求中断: ${error.message}`; } }

关键配置说明：初始化OpenAI客户端时，baseURL参数必须设置为https://taotoken.net/api。这是Taotoken为OpenAI兼容SDK提供的统一入口点，SDK会自动在其后拼接/v1/chat/completions等具体路径。请勿在此处添加/v1。

3. 构建后端API服务

为了让前端能够调用，我们需要创建一个HTTP服务器。这里使用Express框架创建一个简单的REST API。

创建一个主服务器文件，例如src/server.js。

// src/server.js import express from 'express'; import dotenv from 'dotenv'; import { createChatCompletion, createChatCompletionStream } from './aiService.js'; dotenv.config(); const app = express(); const port = process.env.PORT || 3000; app.use(express.json()); // 健康检查端点 app.get('/health', (req, res) => { res.json({ status: 'ok', service: 'taotoken-ai-backend' }); }); // 非流式聊天接口 app.post('/api/chat', async (req, res) => { const { messages } = req.body; if (!messages || !Array.isArray(messages)) { return res.status(400).json({ error: '请求体需包含 messages 数组' }); } try { const aiResponse = await createChatCompletion(messages); res.json({ response: aiResponse }); } catch (error) { res.status(500).json({ error: error.message }); } }); // 流式聊天接口 app.post('/api/chat/stream', async (req, res) => { const { messages } = req.body; if (!messages || !Array.isArray(messages)) { return res.status(400).json({ error: '请求体需包含 messages 数组' }); } res.setHeader('Content-Type', 'text/plain; charset=utf-8'); res.setHeader('Transfer-Encoding', 'chunked'); try { const stream = createChatCompletionStream(messages); for await (const chunk of stream) { res.write(chunk); } res.end(); } catch (error) { res.write(`[流式传输错误] ${error.message}`); res.end(); } }); app.listen(port, () => { console.log(`AI后端服务运行在 http://localhost:${port}`); });

在package.json中添加启动脚本。

{ "scripts": { "start": "node src/server.js", "dev": "nodemon src/server.js" } }

现在，你可以运行npm run dev启动开发服务器。服务将提供两个主要端点：POST /api/chat用于非流式响应，POST /api/chat/stream用于流式响应。

4. 前端调用与安全实践

前端应用（如React、Vue）可以通过fetch或axios调用上述后端接口。以下是一个简单的调用示例。

// 前端调用示例 (非流式) async function callAIBackend(userMessage, history = []) { const messages = [...history, { role: 'user', content: userMessage }]; const response = await fetch('http://localhost:3000/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }), }); const data = await response.json(); return data.response; } // 前端调用示例 (流式) async function callAIBackendStream(userMessage, history = [], onChunk) { const messages = [...history, { role: 'user', content: userMessage }]; const response = await fetch('http://localhost:3000/api/chat/stream', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }), }); const reader = response.body.getReader(); const decoder = new TextDecoder('utf-8'); let done = false; while (!done) { const { value, done: doneReading } = await reader.read(); done = doneReading; const chunk = decoder.decode(value); if (chunk && onChunk) { onChunk(chunk); } } }

安全与部署建议：