> ## Documentation Index
> Fetch the complete documentation index at: https://aomi.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React headless library

> Build a custom React interface with AomiRuntimeProvider and useAomiRuntime.

Use the `@aomi-labs/react` **headless library** when you want Aomi to manage Agent state while your components control every pixel.

## Install

```bash theme={null}
npm install @aomi-labs/react @assistant-ui/react react react-dom
```

## Add the provider

```tsx theme={null}
import { AomiRuntimeProvider } from "@aomi-labs/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <AomiRuntimeProvider backendUrl={import.meta.env.VITE_AOMI_BASE_URL}>
      {children}
    </AomiRuntimeProvider>
  );
}
```

## Send a message

```tsx theme={null}
import { useAomiRuntime } from "@aomi-labs/react";

function Composer() {
  const { sendMessage, isRunning, cancelGeneration } = useAomiRuntime();

  return isRunning ? (
    <button onClick={cancelGeneration}>Stop</button>
  ) : (
    <button onClick={() => sendMessage("Show my Base balances")}>Send</button>
  );
}
```

`useAomiRuntime()` exposes the common integration state:

| Area | Examples |
| - | - |
| Threads | `currentThreadId`, `createThread`, `selectThread`, `renameThread` |
| Chat | `sendMessage`, `getMessages`, `isRunning`, `cancelGeneration` |
| Actions | `pendingActions`, `actionAttempts`, `executeAction`, `respondToAction`, `rejectAction` |
| Events | Ordered `events` and backend-owned `turnState` |
| User state | Current EVM, Solana, connection, and extension state |

`executeAction(id)` uses the capabilities configured beneath the provider. Use `respondToAction(id, result)` only when your application executed the request itself and has the correctly typed result.

<Note>
  `@aomi-labs/react` does not choose a wallet provider. Supply your own provider tree or use the widget package for a complete integration.
</Note>

For a complete custom interface, continue to [Widget customization](/docs/guides/widget/customization).