# TransportProvider

`TransportProvider` creates a [transport](https://ably.com/docs/ai-transport/api/javascript/transport/transport.md) for one channel and makes it available to the components inside it. It reads the Ably client from the surrounding `AblyProvider`, so the hooks in `@ably/ai-transport/react` work in any component it wraps.

<Code>

#### OpenAI Javascript

```
import * as Ably from 'ably';
import { AblyProvider } from 'ably/react';
import { TransportProvider } from '@ably/ai-transport/react';
import { openai } from '@ably/ai-transport/openai';

const ably = new Ably.Realtime({ authUrl: '/auth' });

export function App() {
  return (
    <AblyProvider client={ably}>
      <TransportProvider channelName="conversations:42" codec={openai}>
        <Chat />
      </TransportProvider>
    </AblyProvider>
  );
}
```

#### Vercel AI SDK Javascript

```
import * as Ably from 'ably';
import { AblyProvider } from 'ably/react';
import { TransportProvider } from '@ably/ai-transport/react';
import { vercel } from '@ably/ai-transport/vercel';

const ably = new Ably.Realtime({ authUrl: '/auth' });

export function App() {
  return (
    <AblyProvider client={ably}>
      <TransportProvider channelName="conversations:42" codec={vercel}>
        <Chat />
      </TransportProvider>
    </AblyProvider>
  );
}
```
</Code>

`TransportProvider` must be used within an [`AblyProvider`](https://ably.com/docs/getting-started/react.md).

The provider creates the transport after the first render, so `useTransport` returns `transport` as `undefined` on the first render. The provider closes the transport when it unmounts. When the client, the channel name, the codec's `adapterTag` or the channel modes change, it closes the transport and creates a new one.

The provider also wraps its children in an ably-js `ChannelProvider` for the same channel, with the options the transport set. So `usePresence`, `useChannel` and `useChannelStateListener` from `ably/react` work inside it.

To hold more than one conversation, nest providers with different channel names, and pass `channelName` to a hook to read a specific one.

## Properties 

<Table id='TransportProviderProps'>

| Property | Description | Type |
| --- | --- | --- |
| channelName | The name of the channel to create the transport for. | String |
| codec | The codec that turns events into Ably messages and back, for example `vercel` from `@ably/ai-transport/vercel`. | `Codec<E>` |
| channelModes | Optional. Channel modes to request on top of the [default channel modes](https://ably.com/docs/channels/options.md#modes), for example `OBJECT_MODES` to use [LiveObjects](https://ably.com/docs/ai-transport/channel/liveobjects.md) on the same channel. The provider compares the modes by their contents, so an inline array that does not change does not recreate the transport. | `Ably.ChannelMode[]` |
| echoMessages | Optional. Whether the channel delivers this connection's own publishes back to it. Defaults to `true`. | Boolean |
| logger | Optional. A logger for diagnostics. | `Logger` |
| children | The components that use the transport. | `ReactNode` |

</Table>

If creating the transport throws, the provider stores the error, and [`useTransport`](https://ably.com/docs/ai-transport/api/react/use-transport.md) returns it as `error` instead of breaking the component tree.

## Example 

Two providers hold two conversations. A component reads the inner one by default, and the outer one by channel name.

<Code>

### OpenAI Javascript

```
import { TransportProvider, useTransport } from '@ably/ai-transport/react';
import { openai } from '@ably/ai-transport/openai';

function Panels() {
  return (
    <TransportProvider channelName="conversations:support" codec={openai}>
      <TransportProvider channelName="conversations:42" codec={openai}>
        <Chat />
      </TransportProvider>
    </TransportProvider>
  );
}

function Chat() {
  const { transport } = useTransport();
  const { transport: support } = useTransport({ channelName: 'conversations:support' });
  // ...
}
```

### Vercel AI SDK Javascript

```
import { TransportProvider, useTransport } from '@ably/ai-transport/react';
import { vercel } from '@ably/ai-transport/vercel';

function Panels() {
  return (
    <TransportProvider channelName="conversations:support" codec={vercel}>
      <TransportProvider channelName="conversations:42" codec={vercel}>
        <Chat />
      </TransportProvider>
    </TransportProvider>
  );
}

function Chat() {
  const { transport } = useTransport();
  const { transport: support } = useTransport({ channelName: 'conversations:support' });
  // ...
}
```
</Code>

## Related Topics

- [useTransport](https://ably.com/docs/ai-transport/api/react/use-transport.md): API reference for the AI Transport useTransport hook: read the transport from the nearest or a named TransportProvider.
- [useDeliveries](https://ably.com/docs/ai-transport/api/react/use-deliveries.md): API reference for the AI Transport useDeliveries hook: receive every delivery on the transport's channel while a component is mounted.
- [useHistory](https://ably.com/docs/ai-transport/api/react/use-history.md): API reference for the AI Transport useHistory hook: read the channel's history one page at a time, oldest first.
- [useTransportStatus](https://ably.com/docs/ai-transport/api/react/use-transport-status.md): API reference for the AI Transport useTransportStatus hook: observe the transport's discontinuities and errors.

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