---
title: "React Installation"
description: "Install @aeontel/react and wrap your app in AeontelProvider."
section: "Libraries"
group: "React"
---

# React Installation

## Install

```bash
pnpm add @aeontel/react @aeontel/sdk @tanstack/react-query react
```

React 18+ is supported; React 19 is tested.

## Wrap your app

`AeontelProvider` supplies both the SDK client context and a TanStack Query client.

```tsx
import { AeontelProvider } from "@aeontel/react";
import Aeontel from "@aeontel/sdk";

const client = new Aeontel(null, {
  baseURL: "https://api.aeontel.com",
  credentials: "include", // send the session cookie
});

export function App({ children }: { children: React.ReactNode }) {
  return <AeontelProvider client={client}>{children}</AeontelProvider>;
}
```

## Bring your own query client

If you already have a QueryClient (for other integrations), pass it in.

```tsx
import { QueryClient } from "@tanstack/react-query";

const qc = new QueryClient({
  defaultOptions: { queries: { staleTime: 60_000, retry: 1 } },
});

<AeontelProvider client={client} options={{ queryClient: qc }}>
  ...
</AeontelProvider>;
```

Otherwise, supply `queryDefaults` and the provider builds one for you. The default is 30s staleTime, 1 retry.

## Using a hook

```tsx
import { useListAgents, useCreateAgent, agentKeys } from "@aeontel/react";
import { useQueryClient } from "@tanstack/react-query";

function AgentsPanel({ workspaceId }: { workspaceId: string }) {
  const { data, isLoading } = useListAgents({ workspace_id: workspaceId });
  const qc = useQueryClient();
  const create = useCreateAgent({
    onSuccess: () => qc.invalidateQueries({ queryKey: agentKeys.all() }),
  });

  return (
    <div>
      <button
        onClick={() =>
          create.mutate({
            workspaceId,
            name: "New agent",
            model: "anthropic/claude-sonnet-4-5",
          })
        }
      >
        New agent
      </button>
      {isLoading ? (
        <p>Loading…</p>
      ) : (
        <ul>
          {data?.data.map((a) => (
            <li key={a.id}>{a.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}
```