Video Studio
Generate clips with FLUX 3 Video from a prompt, keyframes or a clip to continue, and switch between the runs.
Your video will appear here
Installation
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/video-studio.jsonModes
There's no mode switch: the request follows what the user gives it. A prompt alone sends mode: "t2v". Keyframes on the timeline, added from files or with "Use frame" at a clip's playhead, send "i2v" with [seconds, image] pairs. Extend on a finished clip sends "v2v" with the clip as start_video and the duration held to 5 to 15 s; adding a keyframe drops it again.
Your server
The block never sees your API key. It posts each body to /v1/flux-3-video through the client. 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 placeDon't stream clips from BFL's URLs: they expire after about 10 minutes and aren't served with CORS. Save each clip to your storage in the poll route and return your URL, which BFL must be able to fetch too: Extend sends it back as the clip to continue. Keyframes arrive as data URLs. Price the same body on your server, so the cost shown is the cost charged.
VideoStudio
| Prop | Type | Default |
|---|---|---|
| client | BflClientReaches the BFL API through your server: createBflClient(base), or your own submit and poll. | — |
| defaultKeyframes | VideoKeyframe[]Frames to start from, each an image and its second, e.g. the image picked in the Playground's Animate. | [] |
| defaultPrompt | stringThe prompt to start with, e.g. to restore a session. | "" |
| price | (request: BflRequest) => numberYour price for one request, in your unit. Read body.duration to price per second; it can be "auto". Omit to show no costs. | — |
| balance | numberWhat the user can spend; runs costing more disable. | — |
| onSpend | (cost: number, request: BflRequest) => voidCalled as a run or a retry starts, with its cost. | — |
| formatCost | (cost: number) => ReactNodeLabels costs, e.g. as money. | formatCredits |