Vercel AI SDK v5 让 React 开发者可以将大语言模型 (LLM) 调用转移到服务器端，从而隐藏 API 密钥，并大幅降低在浏览器中流式传输文本块所带来的延迟。新的基于传输 (transport-based) 的架构还实现了状态处理的分离，使 UI 代码保持轻量化，而由 SDK 来管理流式传输、历史记录和工具调用。

为什么旧方法行不通

在 v5 版本之前，大多数 React 聊天机器人直接将模型的输出流式传输到客户端。这迫使开发者必须将 LLM 的密钥嵌入到前端代码中，从而在浏览器的网络检查器 (network inspector) 中暴露出来。团队还使用 useState 来缓冲每个传入的 token，导致每一个微小的文本块都会触发一次重新渲染 (re-render)。UI 会出现闪烁，代码也会变成一团乱麻般的 callback。

结果是：任何人都可以窃取密钥，而开发者在处理底层的状态逻辑 (state plumbing) 时，对话过程也会出现滞后。

v5 在底层做了哪些改变

  • 基于传输的架构 (Transport-Based Architecture) – SDK 现在将与 LLM 的连接视为一个模块化的传输层。调用源自服务器上的 API 路由，因此密钥永远不会离开后端。传输层抽象了流式传输协议，向前端交付干净且带有类型的消息流。

  • 类型化的工具调用 (Typed Tool Invocations) – 当模型决定调用工具（例如查询天气或获取日历）时，SDK 会将请求封装进一个类型化的有效载荷 (payload) 中。前端可以直接读取该 payload 的结构，从而消除了即时解析 (ad-hoc parsing) 的需求，并减少了运行时错误。

  • 解耦的状态管理 (Decoupled State Management) – useChat hook 不再强制使用单一的状态存储。它提供回调和工具函数，任何状态库（如 Zustand、Redux 或纯 React context）都可以使用。UI 组件专注于渲染，而 SDK 则负责处理繁重的逻辑。

实际工作流

  1. 服务端 LLM 逻辑 – 在 API 路由中调用 streamText（或等效的流式辅助函数）。SDK 通过安全连接将模型的输出流式传输回客户端，确保 API 密钥不会进入浏览器。
  2. 客户端 UI – 在 React 组件中导入 useChat。该 hook 会返回当前的对话列表、发送新用户输入的函数以及状态标志。由于状态存储在别处，你可以接入任何你正在使用的状态管理器。
  3. 工具处理 – 当模型发出工具调用时，SDK 会向客户端交付一个结构化对象。无需编写手动的同步代码，即可渲染天气组件、日历选择器或任何自定义 UI 元素。

结果实现了清晰的分离：服务器负责所有的 LLM 交互，而客户端仅负责展示。不再需要解析原始流，不再有意外的密钥泄露，也不再有因每个 token 重新渲染导致的 UI 抖动。

谁将从中受益，谁可能会犹豫

下一步值得关注的内容

总结

Vercel AI SDK v5 通过将 LLM 调用移至服务端、提供类型化的工具数据，并将前端从底层的状态处理中解放出来，重塑了 React 聊天机器人的开发模式。这一转变解决了两个最大的隐患——密钥暴露和 UI 抖动——同时让开发者能够继续掌控自己的状态栈。