Next.js OG Image Workspace (Satori + BYOK)
An interactive, client-side Open Graph social card workspace UI for Next.js powered by Satori, tailwindcss, and AI prompt overrides.
Preview → install → use
01
Preview
npx shadcn@latest add @atroui/og-workspaceLoading workspace…
Source lands in your repo. Setup: Installation · Registry catalog · Host APIs.
02
Usage
Install
@atroui/api-generate and set HUGGINGFACE_API_KEY (or Google AI keys for freeform prompts) in your env. AtroUI never ships keys. Preview-only downloads work without AI. Hosted workspace on this site: /og. Live sample elsewhere: makershot.tech/og.Live demo elsewhere
Sample outputs and the hybrid FLUX + Satori pipeline are running in production at https://www.makershot.tech/og. This page is UI + integration docs only.
Open live OG toolGenerate 1200×630 cards in the consumer app
Quick mode composites type on a layout (previewOnly works offline). Prompt mode calls Hugging Face or Gemini with the host's key. 429 is rate limit; 503 means no AI key. Use the launch-workflow guide to pass a ProjectBrief from Scope.
FAQ
- Does OPENAI_API_KEY work?
- Not today. Handlers read HUGGINGFACE_API_KEY and GEMINI_API_KEY / GOOGLE_AI_KEY. Unsupported keys are ignored. Fork the route if you need another vendor.
Part of OG and thumbnail images in Next.js, Indie launch workflow (scope to social).
OG Workspace