# useCreateView

Create an independent `View` and subscribe to it. Returns the same `ViewHandle` as [`useView`](https://ably.com/docs/ai-transport/api/react/use-view.md), but backed by a newly created view with its own branch selections and pagination state. Use when one component needs a view distinct from the transport's default view — typically a split-pane comparison UI or a sidebar that follows a different branch.

The view is closed on unmount or when the transport changes.

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

<Code>

#### React

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

function ComparisonPane() {
  const left = useCreateView({ limit: 30 });
  const right = useCreateView({ limit: 30 });
  // Each view has its own select() state — render two branches side by side.
}
```
</Code>

## Parameters

<Table id='UseCreateViewProps'>

| Prop | Required | Description | Type |
| --- | --- | --- | --- |
| transport | Optional | Transport to create a view from. Defaults to the nearest provider when omitted. | `ClientTransport<TEvent, TMessage>` or Null |
| limit | Optional | Maximum number of older messages to load per page. When provided, auto-loads the first page on mount. | Number |
| skip | Optional | When `true`, skip view creation and return an empty handle. | Boolean |

</Table>

## Returns

`ViewHandle<TEvent, TMessage>`

The same shape as [`useView`](https://ably.com/docs/ai-transport/api/react/use-view.md#useViewReturns). See that page for the full property and method list.

## Example

<Code>

### React

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

function SplitPane({ messageId }) {
  const left = useCreateView({ limit: 30 });
  const right = useCreateView({ limit: 30 });

  // Show the two siblings of a regenerate side by side.
  const siblings = left.getSiblings(messageId);
  if (siblings.length >= 2) {
    left.select(messageId, 0);
    right.select(messageId, 1);
  }

  return (
    <div className="split">
      <Pane title="Version A" view={left} />
      <Pane title="Version B" view={right} />
    </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.
- [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.
- [useChatTransport](https://ably.com/docs/ai-transport/api/react/use-chat-transport.md): Read a ChatTransport and its underlying ClientTransport from the nearest ChatTransportProvider in AI Transport.
- [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.