# Vercel AI SDK + Ably AI Transport

<Aside data-type='new'>
The AI Transport docs are being actively written and developed. They are available early to explain how AI Transport functions.
</Aside>

Ably AI Transport augments your Vercel AI SDK application with a durable session layer. You get reliable streaming, multi-device sessions, agent presence, and bidirectional control without changing your existing code.

Ready to build? [Get started with Vercel AI SDK](https://ably.com/docs/ai-transport/getting-started/vercel-ai-sdk.md) in 5 minutes.

## Understand what each layer does 

Vercel AI SDK handles intelligence and UI. AI Transport handles what happens between the model and every device.

| Vercel AI SDK | Ably AI Transport |
| --- | --- |
| Model orchestration (`streamText`, providers) | Durable sessions (Ably channels) |
| UI state (`useChat`, message management) | Multi-device fan-out |
| Tool calls and structured output | Reconnection and recovery |
| Streaming via HTTP/SSE | Active turn tracking |
| `ChatTransport` interface | Bidirectional control |
| | Ordering and persistence |

Vercel explicitly built the `ChatTransport` interface as the extension point for this. AI Transport implements `ChatTransport`, so you swap the transport layer without changing your application code.

## See how they fit together 

The architecture stacks four layers:

1. Vercel AI SDK provides `useChat()`, `streamText()`, tool calls, and UI state management.
2. The `ChatTransport` interface is the plug-in point that Vercel designed for custom transports.
3. AI Transport implements `ChatTransport` and adds sessions, presence, recovery, and control.
4. Ably infrastructure provides the global edge network, multi-region routing, ordering, and persistence.

All connected devices share the same session and receive the same stream of events.

<Code>

### Javascript

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

// After: Ably transport (everything else stays the same)
const transport = useChatTransport({ channel })
const { messages } = useChat({ transport })
```
</Code>

Your existing `useChat()` code, tool calls, and UI logic stay the same. One transport swap.

## Choose an integration path 

Both paths use the same server code. The difference is client-side only.

### Use the useChat path 

The simplest path. `useChatTransport` wraps the core transport for direct use with Vercel's `useChat` hook. `useMessageSync` pushes other clients' messages into `useChat` state. You get Vercel's message management with AI Transport's durable delivery.

When to use: you want the standard Vercel `useChat` developer experience with durable sessions added.

### Use the generic hooks path 

Use AI Transport's React hooks (`useView`, `useSend`, `useRegenerate`, `useEdit`) directly. This gives you full access to the conversation tree, branch navigation, split-pane views, and custom message construction.

When to use: you need branching UI, custom message rendering, or direct control over the conversation tree.

## Discover what this unlocks 

### Problems that go away 

AI SDK frameworks handle model orchestration well. They are not built to solve transport-level problems. With AI Transport, these issues are resolved:

- Streams that die on disconnect. AI Transport resumes from where you left off, automatically.
- Lost context on tab switch or device change. The session persists across any surface.
- No way to tell if the agent crashed or is still thinking. Active turn tracking gives you real-time status.
- Partial responses lost on mobile network drops. Ordering and persistence mean nothing is lost.

### New capabilities 

Things your app can do that were not possible before:

- Share the same conversation on phone, laptop, and tablet, all in sync.
- Regenerate, edit, and navigate conversation branches. Each branch is a fork in the conversation tree.
- Cancel, interrupt, and steer agents mid-stream through bidirectional control.
- Approval gates reach the user on any device, even after reconnecting.
- Multiple agents or requests stream simultaneously, each with independent cancel handles.

## Read next 

<Tiles>
{[
  {
    title: 'Get started',
    description: 'Build with Vercel AI SDK in 5 minutes.',
    link: '[ably docs ai-transport getting-started vercel-ai-sdk](https://ably.com/docs/ai-transport/getting-started/vercel-ai-sdk.md)',
  },
  {
    title: 'How it works',
    description: 'Understand sessions, turns, and the transport architecture.',
    link: '[ably docs ai-transport how-it-works](https://ably.com/docs/ai-transport/how-it-works.md)',
  },
  {
    title: 'Features',
    description: 'Multi-device, cancellation, branching, and presence.',
    link: '[ably docs ai-transport features token-streaming](https://ably.com/docs/ai-transport/features/token-streaming.md)',
  },
  {
    title: 'API reference',
    description: 'React hooks, ChatTransport, and codec.',
    link: '[ably docs ai-transport api-reference](https://ably.com/docs/ai-transport/api-reference.md)',
  },
]}
</Tiles>

## Documentation Index

To discover additional Ably documentation:

1. Fetch [llms.txt](https://ably.com/llms.txt) for the canonical list of available pages.
2. Identify relevant URLs from that index.
3. Fetch target pages as needed.

Avoid using assumed or outdated documentation paths.