Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt

Use this file to discover all available pages before exploring further.

​
1. Generate and preview a screen

The most common workflow: create a file, generate a screen, view the result. 
1. create-file      { "title": "Auth screens" }
                    → { "id": "FILE_ID" }

2. ai-prompt        { "fileId": "FILE_ID",
                      "message": "Mobile sign-in screen for a developer tool.
                                 Email/password fields, Google SSO button, dark theme." }
                    → { "screenIds": ["SCREEN_ID"] }

3. get-screen-image { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                    → [inline PNG]
Prompt to your AI assistant:
Create a new Flowstep file called “Auth screens”, generate 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. Visualise 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. 
1. upload-attachment { "fileData": "<UTF-8 contents of ApiKeys.tsx>",
                       "fileName": "ApiKeys.tsx",
                       "mimeType": "text/javascript" }
                     → { "id": "ATT_ID", "path": "...", "type": "document",
                         "mimeType": "text/javascript" }

2. ai-prompt         { "fileId": "FILE_ID",
                       "message": "Generate a desktop screen that matches this React component.",
                       "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                     → { "screenIds": ["SCREEN_ID"] }

3. get-screen-image  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                     → [inline PNG]
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 MCP-generated screen

regenerate and edit require design context only present for web-app generations. For MCP-generated screens, the workaround is to render the screen as an attachment and call ai-prompt with the image. 
1. upload-attachment { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                     → { "id": "ATT_ID", "path": "...", "type": "image", "mimeType": "image/jpeg" }

2. ai-prompt         { "fileId": "FILE_ID",
                       "message": "Change the color scheme to dark mode and
                                   add a 'Remember me' checkbox below the password field.",
                       "attachments": [{ "id": "ATT_ID", "path": "...", "type": "image" }] }
                     → { "screenIds": ["NEW_SCREEN_ID"] }

3. get-screen-image  { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                     → [inline PNG]

​
4. Expand a screen to a full flow

Add follow-on screens to an existing design. 
1. list-screens      { "fileId": "FILE_ID" }
                     → [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }]

2. ai-prompt         { "fileId": "FILE_ID",
                       "message": "Add the next screen in the user flow",
                       "operation": "expand",
                       "operationVariant": "next_screen",
                       "targets": ["BASE_SCREEN_ID"] }
                     → { "screenIds": ["NEXT_SCREEN_ID"] }

3. get-screen-image  { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                     → [inline PNG]
Repeat step 2 with operationVariant: "error_state" or "empty_state" to add edge-case screens.
expand requires the base screen to have been generated with a designs array (design context). For MCP-generated screens without design context, use the attachment workaround from Example 3.

​
5. Audit quota before a batch job

Check remaining capacity before kicking off multiple generations. 
get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }
If daily is low, schedule the batch for after 00:00 UTC when it resets.