---
title: Set up Astro
description: Add the quickinfo integration to an Astro site, Starlight included.
sidebar:
  label: Astro
---

:::tip
To have an LLM add quickinfo for you, paste the [Get started](/quickinfo/get-started)
prompt into it. This page covers the manual steps.
:::

On Astro sites, Starlight included, quickinfo annotates in the browser. The integration injects one script on every page, which fetches the
names JSON, marks code blocks and prose mentions, and runs the tooltip. It
reads the rendered HTML, so it works with any Markdown processor and behaves
the same in dev and production.

## Install

```bash
npm install quickinfo
```

## Add the data files

Generate the [names JSON and info JSON](/quickinfo/index-files) and write both to
`public/quickinfo/`. The integration fetches `/quickinfo/names.json` and
`/quickinfo/info.json` by default, under the site's `base` path.

## Add the integration

Add `quickinfo()` to the integrations:

```ts
import quickinfo from 'quickinfo/astro';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [quickinfo()],
});
```

To serve the data files from somewhere else, pass
[`namesUrl` and `infoUrl`](/quickinfo/api-reference#quickinfoastrooptions). A
root-relative URL resolves under the site's `base` path.

The integration re-annotates after Astro view transitions, so hovers keep
working across client-side navigation.