Run your whole website on Flocon AI

Every page can come from Flocon AI, the homepage / too. Your code can be only the layout.

  • Your code: header, footer, CSS.
  • Flocon AI: all the pages.
  • Your AI writes and publishes them.

Here are a few ideas. Pick what you like. They work for Next.js, Astro and React.

Start from the demo

The public demo repo has a working website for each framework:

Idea: a layout around the [...slug] route

First, install the package and add the [...slug] route. See the install page of your framework: Next.js, Astro, React.

Then you could put a header and a footer around that route. Your code may not need more.

Idea: a nav that builds itself

You could build the nav from getAllPages(). It is in @flocon-ai/next, @flocon-ai/astro and @flocon-ai/react.

  • It returns published pages only.
  • It has no blocks, so it is light.
  • Each entry has locale, path and title.

One way: group pages by the first part of the path:

  • /about → a plain link.
  • /vs/a-vs-b, /vs/c-vs-d → a "Vs" group (dropdown).
  • /alternatives/x → an "Alternatives" group.

The group label can be the folder name. You can add a small map, for example vs → "Comparisons". The link text can be the page title.

A simple way to start:

const pages = (await getAllPages()).filter((p) => p.locale === locale)

const LABELS: Record<string, string> = { vs: "Comparisons" } // optional

const links: typeof pages = []
const groups: Record<string, typeof pages> = {}
for (const p of pages) {
if (p.path === "/") continue // the homepage is the logo link
const [, folder, sub] = p.path.split("/")
if (!sub) links.push(p) // /about
else (groups[folder] ??= []).push(p) // /vs/a-vs-b
}
// groups: { vs: [...], alternatives: [...] }, label: LABELS[folder] ?? folder

Filter by the current locale, as above. Then render plain links and dropdowns with your own components.

More ideas

  • Cap each dropdown (for example 5 pages) and add a "See all" link to a hub page (/vs).
  • Hub page. If /vs has no Flocon page, render a simple list of every /vs/* page. Good for internal linking.
  • Footer = every page, grouped by category. It helps crawling.
  • Exclude list for paths you don't want in the nav, for example /legal/*.
  • Fetch the page list once per build or with revalidate, not on every request.

Make it yours with CSS

Pages use --flocon-* variables and support dark mode. See the theming page of your framework: Next.js, Astro, React.

SEO is already there

You do not need to build it again:

  • Metadata and JSON-LD come with the page component.
  • Sitemap and llms.txt: Next.js, Astro, React.
  • OG image (Next.js only): OG image.

Deploy

Use any host that runs your framework in server mode. Set FLOCON_TOKEN in its environment variables.

Fill it with your AI

Try a prompt like this in your AI tool:

Use Flocon AI to build the pages of my website.
1. Write the homepage at "/".
2. Write an "/about" page.
3. Write 5 use-case pages under "/use-cases/".
Use real facts only. Schedule the use-case pages with publishAt, one every day.

See Scheduled publishing and Page types.

Updated