Vercel AI SDK v5 lets React developers shift large-language-model (LLM) calls to the server, keeping API keys hidden and slashing the latency that comes from streaming text chunks in the browser. The new transport-based architecture also separates state handling, so UI code stays lightweight while the SDK manages streaming, history and tool invocations.

Why the old approach broke the model

Most React chatbots built before v5 streamed the model’s output straight to the client. That forced developers to embed the LLM’s secret key in front-end code, exposing it in the browser’s network inspector. Teams also used useState to buffer each incoming token, causing a re-render on every tiny chunk. The UI flickered and the code turned into a tangled mess of callbacks.

The result: anyone could steal the key, and the conversation lagged while developers wrestled with low-level state plumbing.

What v5 changes under the hood

  • Transport-Based Architecture – The SDK now treats the connection to the LLM as a modular transport layer. Calls originate from an API route on the server, so the secret key never leaves the backend. The transport abstracts the streaming protocol, delivering a clean, typed stream of messages to the front end.

  • Typed Tool Invocations – When a model decides to call a tool (e.g., a weather lookup or a calendar fetch), the SDK packages the request into a typed payload. The front end reads the payload’s shape directly, eliminating ad-hoc parsing and cutting runtime errors.

  • Decoupled State Management – The useChat hook no longer forces a single state store. It supplies callbacks and utilities that any state library—Zustand, Redux, or plain React context—can consume. UI components stay focused on rendering while the SDK does the heavy lifting.

A practical workflow

  1. Server-side LLM logic – In an API route, call streamText (or the equivalent streaming helper). The SDK streams the model’s output back to the client over a secure connection, keeping the API key out of the browser.
  2. Client-side UI – Import useChat in a React component. The hook returns the current message list, a function to send new user input, and status flags. Because state lives elsewhere, you can plug in any state manager you already use.
  3. Tool handling – When the model emits a tool call, the SDK delivers a structured object to the client. Render a weather widget, a calendar picker, or any custom UI element without writing manual sync code.

The result is a clean separation: the server owns all LLM interactions, the client owns only presentation. No more raw-stream parsing, no more accidental key leaks, and no more UI jitter from per-token re-renders.

Who stands to win, and who might hesitate

What to watch next

Bottom line

Vercel AI SDK v5 reshapes React chatbot development by moving LLM calls to the server, delivering typed tool data, and freeing the front end from low-level state juggling. The shift tackles the two biggest pitfalls—exposed secrets and jittery UI—while letting developers keep control of their own state stack.