如何为你的Nextjs应用快速添加Taotoken大模型对话功能

告别海外账号与网络限制稳定直连全球优质大模型限时半价接入中。 点击领取海量免费额度如何为你的Nextjs应用快速添加Taotoken大模型对话功能1. 项目准备与环境变量配置在开始集成之前你需要一个可运行的Next.js项目。如果你还没有可以使用create-next-app快速初始化一个。本教程假设你使用的是Next.js 14或更高版本并启用了App Router。首先你需要在Taotoken平台获取API密钥。登录后在控制台的API密钥管理页面创建一个新的密钥。这个密钥将用于验证你的应用对Taotoken服务的访问权限。为了安全地管理密钥我们将其存储在环境变量中。在Next.js项目的根目录下创建或编辑.env.local文件。这个文件不会被提交到版本控制系统确保了密钥的安全性。在文件中添加以下内容TAOTOKEN_API_KEY你的_Taotoken_API_密钥请务必将你的_Taotoken_API_密钥替换为你从控制台复制的真实密钥。在Next.js中以NEXT_PUBLIC_开头的环境变量会在客户端暴露因此我们使用TAOTOKEN_API_KEY这个名称确保它只在服务端可用。2. 安装依赖与配置服务端客户端接下来我们需要安装官方的OpenAI Node.js SDK。这个SDK与Taotoken的OpenAI兼容API可以无缝配合。在项目根目录下运行以下命令npm install openai安装完成后我们将在服务端创建一个可复用的API客户端。在Next.js的App Router架构下我们可以在一个工具文件中配置它。创建一个新文件lib/taotoken-client.js或.ts并写入以下配置import OpenAI from openai; // 从环境变量读取API密钥 const apiKey process.env.TAOTOKEN_API_KEY; // 检查密钥是否存在 if (!apiKey) { throw new Error(TAOTOKEN_API_KEY 环境变量未设置。请在 .env.local 文件中配置。); } // 创建并导出OpenAI客户端实例 export const taotokenClient new OpenAI({ apiKey: apiKey, baseURL: https://taotoken.net/api, // 关键指定Taotoken的API端点 });这段代码的核心是baseURL的配置。通过将其设置为https://taotoken.net/api我们让SDK将所有请求发送到Taotoken平台而不是OpenAI的官方端点。客户端初始化后你就可以在项目的任何服务端代码中导入并使用taotokenClient来调用大模型了。3. 创建API路由处理对话请求现在我们来创建一个Next.js API Route作为前端与Taotoken服务之间的安全桥梁。在app/api/chat/目录下创建route.js文件。这个路由将接收前端的POST请求调用Taotoken API并将结果返回给前端。import { taotokenClient } from /lib/taotoken-client; import { NextResponse } from next/server; export async function POST(request) { try { // 1. 解析前端请求体 const { messages, model } await request.json(); // 2. 基本的请求参数验证 if (!messages || !Array.isArray(messages)) { return NextResponse.json( { error: 请求格式错误缺少有效的 messages 数组 }, { status: 400 } ); } // 3. 调用Taotoken API const completion await taotokenClient.chat.completions.create({ model: model || claude-sonnet-4-6, // 可从前端指定或使用默认模型 messages: messages, // 对话历史 stream: false, // 本例使用非流式响应简化处理 }); // 4. 提取并返回AI的回复 const aiMessage completion.choices[0]?.message; return NextResponse.json({ message: aiMessage }); } catch (error) { // 5. 错误处理 console.error(调用Taotoken API失败:, error); return NextResponse.json( { error: 服务端处理请求时发生错误 }, { status: 500 } ); } }这个路由处理了几个关键步骤验证输入、调用配置好的Taotoken客户端、处理响应以及捕获可能的错误。模型IDclaude-sonnet-4-6是一个示例你可以在Taotoken的模型广场查看所有可用模型及其对应的ID并根据需要替换。4. 构建前端界面并调用接口最后我们创建一个简单的前端页面来使用这个对话功能。在app/page.js文件中我们可以添加一个基础的聊天界面。这里使用React的状态和fetchAPI来演示。use client; // 这是一个客户端组件 import { useState } from react; export default function HomePage() { const [input, setInput] useState(); const [messages, setMessages] useState([]); const [isLoading, setIsLoading] useState(false); const handleSend async () { if (!input.trim()) return; const userMessage { role: user, content: input }; const updatedMessages [...messages, userMessage]; setMessages(updatedMessages); setInput(); setIsLoading(true); try { // 调用我们刚刚创建的API路由 const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messages: updatedMessages, model: claude-sonnet-4-6, // 可以改为其他模型ID }), }); const data await response.json(); if (response.ok) { setMessages([...updatedMessages, data.message]); } else { console.error(API错误:, data.error); setMessages([...updatedMessages, { role: assistant, content: 抱歉请求失败了。 }]); } } catch (error) { console.error(网络错误:, error); setMessages([...updatedMessages, { role: assistant, content: 网络连接出现问题。 }]); } finally { setIsLoading(false); } }; return ( div style{{ padding: 2rem, maxWidth: 600px, margin: 0 auto }} h1Taotoken AI对话Demo/h1 div style{{ border: 1px solid #ccc, height: 400px, overflowY: auto, padding: 1rem, marginBottom: 1rem }} {messages.map((msg, idx) ( div key{idx} style{{ textAlign: msg.role user ? right : left, margin: 0.5rem 0 }} strong{msg.role user ? 你 : AI}:/strong {msg.content} /div ))} {isLoading divAI正在思考.../div} /div div input typetext value{input} onChange{(e) setInput(e.target.value)} onKeyDown{(e) e.key Enter handleSend()} placeholder输入你的问题... style{{ width: 70%, padding: 0.5rem, marginRight: 0.5rem }} disabled{isLoading} / button onClick{handleSend} disabled{isLoading} {isLoading ? 发送中... : 发送} /button /div /div ); }这个前端页面包含了输入框、发送按钮和消息历史展示区。当用户发送消息时它会将整个对话历史包括用户的新消息发送到我们创建的/api/chat路由。服务端路由处理完大模型调用后将AI的回复返回前端再将其添加到消息列表中展示出来。5. 运行与后续步骤现在所有代码已经就绪。在项目根目录下运行npm run dev启动开发服务器然后在浏览器中打开http://localhost:3000。你应该能看到一个简单的聊天界面。尝试发送一条消息如果一切配置正确你将很快收到AI模型的回复。这个Demo实现了最核心的集成流程。在此基础上你可以根据实际需求进行扩展例如添加流式响应Streaming以获得更快的响应体验实现更复杂的对话历史管理或者在前端增加模型切换下拉框让用户可以选择Taotoken平台上的不同模型。所有可用的模型ID都可以在Taotoken的模型广场页面找到。通过以上步骤你成功地在Next.js全栈应用中安全地集成了Taotoken的大模型能力。这种模式将敏感的API密钥保留在服务端避免了客户端暴露的风险同时为前端提供了一个简洁的接口是生产级应用推荐的做法。希望这篇教程能帮助你快速启动项目。更多关于模型选择、高级API用法和用量管理的细节可以参考 Taotoken 平台的官方文档。 告别海外账号与网络限制稳定直连全球优质大模型限时半价接入中。 点击领取海量免费额度