绿然智老照片修复器
58.03M · 2026-02-12
在传统模式（Blocking UI）下，如果大模型生成一篇 500 字的文章需要 10 秒，用户就必须在白屏前干等 10 秒。 而在 流式模式（Streaming UI） 下，模型生成第一个字时，前端就能立即显示。
Vercel AI SDK 的核心 streamText 函数让这一过程变得极度简单。
创建一个文件夹并初始化：
Bash
mkdir ai-streaming-demo
cd ai-streaming-demo
npm init -y
我们需要安装 ai（核心库）和 @ai-sdk/openai（兼容层）。 为什么装 openai？因为绝大多数国内大模型（DeepSeek, Moonshot, Qwen）都完美兼容 OpenAI 的接口协议！这是最通用的方案。
Bash
npm install ai @ai-sdk/openai dotenv
# 如果使用 TypeScript (推荐)
npm install -D tsx typescript @types/node
我们将创建一个名为 index.ts 的文件，演示如何在 Node.js 环境下通过流式传输调用 DeepSeek。
国内大模型通常提供“OpenAI 兼容接口”，我们只需要修改 baseURL 和 apiKey。
支持列表参考：
在项目根目录新建 index.ts：
TypeScript
import { createOpenAI } from '@ai-sdk/openai';
import { streamText } from 'ai';
import dotenv from 'dotenv';
// 加载环境变量
dotenv.config();
// 1. 配置国内大模型适配器
// 这里以 DeepSeek 为例
const deepseek = createOpenAI({
baseURL: 'https://api.deepseek.com', // 关键：替换为国内模型的 Base URL
apiKey: process.env.DEEPSEEK_API_KEY, // 你的 API Key
});
// 或者配置 Kimi (Moonshot)
// const moonshot = createOpenAI({
// baseURL: 'https://api.moonshot.cn/v1',
// apiKey: process.env.MOONSHOT_API_KEY,
// });
async function main() {
console.log(' 正在连接 DeepSeek V3...n');
// 2. 发起流式请求
const result = streamText({
// 使用 'deepseek-chat' 模型 (对应 DeepSeek-V3)
model: deepseek('deepseek-chat'),
prompt: '请用两句诗形容一下程序员的周五傍晚。',
// 可选参数
temperature: 0.7,
});
// 3. 处理流式输出 (核心部分)
// result.textStream 是一个异步可迭代对象 (Async Iterable)
for await (const textPart of result.textStream) {
// process.stdout.write 不会换行，实现打字机效果
process.stdout.write(textPart);
}
console.log('nn 生成完毕！');
}
main().catch(console.error);
在根目录创建 .env 文件：
代码段
DEEPSEEK_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx
运行代码：
Bash
npx tsx index.ts
你将看到终端里字是一个接一个“蹦”出来的，而不是卡顿很久后一次性出现。这就是 Streaming 的魅力！
如果你是前端开发者，通常会在 Next.js (App Router) 中使用它。Vercel AI SDK 提供了 toDataStreamResponse 来直接将流返回给前端。
新建 app/api/chat/route.ts:
TypeScript
import { createOpenAI } from '@ai-sdk/openai';
import { streamText } from 'ai';
const deepseek = createOpenAI({
baseURL: 'https://api.deepseek.com',
apiKey: process.env.DEEPSEEK_API_KEY,
});
export async function POST(req: Request) {
const { messages } = await req.json();
const result = streamText({
model: deepseek('deepseek-chat'),
messages, // 自动处理上下文
});
// 核心魔法：直接转换为流式响应对象返回给前端
return result.toDataStreamResponse();
}
前端（React 组件）配合 useChat 即可零配置使用：
TypeScript
'use client';
import { useChat } from 'ai/react';
export default function Page() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div>
{messages.map(m => (
<div key={m.id}>
{m.role === 'user' ? 'User: ' : 'AI: '}
{m.content}
</div>
))}
<form onSubmit={handleSubmit}>
<input value={input} onChange={handleInputChange} />
</form>
</div>
);
}
国内组件优先：虽然 Vercel AI SDK 官方有很多 Providers，但利用 createOpenAI + baseURL 是连接国内大模型最稳定、最轻量的方式，不需要等待官方出专门的 SDK 包。
模型名称对应：
deepseek-chat (V3), deepseek-reasoner (R1)moonshot-v1-8k, moonshot-v1-32kqwen-plus, qwen-max错误处理：如果遇到 401，检查 API Key；如果遇到 404，检查 baseURL 后面是否多加了或少加了 /v1（DeepSeek 不需要 /v1 结尾，但某些库可能自动处理，建议严格按照厂商文档写 Base URL）。
希望这篇教程能帮你快速打通国内大模型的流式开发之路！
