useClientTransport

Open in

Read the ClientTransport exposed by the nearest TransportProvider. The hook is a thin context reader; it does not create or own transport state.

This hook must be used within a TransportProvider or a ChatTransportProvider.

React

import { useClientTransport } from '@ably/ai-transport/react';

function Chat() {
  const { transport, transportError } = useClientTransport();
  if (transportError) return <ErrorBanner error={transportError} />;
  // Use transport.view, transport.cancel(), etc.
}

Parameters

channelNameoptionalString

The channelName of the TransportProvider to read from. Omit to use the nearest provider in the tree.

skipoptionalBoolean

When true, returns a stub transport that throws on any access. Useful when a condition (auth, feature flag) is not yet resolved.

onErroroptional(error: Ably.ErrorInfo) => void

Called whenever the resolved transport emits a non-fatal error. The subscription is established once the transport resolves and removed on unmount or when the transport changes.

Returns

ClientTransportHandle<TEvent, TMessage>

transportClientTransport<TEvent, TMessage>

The resolved transport. A throwing stub when skip is true, when no matching provider is found, or when transport construction failed. Check transportError before use.

transportErrorAbly.ErrorInfo or Undefined

Set when no matching provider is found or transport construction failed and skip is false. undefined when the transport resolved successfully or skip is true.

Check transportError before using transport to avoid throws from the stub. See ClientTransport for the full surface the returned transport exposes.

Example

React

import { useClientTransport, useView } from '@ably/ai-transport/react';

function Chat() {
  const { transport, transportError } = useClientTransport({
    onError: (error) => console.error(`Transport error ${error.code}:`, error.message),
  });

  const { messages } = useView({ limit: 30 });

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

  return (
    <div>
      {messages.map((m) => <Message key={m.id} message={m} />)}
      <button onClick={() => transport.cancel()}>Stop</button>
    </div>
  );
}