快速上手5 分钟跑通第一个 AI SDK 例子《读懂 Vercel AI SDK》系列第 1 篇。上一篇讲了它是什么、由哪几块组成。这一篇不谈概念,直接动手:从零跑通第一个例子,再升级成一个能流式对话的聊天应用。一、准备工作:装包 配 Key新建一个项目,装上核心依赖:mkdirmy-ai-appcdmy-ai-apppnpminitpnpmaddai zod dotenvpnpmadd-Dtypes/node tsx typescriptai—— AI SDK 本体zod—— 结构化输出要用的 schema 库(后面几篇会用到)dotenv—— 读环境变量然后配一个 API Key。AI SDK 默认走Vercel AI Gateway,只要一个变量就能调各家模型:# .envAI_GATEWAY_API_KEY你的_keyKey 从哪来?登录 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发一次请求:import{generateText}fromai;importdotenv/config;asyncfunctionmain(){const{text}awaitgenerateText({model:openai/gpt-5.2,prompt:用一句话介绍 Vercel AI SDK。,});console.log(text);}main().catch(console.error);跑起来:pnpmtsx index.ts终端里就能看到模型的回答。恭喜,这就是一个完整的 AI 调用了——注意model那一行,以后想换模型,改的就是它。三、升级:变成打字机(流式)上面的例子要等模型全部生成完才输出。想要一个字一个字冒出来的效果,把generateText换成streamText,从textStream里逐段读:import{streamText}fromai;importdotenv/config;asyncfunctionmain(){constresultstreamText({model:openai/gpt-5.2,prompt:写一段关于秋天的短文。,});forawait(constdeltaofresult.textStream){process.stdout.write(delta);// 边生成边打印}}main().catch(console.error);注意streamText不用await——它立刻返回,内容通过textStream异步流出。(这两个函数的细节,下一篇会专门展开。)四、做成真正的应用:Next.js 聊天命令行跑通了,再看怎么变成一个网页聊天。这次用 Next.js,先起一个项目并装依赖:pnpmcreate next-applatest my-chat# 一路回车用默认配置即可cdmy-chatpnpmaddai ai-sdk/react zod然后把上一节那个AI_GATEWAY_API_KEY放进项目根目录的.env.local(Next.js 用这个文件名):# .env.localAI_GATEWAY_API_KEY你的_key一个网页聊天需要一后端一前端两个文件。后端——app/api/chat/route.ts,接收消息、用streamText生成、把流吐回去:import{streamText,convertToModelMessages,UIMessage}fromai;exportasyncfunctionPOST(req:Request){const{messages}:{messages:UIMessage[]}awaitreq.json();constresultstreamText({model:openai/gpt-5.2,messages:convertToModelMessages(messages),});returnresult.toUIMessageStreamResponse();// 一步转成前端能消费的流式响应}前端——app/page.tsx,用useChat接管所有聊天状态:use client;import{useChat}fromai-sdk/react;import{useState}fromreact;exportdefaultfunctionChat(){const[input,setInput]useState();const{messages,sendMessage}useChat();return(div{messages.map(m(div key{m.id}b{m.roleuser?你:AI}/b{m.parts.map((p,i)(p.typetext?span key{i}{p.text}/span:null))}/div))}form onSubmit{e{e.preventDefault();sendMessage({text:input});setInput();}}input value{input}onChange{esetInput(e.target.value)}placeholder说点什么…//form/div);}就这些。启动开发服务器,打开浏览器就能对话了:pnpmdev# 然后访问 http://localhost:3000useChat自动帮你处理了发请求、流式接收、消息状态、打字机效果——你只写了渲染。一个能实时对话的聊天框就跑起来了。五、你刚刚用到了整个系列的骨架别看例子小,它其实已经串起了后面每一篇的主题:你写的对应后面哪篇generateText/streamText第 2 篇 · 文本生成与流式zod(还没用上,但装好了)第 3 篇 · 结构化输出useChat第 6 篇 · AI SDK UItoUIMessageStreamResponse背后的流第 7 篇 · Stream Protocol小结三步起步:pnpm add ai→ 配AI_GATEWAY_API_KEY→ 写第一个generateText。要打字机效果就换streamText,从textStream逐段读,记得它不用await。做成网页应用只要两个文件:后端streamTexttoUIMessageStreamResponse(),前端useChat。换模型永远只改model那一行。下一篇,我们把这里一带而过的两个核心函数讲透:文本生成与流式。参考AI SDK · Getting Started (Node.js) · Next.js App Router