通过 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 openai

2. 配置 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 type="submit">发送</button> </form> </div> ); }

5. 部署与安全注意事项

在部署到生产环境前，请确保：

1. API Key 通过环境变量注入，不要硬编码在源码中
2. 在 Next.js 配置中正确设置环境变量加载
3. 考虑为 API 路由添加速率限制
4. 在 Taotoken 控制台设置用量告警

如需进一步了解 Taotoken 的功能和最新模型支持，可以访问 Taotoken 官方站点。