MCP-voorbeelden

1. Genereer en bekijk een scherm

De meest voorkomende workflow: genereer een scherm (maak het bestand in dezelfde stap), bekijk vervolgens het resultaat.

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

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

Het weglaten van fileId maakt automatisch een nieuw bestand. Geef een bestaande fileId door om in plaats daarvan schermen aan dat bestand toe te voegen. Prompt voor je AI-assistent:

Genereer een Flowstep-ontwerp: een mobiel aanmeldingsscherm voor een ontwikkelaarstool met e-mail/wachtwoord en een Google SSO-knop in donker thema, toon me vervolgens de afbeelding.

2. Visualiseer een React-component

Upload een .jsx- of .tsx-bestand als bijlage en vraag Flowstep om een overeenkomend ontwerp te genereren. Flowstep leest de bron en produceert een scherm — je hoeft de app niet uit te voeren.

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. create-new-design  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

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

Prompt voor je AI-assistent:

Lees src/components/settings/ApiKeys.tsx, upload het als bijlage en genereer een Flowstep-scherm dat overeenkomt met de componentlay-out. Toon me de weergegeven afbeelding.

3. Herhaal een MCP-gegenereerd scherm

edit-design en regenerate-design vereisen ontwerp-context die alleen aanwezig is op schermen gegenereerd met een designs-array. Voor schermen gegenereerd zonder context is de workaround om het scherm als bijlage weer te geven en create-new-design aan te roepen met de afbeelding.

1. upload-attachment  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → { "id": "ATT_ID", "path": "...", "type": "image", "mimeType": "image/jpeg" }

2. create-new-design  { "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" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["NEW_SCREEN_ID"] }

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

Voor schermen die wel ontwerp-context hebben, roep direct edit-design aan met de wijziging in message en het scherm in targets.

4. Breid een scherm uit naar een volledige flow

Voeg vervolgschermen toe aan een bestaand ontwerp.

1. list-screens   { "fileId": "FILE_ID" }
                  → [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }]

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

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

Herhaal stap 2 met operationVariant: "error_state" of "empty_state" om edge-case-schermen toe te voegen.

operationVariant is een verplichte parameter voor expand-design. Het basisscherm moet ook zijn gegenereerd met een designs-array (ontwerp-context) — voor schermen zonder, gebruik de bijlage-workaround uit voorbeeld 3.

5. Controleer quotum voordat je een batch-taak uitvoert

Controleer de resterende capaciteit voordat je meerdere generaties start.

get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }

Als daily laag is, plan de batch na 00:00 UTC wanneer het opnieuw ingesteld wordt.

Aan de slag

Flowstep gebruiken

Teams & organisaties

Exporteren & integraties

MCP-server

Facturering & abonnementen

Beveiliging & privacy

1. Genereer en bekijk een scherm

2. Visualiseer een React-component

3. Herhaal een MCP-gegenereerd scherm

4. Breid een scherm uit naar een volledige flow

5. Controleer quotum voordat je een batch-taak uitvoert

​1. Genereer en bekijk een scherm

​2. Visualiseer een React-component

​3. Herhaal een MCP-gegenereerd scherm

​4. Breid een scherm uit naar een volledige flow

​5. Controleer quotum voordat je een batch-taak uitvoert

1. Genereer en bekijk een scherm

2. Visualiseer een React-component

3. Herhaal een MCP-gegenereerd scherm

4. Breid een scherm uit naar een volledige flow

5. Controleer quotum voordat je een batch-taak uitvoert