通过 Node.js 和 Taotoken 为你的 Next.js 应用添加 AI 聊天功能
通过 Node.js 和 Taotoken 为你的 Next.js 应用添加 AI 聊天功能1. 准备工作在开始集成之前确保你已经完成以下准备工作。首先访问 Taotoken 控制台创建一个 API Key。登录后在「API 密钥管理」页面点击「新建密钥」建议为开发环境单独创建密钥并设置合理的权限范围。同时在「模型广场」查看当前可用的模型 ID例如claude-sonnet-4-6或gpt-4-turbo。对于 Next.js 项目你需要安装必要的依赖。如果使用 Next.js 的 App Router确保你的项目运行在 Node.js 18 或更高版本。打开终端在项目根目录执行以下命令安装 OpenAI 官方 npm 包npm install openai2. 配置 Taotoken 客户端在 Next.js 项目中我们推荐将 Taotoken 客户端配置封装为独立模块。在lib目录下创建taotoken.js文件写入以下内容import OpenAI from openai; const client new OpenAI({ apiKey: process.env.TAOTOKEN_API_KEY, baseURL: https://taotoken.net/api, }); export default client;注意将TAOTOKEN_API_KEY添加到你的环境变量中。在项目根目录创建.env.local文件并写入TAOTOKEN_API_KEY你的实际API密钥3. 创建 API 路由接下来我们创建一个 Next.js API 路由来处理聊天请求。如果你使用 Pages Router在pages/api下新建chat.js如果使用 App Router则在app/api/chat/route.js中编写以下代码import client from /lib/taotoken; export async function POST(request) { try { const { messages } await request.json(); const completion await client.chat.completions.create({ model: claude-sonnet-4-6, messages, }); return new Response(JSON.stringify(completion.choices[0].message), { headers: { Content-Type: application/json }, }); } catch (error) { return new Response( JSON.stringify({ error: error.message }), { status: 500 } ); } }4. 前端页面集成现在可以创建一个简单的聊天界面来测试我们的集成。在页面组件中如app/page.js或pages/index.js添加以下交互逻辑use client; import { useState } from react; export default function ChatPage() { const [messages, setMessages] useState([]); const [input, setInput] useState(); const handleSubmit async (e) { e.preventDefault(); const userMessage { role: user, content: input }; setMessages((prev) [...prev, userMessage]); setInput(); const response await fetch(/api/chat, { method: POST, body: JSON.stringify({ messages: [...messages, userMessage], }), }); const { content } await response.json(); setMessages((prev) [...prev, { role: assistant, content }]); }; return ( div div {messages.map((msg, i) ( div key{i}{msg.content}/div ))} /div form onSubmit{handleSubmit} input value{input} onChange{(e) setInput(e.target.value)} / button typesubmit发送/button /form /div ); }5. 部署与安全注意事项在部署到生产环境前请确保API Key 通过环境变量注入不要硬编码在源码中在 Next.js 配置中正确设置环境变量加载考虑为 API 路由添加速率限制在 Taotoken 控制台设置用量告警如需进一步了解 Taotoken 的功能和最新模型支持可以访问 Taotoken 官方站点。