# useChatTransport

Read the `ChatTransport` adapter and its underlying `ClientTransport` from the nearest [`ChatTransportProvider`](https://ably.com/docs/ai-transport/api/react/providers.md#ChatTransportProvider). The `ChatTransport` is what you pass to Vercel's `useChat` as `transport`.

The hook is a thin context reader; it does not create transport state. Construction happens once inside `ChatTransportProvider`.

This hook must be used within a [`ChatTransportProvider`](https://ably.com/docs/ai-transport/api/react/providers.md#ChatTransportProvider).

<Code>

#### React

```
import { useChatTransport } from '@ably/ai-transport/vercel/react';
import { useChat } from '@ai-sdk/react';

function Chat({ chatId }) {
  const { chatTransport } = useChatTransport();
  const { messages, sendMessage, stop } = useChat({ id: chatId, transport: chatTransport });
  // ...
}
```
</Code>

## Parameters

<Table id='UseChatTransportProps'>

| Prop | Required | Description | Type |
| --- | --- | --- | --- |
| channelName | Optional | The `channelName` of the `ChatTransportProvider` to read from. Omit to use the nearest provider in the tree. | String |
| skip | Optional | When `true`, returns stub transports that throw on any access. Safe to hold in state before auth or other conditions are ready. | Boolean |

</Table>

## Returns

`ChatTransportHandle`

<Table id='ChatTransportHandle'>

| Property | Description | Type |
| --- | --- | --- |
| transport | The underlying client transport. Also available via `useClientTransport()`. A throwing stub when `skip` is `true`, when no matching `TransportProvider` is found, or when transport construction failed. Check `transportError` before use. | `ClientTransport<UIMessageChunk, UIMessage>` |
| chatTransport | The chat transport adapter for use with Vercel's `useChat` hook. A throwing stub when `skip` is `true`, when no matching `ChatTransportProvider` is found, or when the underlying `ClientTransport` construction failed. Check both `chatTransportError` and `transportError` before use. | `ChatTransport` |
| transportError | Set when no matching `TransportProvider` is found or transport construction failed and `skip` is `false`. | `Ably.ErrorInfo` or Undefined |
| chatTransportError | Set when no matching `ChatTransportProvider` is found or transport construction failed and `skip` is `false`. | `Ably.ErrorInfo` or Undefined |

</Table>

See [Vercel AI SDK integration](https://ably.com/docs/ai-transport/api/javascript/vercel.md#ChatTransport) for the `ChatTransport` surface and [`ClientTransport`](https://ably.com/docs/ai-transport/api/javascript/client-transport.md) for the underlying transport.

## Example

<Code>

### React

```
import { useChatTransport } from '@ably/ai-transport/vercel/react';
import { useChat } from '@ai-sdk/react';

function Chat({ chatId }) {
  const { chatTransport, transport, chatTransportError, transportError } = useChatTransport();

  if (transportError) return <ErrorBanner error={transportError} />;
  if (chatTransportError) return <ErrorBanner error={chatTransportError} />;

  const { messages, sendMessage, stop } = useChat({ id: chatId, transport: chatTransport });

  return (
    <div>
      {messages.map((m) => <Message key={m.id} message={m} />)}
      <Composer onSend={(text) => sendMessage({ text })} onStop={stop} />
      <button onClick={() => transport.cancel({ all: true })}>Cancel everyone</button>
    </div>
  );
}
```
</Code>

## Related Topics

- [Providers](https://ably.com/docs/ai-transport/api/react/providers.md): TransportProvider and ChatTransportProvider for the AI Transport React integration.
- [useClientTransport](https://ably.com/docs/ai-transport/api/react/use-client-transport.md): Read a ClientTransport from the nearest TransportProvider in the AI Transport React integration.
- [useView](https://ably.com/docs/ai-transport/api/react/use-view.md): Subscribe to a paginated, branch-aware view of the AI Transport conversation tree from React.
- [useCreateView](https://ably.com/docs/ai-transport/api/react/use-create-view.md): Create an independent View over the AI Transport conversation tree from React, with its own branch selections and pagination.
- [useTree](https://ably.com/docs/ai-transport/api/react/use-tree.md): Stable structural query callbacks for the AI Transport conversation tree from React.
- [useActiveTurns](https://ably.com/docs/ai-transport/api/react/use-active-turns.md): Subscribe to active turns on the AI Transport channel from React.
- [useAblyMessages](https://ably.com/docs/ai-transport/api/react/use-ably-messages.md): Subscribe to raw Ably InboundMessages on the AI Transport channel from React.
- [useMessageSync](https://ably.com/docs/ai-transport/api/react/use-message-sync.md): Wire AI Transport message updates into Vercel useChat's message state from React.

## 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.