Generate the OG image

floconOgImage() makes the social preview image of a page. Call it in opengraph-image.tsx. It comes from @flocon-ai/next.

The image uses only the page SEO title and description. It uses your colors: primary, background and foreground.

opengraph-image.tsx

Create opengraph-image.tsx next to the route that shows your Flocon AI pages:

import {
floconOgImage,
floconOgImageSize,
floconOgImageContentType,
} from "@flocon-ai/next"

export const size = floconOgImageSize
export const contentType = floconOgImageContentType

export default async function Image() {
return floconOgImage({
  locale: "en",
  path: "guides/seo",
  cssPath: "src/app/globals.css",
})
}

The exports:

• floconOgImage(options): returns the image.
• floconOgImageSize: 1200 x 630.
• floconOgImageContentType: image/png.

Replace locale and path with the page of the route. In a dynamic route, read them from the route params.

Options

• locale: the page locale, like en. Required.
• path: the page path, without a leading slash, like guides/seo. Required.
• cssPath: path to your CSS file with the shadcn theme.
• colors: the colors directly. Any of primary, background, foreground.

If the page does not exist, floconOgImage() throws an error.

Pick your colors

You have two ways. Both read hex or oklch(...) values.

From your CSS file

Give cssPath. The lib reads the first :root block. It needs these 3 variables there:

• --primary
• --background
• --foreground

If one is missing, it throws an error. oklch(...) values are turned into hex for you.

Directly

Give colors. It wins over cssPath.

floconOgImage({
locale: "en",
path: "guides/seo",
colors: { primary: "#2563eb", background: "#ffffff" },
})

A color you leave out comes from cssPath. With no cssPath, it comes from the neutral colors: primary #2563eb, background #ffffff, foreground #111111.

Environment

It runs on the server only. It reads your read token from FLOCON_TOKEN. next must be installed in your project.

Updated October 31, 2026