Install in React

One package, one route, one token. Your Flocon AI pages then show on your website. The example uses React Router v7 (framework mode).

1. Install the package

It needs React 18+.

npm install @flocon-ai/react

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. Call the package on the server only (route loader, server function). The token must never reach the browser.

3. Add the page route

Create app/routes/flocon.tsx and register it as the * route. It serves every Flocon page.

import { FloconPage, getFloconMetadata, getPage } from "@flocon-ai/react"
import type { Route } from "./+types/flocon"

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

export async function loader({ params }: Route.LoaderArgs) {
const page = await getPage({ path: "/" + params["*"] })
if (!page) throw new Response("Not found", { status: 404 })
return page
}

export function meta({ data }: Route.MetaArgs) {
if (!data) return [{ title: "Not found" }]
const m = getFloconMetadata({ page: data, url })
return [
  { title: m.title },
  { name: "description", content: m.description },
  { property: "og:type", content: m.openGraph.type },
  { property: "og:title", content: m.openGraph.title },
  { property: "og:description", content: m.openGraph.description },
  { property: "og:url", content: m.openGraph.url },
  { property: "og:locale", content: m.openGraph.locale },
  { name: "twitter:card", content: m.twitter.card },
  { name: "twitter:title", content: m.twitter.title },
  { name: "twitter:description", content: m.twitter.description },
  { tagName: "link", rel: "canonical", href: m.canonical },
  ...Object.entries(m.languages).map(([hrefLang, href]) => ({
    tagName: "link",
    rel: "alternate",
    hrefLang,
    href,
  })),
]
}

export default function Page({ loaderData }: Route.ComponentProps) {
return <FloconPage page={loaderData} url={url} />
}

• getPage({ path, locale? }) returns the page, or null when it does not exist. Return a 404.
• <FloconPage /> does no fetching. It renders the blocks, the JSON-LD script and (Free plan) the "Made with Flocon AI" badge.
• getFloconMetadata() returns plain data: title, description, keywords, canonical URL, hreflang, openGraph and twitter. Put it in the <head> the way your framework does. It sets no OG image.
• Pages are read on each request. A page you publish shows up on the next visit. Drafts are never returned.

The url rule

url gets { locale, path } and returns the full URL of a page on your website. Flocon AI imposes no URL rule, and the package adds no prefix of its own.

If your website has several languages, put the language in the URL (like https://example.com/${locale}${path}). Otherwise every hreflang link points to the same URL.

Other languages

locale is optional. No locale = the default language of your website.

await getPage({ path: "/guides/seo", locale: "fr" })

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