> ## 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.

# Astro

> Add pagent to an Astro site.

Add the tag to the `<head>` of your base layout with `is:inline`. It tells Astro to leave the tag exactly as written, so it stays a plain script that runs before the page shows.

```astro src/layouts/Layout.astro theme={"dark"}
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script
      is:inline
      src="https://cdn.pagent.ai/js/sdk.js"
      data-client-key="YOUR_CLIENT_KEY"
      data-await-hydration="true">
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>
```

* **Islands:** with `data-await-hydration="true"`, pagent waits for islands with `client:load` and `client:idle` to hydrate. Islands with `client:visible` or `client:media` hydrate later, so test variants inside them with a preview link.
* **No islands?** A fully static Astro site doesn't hydrate, so you can leave out `data-await-hydration`.
* **View transitions:** navigation with Astro's client router is tracked 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.