告别海外账号与网络限制稳定直连全球优质大模型限时半价接入中。 点击领取海量免费额度使用 Node.js 和 Taotoken 为 Next.js 应用快速集成 AI 聊天功能本文面向熟悉 Next.js 框架的前端或全栈开发者介绍如何在后端 API 路由中通过openaiNode.js 库并配置 Taotoken 端点快速构建一个具备 AI 聊天功能的接口。我们将涵盖环境变量管理、密钥安全以及流式响应处理以提升最终用户的交互体验。1. 项目初始化与环境配置在开始编写代码之前我们需要创建一个新的 Next.js 项目并进行基础配置。如果你已有项目可以跳过创建步骤。首先使用官方脚手架创建一个新的 Next.js 应用。这里我们选择 TypeScript 作为开发语言并采用默认的 App Router 结构。npx create-next-applatest my-ai-chat-app --typescript --tailwind --app cd my-ai-chat-app接下来安装项目所需的依赖。核心的openai库用于与 Taotoken 平台通信zod用于请求参数的类型安全验证。npm install openai zod为了安全地管理 API 密钥我们使用环境变量。在项目根目录创建.env.local文件并添加你的 Taotoken API Key。你可以在 Taotoken 控制台创建并获取它。# .env.local TAOTOKEN_API_KEYyour_taotoken_api_key_here请确保将.env.local添加到.gitignore文件中避免将密钥意外提交到版本控制系统。2. 创建并配置 OpenAI 客户端在 Next.js 的 App Router 架构下我们通常在app/api/目录下创建 API 路由。首先我们需要创建一个可复用的 OpenAI 客户端实例。在lib/目录下创建openai-client.ts文件。这个客户端将使用从环境变量读取的 API Key并将baseURL指向 Taotoken 的 OpenAI 兼容端点。// lib/openai-client.ts import OpenAI from ‘openai’; // 从环境变量获取 API 密钥 const apiKey process.env.TAOTOKEN_API_KEY; if (!apiKey) { throw new Error(‘TAOTOKEN_API_KEY 环境变量未设置’); } // 创建 OpenAI 客户端实例配置 Taotoken 端点 export const openai new OpenAI({ apiKey: apiKey, baseURL: ‘https://taotoken.net/api’, // 关键配置指向 Taotoken });这里有两个关键点需要注意。第一baseURL必须设置为https://taotoken.net/api这是 Taotoken 提供的 OpenAI 兼容 API 入口。第二API Key 来自环境变量确保了生产环境的安全性。这个客户端实例将在后续的 API 路由中被导入使用。3. 实现基础聊天 API 路由现在我们来创建处理聊天请求的 API 端点。在app/api/chat/route.ts中我们将实现一个 POST 接口接收用户消息并调用 AI 模型返回响应。首先我们使用zod定义一个简单的请求体模式用于验证客户端发送的数据。// app/api/chat/route.ts import { openai } from ‘/lib/openai-client’; import { z } from ‘zod’; // 定义请求体的数据结构 const requestBodySchema z.object({ messages: z.array( z.object({ role: z.enum([‘user’, ‘assistant’, ‘system’]), content: z.string(), }) ), model: z.string().optional().default(‘gpt-4o-mini’), // 可指定模型默认使用一个常用模型 }); export async function POST(request: Request) { try { const body await request.json(); // 验证请求体格式 const { messages, model } requestBodySchema.parse(body); // 调用 Taotoken 平台的聊天补全接口 const completion await openai.chat.completions.create({ model: model, messages: messages, temperature: 0.7, max_tokens: 1000, }); // 返回 AI 的回复 const aiMessage completion.choices[0]?.message; return Response.json({ message: aiMessage }); } catch (error) { console.error(‘API 调用失败:’, error); return Response.json({ error: ‘处理请求时发生错误’ }, { status: 500 }); } }这个接口完成了最基本的功能验证输入、调用 AI、返回结果。用户可以从 Taotoken 模型广场选择其他模型 ID通过请求体的model字段传入例如claude-sonnet-4-6或deepseek-chat从而实现灵活的模型切换无需修改代码。4. 集成流式响应提升体验对于聊天应用等待 AI 生成完整回答再返回给用户会导致明显的延迟感。流式响应允许服务器将生成的内容以数据块的形式逐步推送给客户端用户可以几乎实时地看到文字逐个出现体验大幅提升。Next.js 的 App Router 原生支持流式响应。我们需要修改之前的 API 路由使用openai库的流式调用并返回一个ReadableStream。// app/api/chat/stream/route.ts import { openai } from ‘/lib/openai-client’; import { z } from ‘zod’; const requestBodySchema z.object({ message: z.string(), model: z.string().optional().default(‘gpt-4o-mini’), }); export async function POST(request: Request) { try { const body await request.json(); const { message, model } requestBodySchema.parse(body); // 发起流式请求 const stream await openai.chat.completions.create({ model: model, messages: [{ role: ‘user’, content: message }], stream: true, // 启用流式输出 temperature: 0.7, }); // 创建一个转换流将 OpenAI 的响应格式转换为 SSE 格式 const encoder new TextEncoder(); const readableStream new ReadableStream({ async start(controller) { for await (const chunk of stream) { const content chunk.choices[0]?.delta?.content || ‘’; if (content) { // 格式化为 Server-Sent Events 数据 controller.enqueue(encoder.encode(data: ${JSON.stringify({ content })}\n\n)); } } controller.enqueue(encoder.encode(data: [DONE]\n\n)); controller.close(); }, }); // 返回流式响应设置正确的 Content-Type return new Response(readableStream, { headers: { ‘Content-Type’: ‘text/event-stream’, ‘Cache-Control’: ‘no-cache’, ‘Connection’: ‘keep-alive’, }, }); } catch (error) { console.error(‘流式请求失败:’, error); return Response.json({ error: ‘流式处理失败’ }, { status: 500 }); } }在客户端你可以使用EventSourceAPI 或fetch来消费这个流。以下是一个使用fetch处理流式响应的简单前端组件示例。// app/components/StreamingChat.tsx ‘use client’; import { useState } from ‘react’; export function StreamingChat() { const [input, setInput] useState(‘’); const [response, setResponse] useState(‘’); const [isLoading, setIsLoading] useState(false); const handleSubmit async (e: React.FormEvent) { e.preventDefault(); setResponse(‘’); setIsLoading(true); const res await fetch(‘/api/chat/stream’, { method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify({ message: input }), }); if (!res.body) return; const reader res.body.getReader(); const decoder new TextDecoder(); while (true) { const { done, value } await reader.read(); if (done) break; const chunk decoder.decode(value); const lines chunk.split(‘\n\n’).filter(line line.trim()); for (const line of lines) { if (line.startsWith(‘data: ‘)) { const data line.slice(6); if (data ‘[DONE]’) { setIsLoading(false); return; } try { const parsed JSON.parse(data); setResponse(prev prev parsed.content); } catch (e) { console.error(‘解析流数据失败’, e); } } } } setIsLoading(false); }; return ( div form onSubmit{handleSubmit} input value{input} onChange{(e) setInput(e.target.value)} / button type“submit” disabled{isLoading}发送/button /form div{response}/div /div ); }5. 部署与后续步骤完成开发后你可以将应用部署到 Vercel 等支持 Next.js 的平台。部署时需要在平台的环境变量设置中配置TAOTOKEN_API_KEY其值与你本地.env.local中的一致。本文实现了一个具备基础聊天和流式响应功能的 Next.js 应用。在实际生产环境中你可能还需要考虑更多方面例如对话历史管理、用户身份验证、速率限制、以及错误处理与重试机制。Taotoken 平台提供了用量看板你可以在控制台中监控 Token 消耗和 API 调用情况便于进行成本治理。通过以上步骤你成功地将 Taotoken 的大模型能力集成到了 Next.js 应用中。这种模式统一了不同模型供应商的接入方式简化了开发流程并让模型选型与切换变得灵活可控。 告别海外账号与网络限制稳定直连全球优质大模型限时半价接入中。 点击领取海量免费额度