使用Nodejs与Taotoken为你的Nextjs项目快速集成AI对话能力

使用 Node.js 与 Taotoken 为你的 Next.js 项目快速集成 AI 对话能力1. 准备工作在开始集成前请确保已具备以下条件一个可运行的 Next.js 项目版本 12 或更高以及 Taotoken 平台的 API Key。API Key 可在 Taotoken 控制台的「API 密钥」页面创建模型 ID 则需在「模型广场」查看。建议将敏感信息存储在环境变量中避免直接硬编码。2. 安装依赖在 Next.js 项目根目录下执行以下命令安装 OpenAI 官方 Node.js 客户端库npm install openai如果项目使用 TypeScript建议同时安装类型定义包通常作为 devDependencynpm install --save-dev types/node3. 配置环境变量在项目根目录创建或修改.env.local文件添加以下变量TAOTOKEN_API_KEYyour_api_key_here NEXT_PUBLIC_DEFAULT_MODELclaude-sonnet-4-6注意.env.local应被加入.gitignore以避免密钥泄露。在 Next.js 中客户端可访问的变量需以NEXT_PUBLIC_为前缀。4. 创建 API 路由在pages/api目录下新建chat.ts文件实现基础对话接口import { OpenAI } from openai; import type { NextApiRequest, NextApiResponse } from next; const client new OpenAI({ apiKey: process.env.TAOTOKEN_API_KEY, baseURL: https://taotoken.net/api, }); export default async function handler( req: NextApiRequest, res: NextApiResponse ) { if (req.method ! POST) { return res.status(405).json({ error: Method not allowed }); } try { const { messages } req.body; const completion await client.chat.completions.create({ model: process.env.NEXT_PUBLIC_DEFAULT_MODEL, messages, }); return res.status(200).json(completion.choices[0]?.message); } catch (error) { console.error(API error:, error); return res.status(500).json({ error: Internal server error }); } }5. 实现流式响应可选如需支持流式传输修改接口以返回 ReadableStreamexport default async function handler( req: NextApiRequest, res: NextApiResponse ) { // ... 前置校验同上 try { const { messages } req.body; const stream await client.chat.completions.create({ model: process.env.NEXT_PUBLIC_DEFAULT_MODEL, messages, stream: true, }); res.setHeader(Content-Type, text/event-stream); res.setHeader(Cache-Control, no-cache); res.setHeader(Connection, keep-alive); for await (const chunk of stream) { const content chunk.choices[0]?.delta?.content || ; res.write(data: ${JSON.stringify({ content })}\n\n); } res.end(); } catch (error) { console.error(Stream error:, error); return res.status(500).json({ error: Internal server error }); } }6. 前端调用示例在 React 组件中调用该 APIasync function sendMessage(messages: Array{ role: string; content: string }) { const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ messages }), }); if (!response.ok) throw new Error(Network response was not ok); return await response.json(); } // 流式版本 async function* streamMessages(messages: Array{ role: string; content: string }) { const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ messages }), }); if (!response.body) throw new Error(No response body); const reader response.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).filter(line line.startsWith(data: )); for (const line of lines) { const data line.replace(/^data: /, ).trim(); if (data [DONE]) continue; yield JSON.parse(data).content; } } }7. 部署注意事项Vercel 部署时需要确保环境变量已正确配置在 Vercel 项目设置的「Environment Variables」页面添加TAOTOKEN_API_KEY重新部署项目使变量生效检查 Edge Function 区域是否支持流式响应默认配置通常已支持如需进一步了解 Taotoken 平台能力可访问 Taotoken 查看完整文档。