AI image studio

A React block (a whole screen) in Beamline's Blocks category.

Write a prompt, pick a shape, a style and how many, and watch the variations generate side by side; each one opens full screen and can be upscaled or used as the start of more like it. Every batch stays in a history you can step back to, with its prompt and settings.

Use it for

A product feature that makes images from text: ad creative, product shots, illustrations, social posts.
Any generator whose people compare several variations, refine, and come back to earlier attempts.

Not for

One image generating inside a chat answer (image-generation).
Browsing finished images (lightbox, carousel).
Editing an existing photo by hand (an editor; not in the kit).

Anatomy

settings: the prompt, what to avoid (folded), shape (square, landscape, portrait, wide), style, how many (1, 2 or 4), the cost in credits and the one primary action, Generate
batch: the newest variations in a grid; each generates in its own frame and arrives as it finishes; a ready one opens full screen, and its actions (more like this, upscale, download) wait for the pointer or focus
history: earlier batches as a strip of thumbnails with their prompt; choosing one brings it back and Reuse puts its prompt and settings back in the form

Variants

0: room: settings above the batch under 48rem (history as a row underneath); settings in a column beside the batch and history from 48rem

States

first run (example prompts to start from)
generating (each frame breathes with its own progress; Generate becomes Generating and the form stays editable)
partly ready (finished ones arrive while the rest keep working)
a variation refused (says why in its frame; the others are unaffected)
upscaling one image
out of credits (Generate is off and says why)
credits unknown (—)
More like this from an older batch returns to the newest variations.

Keyboard

⌘/Ctrl+Enter in the prompt generates
Each ready image is a button: Enter opens it full screen, where ←/→ step through the batch and Esc closes
Each image's actions are reachable by Tab after it
History thumbnails are buttons; Reuse is its own button

Motion

A frame breathes in brand-hued pixels while its image generates, then the image sharpens in block by block; a new batch slides into the grid's place as the last one joins the history; the credits roll down when spent. Nothing runs at rest: frames draw only while generating and on screen.

Props

Prop	Type	Default	Description
`batches` (required)	`StudioBatch[]`	—	Newest first: { id, prompt, settings, images: StudioImage[], createdAt }. Update images in place as they generate.
`settings / defaultSettings / onSettingsChange`	`StudioSettings`	—	{ prompt, avoid?, aspect, style, count } — the form.
`styles`	`string[]`	—	Style names to offer. Default Photo, Illustration, 3D render, Line art.
`credits`	`number \| null`	—	Credits left; null when unknown.
`costPerImage`	`number`	`1`
`examples`	`string[]`	—	Prompts offered on a first run.
`onGenerate` (required)	`(settings: StudioSettings) => void`	—
`onVary / onUpscale`	`(image: StudioImage, batch: StudioBatch) => void`	—
`onDownload`	`(image: StudioImage) => void`	—
`className / classNames / style / ref`	`string / ImageStudioClassNames / CSSProperties / Ref<HTMLElement>`	—

Built from

Dependencies

lucide-react

Import

import { ImageStudio } from "@/blocks/image-studio/image-studio";

Get it

AI image studio is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent