1. Generate and preview a screen
The most common workflow: generate a screen (creating the file in the same step), then view the result.fileId creates a new file automatically. Pass an existing fileId to add screens to that file instead.
Prompt to your AI assistant:
Generate a Flowstep design: a mobile sign-in screen for a developer tool with email/password and a Google SSO button in dark theme, then show me the image.
2. Visualize a React component
Upload a.jsx or .tsx file as an attachment and ask Flowstep to generate a matching design. Flowstep reads the source and produces a screen — no need to run the app.
upload-attachment with mimeType and fileName instead and run the returned uploadCommand. See upload-attachment.
Prompt to your AI assistant:
Read src/components/settings/ApiKeys.tsx, upload it as an attachment, and generate a Flowstep screen that matches the component layout. Show me the rendered image.
3. Iterate on a screen
Change an existing screen in place with free-form instructions — and, in the same call, add a new screen that matches it.screenIds lists every screen the call built or changed, so call get-screen-image once for each. Leave out the last sentence of the message to only edit the existing screen.
To change only part of a screen, call get-screen-jsx with "includeIds": true first and pass the data-id of the element you want to change in elementIds.
For a one-click preset on a whole screen, call ai-edit-screen-variant instead — for example "operationVariant": "light_theme" or "different_layout".
Prompt to your AI assistant:
In my “Login flow” Flowstep file, switch the sign-in screen to dark mode, add a “Remember me” checkbox below the password field, and add a matching forgot-password screen. Show me the results.
4. Expand a screen to a full flow
Add follow-on screens to an existing design.operationVariant: "error_state" or "empty_state" to add edge-case screens, or "web_version" / "tablet_version" for other platforms.
operationVariant is required for ai-generate-screen-variant, and the tool takes exactly one screenId. To add a screen that isn’t a variant of an existing one, use ai-design-screens with a fileId.5. Hand a screen to your codebase, then write changes back
Read a screen as JSX, build from it, and push your edited JSX back to the canvas — all without using messages.name, fidelity, screenType, colorTheme, fragments) keep their current values. To keep the original and add your version alongside it, call add-screen-jsx with screenType and jsx instead of replace-screen-jsx.
To show your own image in the screen, upload it with upload-attachment and put the returned assetUrl in an img src in your JSX. See Images in JSX.
6. Check your allowance before a batch job
Check remaining capacity before kicking off multiple generations.get-plan-details is free to call.
remaining.messages.daily is low, schedule the batch for after 00:00 UTC when it resets.