快速上手：5 分钟跑通第一个 AI SDK 例子

《读懂 Vercel AI SDK》系列第 1 篇。上一篇讲了它是什么、由哪几块组成。这一篇不谈概念,直接动手:从零跑通第一个例子,再升级成一个能流式对话的聊天应用。

一、准备工作:装包 + 配 Key

新建一个项目,装上核心依赖:

bash 复制代码

mkdir my-ai-app && cd my-ai-app
pnpm init
pnpm add ai zod dotenv
pnpm add -D @types/node tsx typescript

ai ------ AI SDK 本体
zod ------ 结构化输出要用的 schema 库(后面几篇会用到)
dotenv ------ 读环境变量

然后配一个 API Key。AI SDK 默认走 Vercel AI Gateway,只要一个变量就能调各家模型:

bash 复制代码

# .env
AI_GATEWAY_API_KEY=你的_key

Key 从哪来?登录 Vercel 控制台 → AI Gateway,创建一个 API Key 即可,一个 Key 就能调 OpenAI / Anthropic / Google 等各家模型。

也可以不用 Gateway,直接装某家 provider(比如 pnpm add @ai-sdk/openai),把变量换成该家的 Key(如 OPENAI_API_KEY),再 import { openai } from '@ai-sdk/openai'。两种方式在上层代码里用法一致。

二、第一个例子:让模型说句话

新建 index.ts,用 generateText 发一次请求:

typescript 复制代码

import { generateText } from 'ai';
import 'dotenv/config';

async function main() {
  const { text } = await generateText({
    model: 'openai/gpt-5.2',
    prompt: '用一句话介绍 Vercel AI SDK。',
  });
  console.log(text);
}

main().catch(console.error);

跑起来:

bash 复制代码

pnpm tsx index.ts

终端里就能看到模型的回答。恭喜,这就是一个完整的 AI 调用了 ------注意 model 那一行,以后想换模型,改的就是它。

三、升级:变成打字机(流式)

上面的例子要等模型全部生成完才输出。想要"一个字一个字冒出来"的效果,把 generateText 换成 streamText,从 textStream 里逐段读:

typescript 复制代码

import { streamText } from 'ai';
import 'dotenv/config';

async function main() {
  const result = streamText({
    model: 'openai/gpt-5.2',
    prompt: '写一段关于秋天的短文。',
  });

  for await (const delta of result.textStream) {
    process.stdout.write(delta); // 边生成边打印
  }
}

main().catch(console.error);

注意 streamText 不用 await ------它立刻返回,内容通过 textStream 异步流出。(这两个函数的细节,下一篇会专门展开。)

四、做成真正的应用:Next.js 聊天

命令行跑通了,再看怎么变成一个网页聊天。这次用 Next.js,先起一个项目并装依赖:

bash 复制代码

pnpm create next-app@latest my-chat   # 一路回车用默认配置即可
cd my-chat
pnpm add ai @ai-sdk/react zod

然后把上一节那个 AI_GATEWAY_API_KEY 放进项目根目录的 .env.local(Next.js 用这个文件名):

bash 复制代码

# .env.local
AI_GATEWAY_API_KEY=你的_key

一个网页聊天需要一后端一前端两个文件。

后端 ------app/api/chat/route.ts,接收消息、用 streamText 生成、把流吐回去:

typescript 复制代码

import { streamText, convertToModelMessages, UIMessage } from 'ai';

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model: 'openai/gpt-5.2',
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse(); // 一步转成前端能消费的流式响应
}

前端 ------app/page.tsx,用 useChat 接管所有聊天状态:

typescript 复制代码

'use client';
import { useChat } from '@ai-sdk/react';
import { useState } from 'react';

export default function Chat() {
  const [input, setInput] = useState('');
  const { messages, sendMessage } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <b>{m.role === 'user' ? '你' : 'AI'}：</b>
          {m.parts.map((p, i) => (p.type === 'text' ? <span key={i}>{p.text}</span> : null))}
        </div>
      ))}
      <form onSubmit={e => { e.preventDefault(); sendMessage({ text: input }); setInput(''); }}>
        <input value={input} onChange={e => setInput(e.target.value)} placeholder="说点什么..." />
      </form>
    </div>
  );
}

就这些。启动开发服务器,打开浏览器就能对话了:

bash 复制代码

pnpm dev   # 然后访问 http://localhost:3000

useChat 自动帮你处理了发请求、流式接收、消息状态、打字机效果------你只写了渲染。一个能实时对话的聊天框就跑起来了。

五、你刚刚用到了整个系列的骨架

别看例子小,它其实已经串起了后面每一篇的主题:

你写的	对应后面哪篇
`generateText` / `streamText`	$第 2 篇 \cdot 文本生成与流式$
`zod`(还没用上,但装好了)	$第 3 篇 \cdot 结构化输出$
`useChat`	$第 6 篇 \cdot AI SDK UI$
`toUIMessageStreamResponse` 背后的流	$第 7 篇 \cdot Stream Protocol$

小结

三步起步:pnpm add ai → 配 AI_GATEWAY_API_KEY → 写第一个 generateText。
要打字机效果就换 streamText,从 textStream 逐段读,记得它不用 await。
做成网页应用只要两个文件:后端 streamText + toUIMessageStreamResponse(),前端 useChat。
换模型永远只改 model 那一行。

下一篇,我们把这里一带而过的两个核心函数讲透:文本生成与流式。

参考：AI SDK · Getting Started (Node.js) · Next.js App Router