当前位置：首页 > news >正文

从零开始使用Taotoken在五分钟内搭建一个AI对话演示页面

news 2026/5/22 19:25:37

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度

从零开始使用Taotoken在五分钟内搭建一个AI对话演示页面

作为一名前端开发者，当你需要快速验证一个AI想法或向团队展示大模型能力时，一个可交互的演示页面是最直观的方式。本文将记录我使用Taotoken平台，从注册到完成一个可运行的AI对话演示应用的全过程。整个过程聚焦于实际操作的流畅度和初始响应的即时体感。

1. 准备工作：获取API密钥与选择模型

开始编码前，你需要一个能调用大模型的通行证。我首先访问了Taotoken的官方网站进行注册。注册流程很常规，验证邮箱后即可登录控制台。

在控制台的“API密钥”管理页面，我点击“创建新密钥”按钮，系统立即生成了一个以sk-开头的密钥串。我将其复制并妥善保存，这是后续所有调用的凭证。接着，我浏览了“模型广场”，这里聚合了多家厂商的模型。对于一个简单的对话演示，我选择了claude-sonnet-4-6这个模型，它的模型ID就是我在代码中需要指定的字符串。整个过程，从注册到拿到密钥和模型ID，耗时不到两分钟。

2. 构建后端：一个极简的Node.js服务

演示应用需要一个后端服务来安全地调用Taotoken的API，避免将API密钥暴露在前端。我选择Node.js和Express框架，因为它足够轻量且快速。

我创建了一个新的项目目录，运行npm init -y初始化项目，然后安装必要的依赖：npm install express openai cors。其中openai库是官方SDK，它天然兼容Taotoken的接口。

接下来，我创建了server.js文件，编写核心服务代码。代码的核心是初始化OpenAI客户端，这里的关键是将base_url指向Taotoken的兼容端点。然后，我创建了一个/chat的POST路由来处理前端的对话请求。

// server.js import express from 'express'; import OpenAI from 'openai'; import cors from 'cors'; const app = express(); app.use(cors()); // 允许前端跨域请求 app.use(express.json()); // 初始化 OpenAI 客户端，指向 Taotoken const client = new OpenAI({ apiKey: process.env.TAOTOKEN_API_KEY, // 从环境变量读取密钥 baseURL: 'https://taotoken.net/api', // 关键：使用Taotoken的兼容端点 }); app.post('/chat', async (req, res) => { try { const { message } = req.body; const completion = await client.chat.completions.create({ model: 'claude-sonnet-4-6', // 使用在模型广场选定的模型 messages: [{ role: 'user', content: message }], stream: false, // 演示先用非流式 }); res.json({ reply: completion.choices[0]?.message?.content }); } catch (error) { console.error(error); res.status(500).json({ error: '请求处理失败' }); } }); const PORT = 3000; app.listen(PORT, () => { console.log(`后端服务运行在 http://localhost:${PORT}`); });

在启动服务前，我需要设置环境变量。在终端中执行export TAOTOKEN_API_KEY=你的API密钥（Windows系统用set命令），然后运行node server.js。看到服务成功启动的日志，后端部分就完成了。

3. 实现前端：一个简洁的HTML交互界面

后端服务就绪后，我创建了一个index.html文件来构建用户界面。目标是简洁明了：一个输入框、一个发送按钮、一个显示对话历史的区域。

我使用原生JavaScript的fetchAPI来调用我们刚写好的后端接口。为了有更好的视觉反馈，我在请求发出和收到响应时，简单控制了按钮的状态和添加了加载提示。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI对话演示</title> <style> body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; } #chatBox { border: 1px solid #ccc; height: 400px; overflow-y: auto; padding: 10px; margin-bottom: 10px; } .message { margin-bottom: 10px; } .user { color: blue; } .assistant { color: green; } #inputArea { display: flex; } #userInput { flex-grow: 1; padding: 10px; } button { padding: 10px 20px; } </style> </head> <body> <h1>AI对话演示 (基于Taotoken)</h1> <div id="chatBox"></div> <div id="inputArea"> <input type="text" id="userInput" placeholder="输入你的问题..." /> <button id="sendBtn" onclick="sendMessage()">发送</button> </div> <script> const chatBox = document.getElementById('chatBox'); const userInput = document.getElementById('userInput'); const sendBtn = document.getElementById('sendBtn'); function addMessage(role, content) { const msgDiv = document.createElement('div'); msgDiv.className = `message ${role}`; msgDiv.innerHTML = `<strong>${role}:</strong> ${content}`; chatBox.appendChild(msgDiv); chatBox.scrollTop = chatBox.scrollHeight; } async function sendMessage() { const message = userInput.value.trim(); if (!message) return; addMessage('user', message); userInput.value = ''; sendBtn.disabled = true; sendBtn.textContent = '思考中...'; try { const response = await fetch('http://localhost:3000/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message }) }); const data = await response.json(); addMessage('assistant', data.reply || '未收到回复'); } catch (error) { addMessage('system', '请求出错: ' + error.message); } finally { sendBtn.disabled = false; sendBtn.textContent = '发送'; } } userInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); }); </script> </body> </html>

我将这个HTML文件放在任何静态文件服务器下，或者直接双击在浏览器中打开（需确保后端服务在运行）。现在，一个具备完整前后端的AI对话演示应用就构建完成了。