MCP-eksempler

1. Generer og forhåndsvis en skjerm

Den mest vanlige arbeidsflyten: generer en skjerm (opprett filen i samme trinn), og se resultatet.

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]

Hvis du utelater fileId, opprettes en ny fil automatisk. Send en eksisterende fileId for å legge til skjermer i filen i stedet. Prompt til AI-assistenten din:

Generer en Flowstep-design: en mobil påloggingsskjerm for et utviklerverktøy med e-post/passord og en Google SSO-knapp i mørk tema, og vis meg bildet deretter.

2. Visualiser en React-komponent

Last opp en .jsx- eller .tsx-fil som vedlegg og be Flowstep om å generere en tilsvarende design. Flowstep leser kilden og produserer en skjerm – det er ikke nødvendig å kjøre appen.

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 til AI-assistenten din:

Les src/components/settings/ApiKeys.tsx, last den opp som vedlegg, og generer en Flowstep-skjerm som stemmer med komponentlayouten. Vis meg det gjengitte bildet.

3. Iterer på en MCP-generert skjerm

edit-design og regenerate-design krever designkontekst som bare er tilstede på skjermer som er generert med en designs-matrise. For skjermer som er generert uten det, er løsningen å gjengi skjermen som et vedlegg og kalle create-new-design med bildet.

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]

For skjermer som har designkontekst, kan du kalle edit-design direkte med endringen i message og skjermen i targets.

4. Utvid en skjerm til en fullstendig flyt

Legg til etterfølgende skjermer i en eksisterende design.

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]

Gjenta trinn 2 med operationVariant: "error_state" eller "empty_state" for å legge til edge-case-skjermer.

operationVariant er en obligatorisk parameter for expand-design. Grunnskjermen må også ha blitt generert med en designs-matrise (designkontekst) – for skjermer uten det, bruk vedleggsomgåelsen fra eksempel 3.

5. Revisjon av kvote før en batchjobb

Sjekk gjenværende kapasitet før du starter flere generasjoner.

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

Hvis daily er lav, planlegg batchen for etter 00:00 UTC når den tilbakestilles.

Kom i gang

Bruke Flowstep

Team og organisasjoner

Eksport og integrasjoner

MCP-server

Fakturering og abonnementer

Sikkerhet og personvern

1. Generer og forhåndsvis en skjerm

2. Visualiser en React-komponent

3. Iterer på en MCP-generert skjerm

4. Utvid en skjerm til en fullstendig flyt

5. Revisjon av kvote før en batchjobb

​1. Generer og forhåndsvis en skjerm

​2. Visualiser en React-komponent

​3. Iterer på en MCP-generert skjerm

​4. Utvid en skjerm til en fullstendig flyt

​5. Revisjon av kvote før en batchjobb

1. Generer og forhåndsvis en skjerm

2. Visualiser en React-komponent

3. Iterer på en MCP-generert skjerm

4. Utvid en skjerm til en fullstendig flyt

5. Revisjon av kvote før en batchjobb