Vercel AI SDK 多框架流式聊天实战：Nuxt、SvelteKit、React 一次跑通

Vercel AI SDK 多框架流式聊天实战Nuxt、SvelteKit、React 一次跑通【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/aiVercel AI SDK 是 Next.js 团队出品的 TypeScript AI 工具包用一套 API 覆盖 React、Vue、Svelte、Angular 四个框架服务端流式输出、客户端状态管理、工具调用开箱即用。从一个聊天框说起你在 Nuxt 里做一个聊天界面用户敲下问题AI 的回答要一个字一个字地蹦出来中途还能点停止还能调工具查天气。如果自己拼 SSE 解析、消息数组、流中断前后端至少各写 200 行胶水代码。Vercel AI SDK 把这条链路拆成两段服务端用streamText产出流框架适配器在客户端把流还原成响应式消息列表。 能力速览能力对应包服务端流式核心streamText、toUIMessageStreamaiReact 端useChat等 Hookai-sdk/reactVue/Nuxt 端Chat类ai-sdk/vueSvelteKit 端Chat类含客户端工具ai-sdk/svelteAngular 端服务封装ai-sdk/angular模型提供商接入OpenAI、Anthropic、Google 等ai-sdk/openai等 provider 包注意一点仓库里没有ai-sdk/solid。如果你看到的教程让你安装它那个教程已经过时了。当前官方适配器就是上表这五个方向。 3步跑通流式聊天以 Nuxt Vue 为主线跑通一个最小可运行的流式聊天。第 1 步装依赖pnpm add ai ai-sdk/openai ai-sdk/vue第 2 步服务端开一个流式端点在 Nuxt 的server/api/chat.ts里用streamText调模型再用toUIMessageStream把流转成 UI 消息流最后交给createUIMessageStreamResponse返回——它会自动处理text/event-stream响应头参考实现见examples/nuxt-openai/server/api/chat.ts。第 3 步客户端挂上响应式状态// pages/chat.vue import { Chat } from ai-sdk/vue import { ref, computed } from vue const chat new Chat({}) // 默认对接 /api/chat const input ref() const disabled computed(() chat.status ! ready) function handleSubmit(e: Event) { e.preventDefault() chat.sendMessage({ text: input.value }) input.value }模板里v-for遍历chat.messages每条消息渲染parts中的text部分chat.status streaming时显示停止按钮调chat.stop出错时用chat.regenerate()重试。完整页面在examples/nuxt-openai/pages/index.vue。到这里流式打字效果、停止、重试都有了前后端合计不到 50 行。️ 深挖流式管线与客户端工具Nuxt 服务端流是怎么组装的服务端只干三件事streamText({ model, messages })拿到文本流toUIMessageStream把它转成 UI 消息流协议createUIMessageStreamResponse包装成 SSE 响应。关键在convertToModelMessages——它把客户端发来的 UI 消息含工具调用片段转成模型能理解的格式这条转换藏在examples/nuxt-openai/server/api/chat.ts的onEnd钩子旁想存库、记 token 用量就挂在那里。SvelteKit 客户端工具在浏览器里执行Svelte 5 的Chat类支持客户端工具模型发起toolCall后流会挂起等你的onToolCall回传输出才继续script langts import { Chat } from ai-sdk/svelte const chat new Chat({ async onToolCall({ toolCall }) { const cities [New York, Chicago, San Francisco] await chat.addToolOutput({ toolCallId: toolCall.toolCallId, tool: toolCall.toolName, output: cities[Math.floor(Math.random() * 3)], }) }, }) /scriptchat.messages是$state驱动的响应式数组chat.status用来禁用输入框。带确认按钮的完整交互版在examples/sveltekit-openai/src/routes/chat/page.svelte服务端路由在examples/sveltekit-openai/src/routes/api/chat/server.ts。React 这边不展开ai-sdk/react继续走useChat这类 HookAPI 面与上面的Chat类一一对应messages、sendMessage、stop、regenerate换框架时概念零成本迁移。⚠️ 避坑与实战经验现象按老教程写useChat拿到 undefined。→原因Vue/Svelte 适配器已改造成Chat类Hook 式 API 只保留在 React 侧。→做法以仓库examples/下的代码为准Vue 写new Chat({})别混用旧 Hook 写法。现象页面一直 Loading流不吐字。→原因手动fetch后忘了设置 SSE 响应头或代理层缓冲了响应体。→做法服务端统一用createUIMessageStreamResponse返回中间件关掉 buffering。现象SvelteKit 里模型调了工具后界面卡住不动。→原因客户端工具执行后没回传输出流在等addToolOutput。→做法在onToolCall里拿到结果后务必调用chat.addToolOutput我在 SvelteKit 里就是这个坑卡了半小时。现象pnpm add后构建报引擎不兼容。→原因各包engines要求node 22。→做法开项目前先node -v低于 22 直接升版本再谈其他。选型建议一句话全栈项目跟框架走纯 API 服务只装ai一个包。你的场景选哪个理由Next.js / React SPAai-sdk/reactHook 生态最全SSR 支持最成熟Nuxt 全栈ai-sdk/vue服务端端点 客户端Chat一套示例直接抄SvelteKitai-sdk/svelte唯一原生支持浏览器端工具执行的适配器Angularai-sdk/angular服务注入式适合已有 DI 架构纯后端 / 多前端共享ai provider 包无框架绑定自己管理响应式状态把examples/nuxt-openai或examples/sveltekit-openai克隆下来跑一遍比读十页文档快。仓库克隆地址git clone https://gitcode.com/GitHub_Trending/ai/ai官方文档覆盖全部 API 参考贡献规范在contributing/目录下动手前翻一遍能少走弯路。【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考