# useCreateView

`useCreateView` creates a new [`View`](https://ably.com/docs/ai-transport/api/javascript/core/client-session.md) over the same conversation tree as the session's default view, then subscribes to it the same way [`useView`](https://ably.com/docs/ai-transport/api/react/core/use-view.md) does. Each created view has its own branch selections and pagination state. The view is closed automatically on unmount or when the session reference changes.

Use this hook when you need two independent renderings of the same conversation, for example, a split-pane diff between two regenerate siblings, or a secondary panel that pages older history without affecting the main scroll position.

<Code>

#### Javascript

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

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

  return (
    <SplitPane
      left={<MessageList messages={left.messages} />}
      right={<MessageList messages={right.messages} />}
    />
  );
}
```
</Code>

This hook must be used within a [`ClientSessionProvider`](https://ably.com/docs/ai-transport/api/react/core/providers.md#client-session-provider) unless `session` is supplied explicitly.

## Parameters 

<Table id='UseCreateViewParameters'>

| Parameter | Required | Description | Type |
| --- | --- | --- | --- |
| session | optional | A client session to create a view from. Defaults to the nearest provider. Pass `null` to defer creation. | `ClientSession<TInput, TOutput, TProjection, TMessage>` |
| limit | optional | Maximum number of older Runs to reveal per page. When provided, auto-loads the first page on mount. | Number |
| skip | optional | When `true`, skip view creation and return an empty handle immediately. | Boolean |

</Table>

## Returns 

Returns the same [`ViewHandle`](https://ably.com/docs/ai-transport/api/react/core/use-view.md#returns) shape as [`useView`](https://ably.com/docs/ai-transport/api/react/core/use-view.md), backed by a freshly created view.

<Table id='ViewHandle'>

| Property | Description | Type |
| --- | --- | --- |
| messages | The visible messages along the selected branch, each paired with its `codecMessageId`. Read the domain object from each entry's `message` field. | `CodecMessage<TMessage>[]` |
| hasOlder | Whether there are older Runs that can be revealed. | Boolean |
| loading | Whether a page load is currently in progress. | Boolean |
| loadError | Set when the most recent `loadOlder` call failed. | `Ably.ErrorInfo` or Undefined |
| loadOlder | Reveal older Runs. | `() => Promise<void>` |
| runOf | Look up the `RunInfo` for the Run that owns a `codecMessageId`. | `(codecMessageId) => RunInfo \| undefined` |
| run | Direct lookup by Run id. | `(runId) => RunInfo \| undefined` |
| runs | Snapshot of the visible Runs along the selected branch, in chronological order. | `() => RunInfo[]` |
| branchSelection | Resolve the `BranchSelection` bundle anchored at `codecMessageId`. | `(codecMessageId) => BranchSelection<TMessage>` |
| selectSibling | Select a sibling at the branch point anchored at `codecMessageId`. | `(codecMessageId, index) => void` |
| send | Send one or more `TInput`s on the channel and fire a POST. Wrap a domain message via `codec.createUserMessage` (or build the `{ kind: 'user-message', message }` literal) to send a fresh user message. | `(events, options?) => Promise<ActiveRun>` |
| regenerate | Regenerate an assistant message, using this view's branch. | `(messageId, options?) => Promise<ActiveRun>` |
| edit | Edit a user message, forking from this view's branch. | `(messageId, inputs, options?) => Promise<ActiveRun>` |

</Table>

See [`useView`](https://ably.com/docs/ai-transport/api/react/core/use-view.md#returns) for the field-by-field behaviour of each property. Every method behaves the same way, scoped to the view this hook created.

## Example 

A side-by-side comparison panel. Two `useCreateView` calls give the user independent branch selection for each pane while both views observe the same underlying conversation tree.

<Code>

### Javascript

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

function Compare({ messageId }: { messageId: string }) {
  const leftView = useCreateView({ limit: 30 });
  const rightView = useCreateView({ limit: 30 });

  const leftBranch = leftView.branchSelection(messageId);
  const rightBranch = rightView.branchSelection(messageId);

  return (
    <div className="grid grid-cols-2">
      <div>
        <BranchPicker
          selection={leftBranch}
          onSelect={(i) => leftView.selectSibling(messageId, i)}
        />
        <MessageList messages={leftView.messages} />
      </div>
      <div>
        <BranchPicker
          selection={rightBranch}
          onSelect={(i) => rightView.selectSibling(messageId, i)}
        />
        <MessageList messages={rightView.messages} />
      </div>
    </div>
  );
}
```
</Code>

## Related Topics

- [Providers](https://ably.com/docs/ai-transport/api/react/core/providers.md): API reference for the AI Transport React providers: ClientSessionProvider and the createSessionHooks factory.
- [useClientSession](https://ably.com/docs/ai-transport/api/react/core/use-client-session.md): Read a ClientSession from the nearest ClientSessionProvider in the AI Transport React integration.
- [useView](https://ably.com/docs/ai-transport/api/react/core/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/core/use-tree.md): Stable structural query callbacks for the AI Transport conversation tree from React.
- [useAblyMessages](https://ably.com/docs/ai-transport/api/react/core/use-ably-messages.md): Subscribe to raw Ably InboundMessages on the AI Transport channel 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.