AblyDocs

Vercel AI SDK UI

Vercel AI SDK UI gives you client side react hooks like useChat for building chat interfaces. AI Transport plugs into useChat as a ChatTransport, so the same UI gets durable sessions, multi-device sync, and bidirectional control.

Open in

Vercel AI SDK UI is Vercel's React library for building AI chat interfaces. Its useChat hook manages the conversation state, sends user messages, and renders streaming responses. The framework intentionally leaves the transport pluggable through the ChatTransport interface; AI Transport implements that interface and adds the durability that direct HTTP streaming cannot.

Ready to build? See Get started with Vercel AI SDK.

What Vercel AI SDK UI brings

CapabilityDescription
useChat hookManages the UIMessage array, the status field (submitted, streaming, ready, error), and the methods sendMessage, regenerate, and stop.
UIMessage modelMessages with parts (text, reasoning, tool calls, tool results, files, sources). Each part tracks its own streaming state.
ChatTransport interfaceThe plug-in point. sendMessages submits messages; reconnectToStream resumes an interrupted stream. The default implementation is HTTP plus Server-Sent Events.
UI componentsPatterns and primitives for chat layouts, message rendering, and input handling.

This is what AI Transport composes with. It does not replace any of these. It replaces the transport underneath.

What AI Transport adds

CapabilityDescription
Durable sessionsTokens flow through an Ably channel that outlives any single connection. A client reconnects and resumes from where it left off.
Multi-device syncEvery device subscribed to the session sees the same conversation in real time.
Bidirectional controlCancel, steer, and interrupt the agent from any client. No separate control channel.
Active turn trackinguseActiveTurns exposes which clients are streaming and which turns are in progress.
Conversation branchingEdit and regenerate create forks in the conversation tree, not destructive replacements.
Approval gates that reach the user anywherePending tool approvals persist on the session until someone acts on them.
History and replayLoad the full conversation on reconnect, page refresh, or new device join.
Token compactionReconnecting clients receive accumulated responses, not a replay of every token.

These are the same capability bullets used on the Vercel AI SDK Core page; the capability surface is the same whichever layer you integrate against.

Where they connect

AI Transport implements the ChatTransport interface. Swapping it in is a small change to useChat:

JavaScript

1

2

3

4

5

6

7

// Before: default HTTP transport
const { messages } = useChat();

// After: Ably transport (everything else stays the same)
// Wrap your tree with <ChatTransportProvider channelName={chatId}> first.
const { chatTransport } = useChatTransport();
const { messages } = useChat({ transport: chatTransport });

The integration has four parts:

  1. The UIMessageCodec encodes Vercel's UIMessageChunk events as Ably messages. Every chunk type (text-delta, tool-input, finish, and others) maps to an Ably message with headers that track its metadata. The codec encodes on the server, decodes on the client, and reassembles chunks into complete UIMessage objects.
  2. ChatTransportProvider creates the underlying ClientTransport and the ChatTransport adapter and makes both available through context. useChatTransport is a context reader that returns { chatTransport, transport }.
  3. useMessageSync subscribes to the transport's conversation tree and pushes updates into useChat's setMessages. This is what brings multi-device sync and conversation branching into Vercel's local state without useChat natively supporting them.
  4. On the server, turn.streamResponse(result.toUIMessageStream()) pipes the model's output through the codec encoder to the Ably channel. The HTTP response returns status 200 with an empty body. Tokens reach every connected client through the channel, not through the HTTP response. See Vercel AI SDK Core for the server-side detail.

Scope and trade-offs

Vercel AI SDK UI is intentionally focused on Vercel's data model. By design, it does not handle multi-device session continuity, branch navigation, or bidirectional control. AI Transport fills that gap without changing how you use useChat. The same messages array, the same sendMessage, the same stop button; the behaviours underneath move from ephemeral HTTP to durable sessions.

If you need direct access to the conversation tree (branch navigation, split-pane views, custom message construction), see Vercel AI SDK Core.

Read next