通过 Nodejs 和 Taotoken 为你的 Nextjs 应用添加智能聊天功能

通过 Nodejs 和 Taotoken 为你的 Nextjs 应用添加智能聊天功能1. 环境准备与依赖安装在开始集成 Taotoken 服务前确保你的 Nextjs 项目已初始化并运行在 Node.js 环境中。首先需要安装官方 OpenAI 客户端库该库兼容 Taotoken 的 API 规范。在项目根目录执行以下命令npm install openai如果你使用 TypeScript建议同时安装类型定义包以获取更好的类型提示npm install --save-dev types/openai2. 配置 Taotoken 访问凭证为了安全地管理 API 访问建议将 Taotoken 的 API Key 存储在环境变量中。在 Nextjs 项目中创建或修改.env.local文件添加以下配置TAOTOKEN_API_KEYyour_api_key_here NEXT_PUBLIC_TAOTOKEN_BASE_URLhttps://taotoken.net/api注意NEXT_PUBLIC_前缀使得变量可在客户端访问但在此场景中我们仅在服务端使用因此实际部署时可移除此前缀。你可以在 Taotoken 控制台获取有效的 API Key。3. 创建聊天 API 路由Nextjs 的 API Routes 功能允许我们在/pages/api目录下创建服务端接口。新建一个聊天补全接口文件/pages/api/chat.tsimport { OpenAI } from openai; import type { NextApiRequest, NextApiResponse } from next; const openai new OpenAI({ apiKey: process.env.TAOTOKEN_API_KEY, baseURL: process.env.NEXT_PUBLIC_TAOTOKEN_BASE_URL, }); 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 openai.chat.completions.create({ model: claude-sonnet-4-6, // 可从模型广场获取其他可用模型ID messages, }); return res.status(200).json(completion.choices[0]?.message); } catch (error) { console.error(Chat completion error:, error); return res.status(500).json({ error: Internal server error }); } }4. 前端调用示例在 Nextjs 页面组件中你可以通过 fetch 调用刚创建的 API 路由。以下是一个简单的聊天界面实现示例import { useState } from react; export default function ChatPage() { const [messages, setMessages] useStateArray{role: string, content: string}([]); const [input, setInput] useState(); const handleSubmit async (e: React.FormEvent) { e.preventDefault(); const userMessage { role: user, content: input }; const newMessages [...messages, userMessage]; setMessages(newMessages); setInput(); const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ messages: newMessages }), }); if (response.ok) { const assistantMessage await response.json(); setMessages([...newMessages, assistantMessage]); } }; return ( div div {messages.map((msg, i) ( div key{i} strong{msg.role}:/strong {msg.content} /div ))} /div form onSubmit{handleSubmit} input value{input} onChange{(e) setInput(e.target.value)} placeholderType your message... / button typesubmitSend/button /form /div ); }5. 部署与调试建议当本地开发完成后部署到生产环境时需要注意确保生产环境已正确设置TAOTOKEN_API_KEY环境变量如果使用 Vercel 部署可在项目设置的 Environment Variables 页面添加考虑添加速率限制中间件防止滥用对于复杂场景建议在 API 路由中添加输入验证调试时如果遇到 401 错误请检查 API Key 是否正确若遇到模型不可用错误可登录 Taotoken 控制台查看当前可用模型列表。