Connect the Vercel AI SDK to a React chat UI via assistant-ui — useChat hooks, custom transports, frontend tools, attachments, multi-step agents, and token usage.
@assistant-ui/react-ai-sdk integrates assistant-ui with the Vercel AI SDK. It covers useChat flows, custom transports, frontend tools, attachments, quote context, multi-step agents, token usage, and cloud persistence.
Pick a version
| AI SDK | Runtime package | Docs |
|---|---|---|
ai@^7 + @ai-sdk/react@^4 | @assistant-ui/react-ai-sdk (latest) | v7 (current) |
ai@^6 + @ai-sdk/react@^3 | @assistant-ui/[email protected] | v6 (legacy) |
ai@^5 + @ai-sdk/react@^2 | @assistant-ui/[email protected] | v5 (legacy) |
ai@^4 | @assistant-ui/react-data-stream | v4 (legacy) |
New projects should target v7. v6, v5, and v4 are documented for projects that have not migrated yet; all have known compatibility gaps and receive no new features.
Architecture
@assistant-ui/react-ai-sdk is layered on ExternalStoreRuntime (see architecture). Features that ship as runtime adapters work the same way they do everywhere else; see adapters.
For reload-safe streaming (persist an in-flight response so the client can reconnect), see Resumable Streams.
Choosing useChatRuntime vs useAISDKRuntime
Both ship in the same package.
useChatRuntime(recommended) wraps the AI SDK'suseChathook and adds cloud thread support, the standard adapter slots, andAssistantChatTransport(which forwards system messages and frontend tools by default). Use this unless you have a reason not to.useAISDKRuntimeis a lower-level hook that takes an existinguseChatinstance you control directly. Use it when you need to share the chat instance with non-assistant-ui code or wire in a custom transport that does not inherit fromAssistantChatTransport.