Playground
Generate images from a prompt: references and model settings in a dock, a batch of results above it, and actions on the one the user picks.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
Installation
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/playground.jsonYour server
The block never sees your API key. It builds each request body the way the picked model takes it (FLUX 3 by aspect ratio and resolution tier, FLUX.2 by width and height, references as images or input_image_N) and hands it to the client, which posts it to your server. Two routes are enough:
POST /api/bfl/*endpoint → POST https://api.bfl.ai/v1/{endpoint}
with your x-key header and the body
GET /api/bfl/poll?url= → GET the task's polling_url, after
checking it's on bfl.ai; once Ready,
save result.sample to your storage
and return your URL in its placeCharge on your server too: price the same request body there, so the cost shown is the cost charged.
Playground
| Prop | Type | Default |
|---|---|---|
| client | BflClientReaches the BFL API through your server: createBflClient(base), or your own submit and poll. | — |
| price | (request: BflRequest) => numberYour price for one request, in your unit, from its endpoint and body. Omit to show no costs. | — |
| balance | numberWhat the user can spend; runs and models costing more disable. | — |
| onSpend | (cost: number, request: BflRequest) => voidCalled as each request is sent, retries included, with its cost. | — |
| formatCost | (cost: number) => ReactNodeLabels costs, e.g. as money. | formatCredits |
| onEdit / onAnimate | (src: string) => voidOffer Edit and Animate on the picked image, e.g. to open the Edit or Video Studio. | — |
| models | readonly PlaygroundModel[]The models offered, each with its ratios, how it's sized, whether it takes a seed and how many references. | PLAYGROUND_MODELS |
| defaultModel / defaultPrompt / defaultReferences / defaultCount | …Where a session starts, e.g. to restore one. | — |