# useAblyMessages

`useAblyMessages` returns the accumulated raw `Ably.InboundMessage` objects that the session has observed on its channel, in arrival order. It subscribes to the session's tree `'ably-message'` event and appends every incoming message to internal state.

Use this hook for debugging, inspection panels, or wire-level visualisations that need to see the raw Ably payload rather than the decoded codec events.

<Code>

#### Javascript

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

function WireInspector() {
  const messages = useAblyMessages();

  return (
    <pre>
      {messages.map((m) => JSON.stringify(m, null, 2)).join('\n')}
    </pre>
  );
}
```
</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='UseAblyMessagesParameters'>

| Parameter | Required | Description | Type |
| --- | --- | --- | --- |
| session | optional | A client session to subscribe to. Defaults to the nearest provider. | `ClientSession<TInput, TOutput, TProjection, TMessage>` |
| skip | optional | When `true`, skip all subscriptions and return an empty array. | Boolean |

</Table>

## Returns 

`Ably.InboundMessage[]`

The accumulated raw Ably messages in chronological order. Resets to an empty array when the resolved session changes.

Each `InboundMessage` carries the wire fields you would see from `channel.subscribe`: `name`, `data`, `serial`, `clientId`, `extras`, `timestamp`, and so on. The full type lives in the [Ably SDK reference](https://ably.com/docs/pub-sub/api/javascript/realtime/messages.md#message).

## Example 

A toggleable debug drawer that streams every raw message arriving on the channel alongside the rendered conversation.

<Code>

### Javascript

```
import { useState } from 'react';
import { useAblyMessages, useView } from '@ably/ai-transport/react';

function ChatWithDebug() {
  const [showDebug, setShowDebug] = useState(false);
  const { messages } = useView({ limit: 30 });
  const rawMessages = useAblyMessages({ skip: !showDebug });

  return (
    <>
      <ConversationView messages={messages} />
      <button onClick={() => setShowDebug((s) => !s)}>
        {showDebug ? 'Hide' : 'Show'} wire log
      </button>
      {showDebug && (
        <aside>
          {rawMessages.map((m, i) => (
            <pre key={i}>{JSON.stringify(m, null, 2)}</pre>
          ))}
        </aside>
      )}
    </>
  );
}
```
</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.
- [useCreateView](https://ably.com/docs/ai-transport/api/react/core/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/core/use-tree.md): Stable structural query callbacks for the AI Transport conversation tree 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.