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

# React

> Add pagent to a React app built with Vite or Create React App, or with Remix and React Router.

## Vite and Create React App

Client-rendered React apps have one HTML file. Add the tag to its `<head>`, before your app's script:

```html index.html theme={"dark"}
<head>
  <meta charset="utf-8" />
  <script
    src="https://cdn.pagent.ai/js/sdk.js"
    data-client-key="YOUR_CLIENT_KEY">
  </script>
  <!-- your stylesheets and the rest of the head -->
</head>
```

With Create React App, the file is `public/index.html`.

* **No hydration wait.** A client-rendered app has no server HTML to hydrate, so leave out `data-await-hydration`.
* **Content your app renders later:** pagent applies a variant when the page loads and on every route change. If a test targets content that appears only after data has loaded, open the test's preview link and check that the variant shows.
* **Routing:** React Router's browser router is tracked automatically. With `HashRouter`, send a `navigate` command on every route change, as described in [Frameworks](https://www.pagent.ai/docs/install/frameworks.md#rules-for-every-framework).

## Remix and React Router (framework mode)

Server-rendered apps render the document in `app/root.tsx`. Add the tag at the top of its `<head>`, with `data-await-hydration="true"`:

```tsx app/root.tsx theme={"dark"}
export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <script
          src="https://cdn.pagent.ai/js/sdk.js"
          data-client-key="YOUR_CLIENT_KEY"
          data-await-hydration="true"
        />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}
```

pagent recognizes Remix and React Router hydration, and tracks client-side navigation automatically.

See [Frameworks](https://www.pagent.ai/docs/install/frameworks.md) for the shared rules and the Content Security Policy.

## Check it worked

1. Deploy, then open your site in a private browser window.
2. Back in pagent, click **Check connection** in the install step.
3. Open a test's preview link and check that the variant shows and stays after the page has finished loading.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.