🚀 Vercel AI SDK 使用指南：流式传输 (Streaming)

🌟 为什么选择流式传输 (Streaming)？

在传统模式（Blocking UI）下，如果大模型生成一篇 500 字的文章需要 10 秒，用户就必须在白屏前干等 10 秒。而在 流式模式（Streaming UI） 下，模型生成第一个字时，前端就能立即显示。

传统模式：请求 -> 等待10s -> 一次性显示全部 -> 结束
流式模式：请求 -> 0.5s显示首字 -> 持续蹦字 -> 结束

Vercel AI SDK 的核心 streamText 函数让这一过程变得极度简单。

🛠️ 准备工作

1. 环境要求

Node.js 18+
一个国内大模型的 API Key（本文以 DeepSeek 为例，Kimi/通义千问同理）

2. 初始化项目

创建一个文件夹并初始化：

Bash

bash 复制代码

mkdir ai-streaming-demo
cd ai-streaming-demo
npm init -y

3. 安装核心依赖

我们需要安装 ai（核心库）和 @ai-sdk/openai（兼容层）。 为什么装 openai？因为绝大多数国内大模型（DeepSeek, Moonshot, Qwen）都完美兼容 OpenAI 的接口协议！这是最通用的方案。

Bash

bash 复制代码

npm install ai @ai-sdk/openai dotenv
# 如果使用 TypeScript (推荐)
npm install -D tsx typescript @types/node

💻 实战代码：接入国内大模型

我们将创建一个名为 index.ts 的文件，演示如何在 Node.js 环境下通过流式传输调用 DeepSeek。

第一步：配置"万能适配器"

国内大模型通常提供"OpenAI 兼容接口"，我们只需要修改 baseURL 和 apiKey。

支持列表参考：

DeepSeek (深度求索) : https://api.deepseek.com
Moonshot (Kimi) : https://api.moonshot.cn/v1
阿里云通义千问 : https://dashscope.aliyuncs.com/compatible-mode/v1

第二步：编写流式代码

在项目根目录新建 index.ts：

TypeScript

javascript 复制代码

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('\n\n✅ 生成完毕！');
}

main().catch(console.error);

第三步：运行

在根目录创建 .env 文件：

代码段
ini 复制代码
```
DEEPSEEK_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx
```
运行代码：

Bash
复制代码
```
npx tsx index.ts
```

你将看到终端里字是一个接一个"蹦"出来的，而不是卡顿很久后一次性出现。这就是 Streaming 的魅力！

🧐 进阶：Next.js 中的流式响应

如果你是前端开发者，通常会在 Next.js (App Router) 中使用它。Vercel AI SDK 提供了 toDataStreamResponse 来直接将流返回给前端。

新建 app/api/chat/route.ts:

TypeScript

javascript 复制代码

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

javascript 复制代码

'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: deepseek-chat (V3), deepseek-reasoner (R1)
- Kimi: moonshot-v1-8k, moonshot-v1-32k
- Qwen: qwen-plus, qwen-max
错误处理 ：如果遇到 401，检查 API Key；如果遇到 404，检查 baseURL 后面是否多加了或少加了 /v1（DeepSeek 不需要 /v1 结尾，但某些库可能自动处理，建议严格按照厂商文档写 Base URL）。

希望这篇教程能帮你快速打通国内大模型的流式开发之路！🚀