Install in Astro

One package, one catch-all route, one token. Your Flocon AI pages then show on your website. It needs Astro 4+ in SSR.

1. Install the package

npm install @flocon-ai/astro

2. Add your website token

Copy your website token from /app/tokens. Add it to .env:

FLOCON_TOKEN=<website token>

Set the same variable in your host. The package reads it on the server only.

On Cloudflare, secrets are not in process.env. Pass the token yourself. Every helper takes a token option:

const token = Astro.locals.runtime.env.FLOCON_TOKEN // Astro 4-5 + @astrojs/cloudflare
const data = await getFloconPage({ path, token })

3. Add the catch-all route

Create src/pages/[...slug].astro. It serves every Flocon page.

---
import FloconPage from "@flocon-ai/astro/FloconPage.astro"
import { getFloconPage, getFloconMetadata } from "@flocon-ai/astro"

const url = ({ locale, path }: { locale: string; path: string }) =>
`https://example.com/${locale}${path}`

const data = await getFloconPage({ path: "/" + (Astro.params.slug ?? "") })
if (!data) return new Response(null, { status: 404 })
const meta = getFloconMetadata({ data, url })
---

<html lang={data.page.locale}>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>{meta.title}</title>
  {meta.meta.map((m) => <meta {...m} />)}
  {meta.links.map((l) => <link {...l} />)}
</head>
<body>
  <FloconPage data={data} url={url} />
</body>
</html>

• getFloconPage() loads one published page. A missing page (or a draft) gives null: answer a 404.
• <FloconPage /> renders the page: title, blocks and the JSON-LD script.
• getFloconMetadata() returns the title, meta and links:
  • meta: description, keywords, og:* and twitter:* tags.
  • links: canonical URL and hreflang alternates.
• There is no OG image yet.
• Your own routes win over [...slug]. Astro matches the more specific route first.

The url rule

url gets { locale, path } and returns the full URL of a page on your website. Flocon AI adds no prefix of its own. Build it the way your website does.

It is used for the canonical URL, hreflang, and the links in "Related pages".

Other languages

locale is optional in getFloconPage. No locale means the default language of your website. To serve another language, pass it:

const data = await getFloconPage({ path: "/guides/seo", locale: "fr" })

There is no fallback to another language. A missing page is a 404.

4. Check it

1. Ask your AI tool to create and publish a page at /vs/notion.
2. Open /vs/notion on your website.

The page is there.

Next

• Full example on GitHub
• Add your pages to the sitemap and llms.txt
• Theming

Updated November 3, 2026