AtroUIAtroUI
DocsBlog
StarOwn the UI
  • Introduction
  • Installation
  • Host APIs
  • Registry
  • Theming
  • Brand kit
  • Identity kit
  • Launch workflow
  • Collections
  • Glossary
  • Compare
  • Changelog
  • Blog
  • Updates
  • ButtonCLI
  • CardCLI
  • Form SelectCLI
  • TextareaCLI
  • BreadcrumbsCLI
  • ProseCLI
  • Founder AvatarCLI
  • Theme ToggleCLI
  • Adaptive Theme SwitchCLI
  • Theme ProviderCLI
  • LogoCLI
  • Mockup FrameCLI
  • TimelineCLI
  • Fade InCLI
  • StaggerCLI
  • Scroll ProgressCLI
  • Site HeaderCLI
  • Site FooterCLI
  • Bold FooterCLI
  • HeroCLI
  • PrincipleCLI
  • WorkCLI
  • CraftsCLI
  • LabCLI
  • WhoCLI
  • PricingCLI
  • Feature GridCLI
  • Logo CloudCLI
  • FAQCLI
  • Contextual CTACLI
  • Exit IntentCLI
  • Contact FormHost API
  • Calendly EmbedCLI
  • Waitlist FormHost API
  • Newsletter FormHost API
  • JournalCLI
  • Social ShareCLI
  • ResourcesCLI
  • Before / AfterCLI
  • Case StudyCLI
  • AR PortfolioCLI
  • Made With EmbedCLI
  • Count UpCLI
  • Deadline CountdownCLI
  • CurrentlyCLI
  • Project ListCLI
  • Log PreviewCLI
  • ChangelogCLI
  • Command MenuCLI
  • RevealCLI
  • Theme Toggle IconCLI
  • Site Header NarrowCLI
  • Site Footer NarrowCLI
  • Social FloatCLI
  • Reading ShelfCLI
  • Personal HeroCLI
  • ResumeCLI
  • Local ClockCLI
  • Weather ChipCLI
  • Stack ListCLI
  • OG ExamplesCLI
  • OG Live PreviewCLI
  • OG WorkspaceHost API
  • Thumbnail PreviewCLI
  • Thumbnail WorkspaceHost API
  • Project PlannerCLI
  • Scope ChatHost API
  • Live DashboardCLI
  • Analytics ProviderCLI
  • JSON-LDCLI
  • Testimonial SchemaCLI

Loading

Tool

CLI registryHost API

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-workspace
Loading 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 tool

Generate 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).

Related

  • OG Examples
  • OG Live Preview
  • Thumbnail Preview
  • Thumbnail Workspace

OG Workspace

PreviousOG Live PreviewNextThumbnail Preview