MCP-eksempler

1. Generér og forhåndsvis en skærm

Den mest almindelige workflow: generér en skærm (og opret filen i samme trin), og vis derefter resultatet.

1. list-files         {}
                      → { "files": [ ... ] }          // check for an existing file first

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

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

Udeladelse af fileId opretter automatisk en ny fil. Angiv et eksisterende fileId for i stedet at tilføje skærme til den fil. Prompt til din AI-assistent:

Generér et Flowstep-design: en mobil login-skærm til et udviklerværktøj med email/password-felter og en Google SSO-knap i mørkt tema, og vis mig derefter billedet.

2. Visualisér en React-komponent

Upload en .jsx- eller .tsx-fil som vedhæftning, og bed Flowstep om at generere et matchende design. Flowstep læser kilden og producerer en skærm — ingen grund til at køre appen.

1. upload-attachment  { "text": "<UTF-8 contents of ApiKeys.tsx>",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "assetUrl": "...", "type": "document",
                          "mimeType": "text/javascript" }

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

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

For kildefiler, der er længere end 64.000 tegn, skal du i stedet bruge upload-attachment med mimeType og fileName og køre den returnerede uploadCommand. Se upload-attachment. Prompt til din AI-assistent:

Læs src/components/settings/ApiKeys.tsx, upload den som vedhæftning, og generér en Flowstep-skærm, der matcher komponentens layout. Vis mig det renderede billede.

3. Itér på en skærm

Ændr en eksisterende skærm på stedet med fritekstinstruktioner — og tilføj i samme kald en ny skærm, der matcher den.

1. list-screens       { "fileId": "FILE_ID" }
                      → { "screens": [{ "screenId": "SCREEN_ID", "name": "Sign-in", ... }] }

2. ai-design-screens  { "fileId": "FILE_ID",
                        "message": "Edit this sign-in screen: switch it to dark mode and add a
                                    'Remember me' checkbox below the password field. Then add a
                                    matching forgot-password screen.",
                        "elementIds": ["SCREEN_ID"] }
                      → { "status": "generated", "fileId": "FILE_ID",
                          "screenIds": ["SCREEN_ID", "NEW_SCREEN_ID"], ... }

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

screenIds lister alle skærme, kaldet byggede eller ændrede, så kald get-screen-image én gang for hver. Udelad den sidste sætning i beskeden for kun at redigere den eksisterende skærm. For kun at ændre en del af en skærm skal du først kalde get-screen-jsx med "includeIds": true og derefter angive data-id for det element, du vil ændre, i elementIds. Til en ét-klik forudindstilling på en hel skærm skal du i stedet kalde ai-edit-screen-variant — for eksempel med "operationVariant": "light_theme" eller "different_layout". Prompt til din AI-assistent:

I min “Login flow”-Flowstep-fil skal du skifte login-skærmen til mørkt tema, tilføje et “Remember me”-afkrydsningsfelt under adgangskodefeltet og tilføje en tilsvarende glemt-adgangskode-skærm. Vis mig resultatet.

4. Udvid en skærm til et fuldt flow

Tilføj opfølgende skærme til et eksisterende design.

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

2. ai-generate-screen-variant  { "fileId": "FILE_ID",
                                 "screenId": "BASE_SCREEN_ID",
                                 "operationVariant": "next_screen" }
                               → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"], ... }

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

Gentag trin 2 med operationVariant: "error_state" eller "empty_state" for at tilføje skærme til edge cases, eller "web_version" / "tablet_version" for andre platforme.

operationVariant er påkrævet for ai-generate-screen-variant, og værktøjet tager præcis ét screenId. For at tilføje en skærm, der ikke er en variant af en eksisterende, skal du bruge ai-design-screens med et fileId.

5. Overdrag en skærm til din kodebase, og skriv ændringer tilbage

Læs en skærm som JSX, byg videre på den, og skub din redigerede JSX tilbage til lærredet — uden at bruge beskeder.

1. get-screen-jsx      { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → { "name": "Settings", "fidelity": "ui", "screenType": "web",
                           "colorTheme": "default", "jsx": "<div ...>...</div>", "fragments": [] }

2. replace-screen-jsx  { "fileId": "FILE_ID", "screenId": "SCREEN_ID",
                         "jsx": "<div ...>...edited...</div>" }
                       → { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }

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

Udeladte felter (name, fidelity, screenType, colorTheme, fragments) beholder deres aktuelle værdier. For at beholde originalen og tilføje din version ved siden af den, skal du kalde add-screen-jsx med screenType og jsx i stedet for replace-screen-jsx. For at vise dit eget billede i skærmen skal du uploade det med upload-attachment og sætte den returnerede assetUrl ind i et img src i din JSX. Se Billeder i JSX.

6. Tjek din kvote før et batchjob

Tjek den resterende kapacitet, før du starter flere genereringer. get-plan-details er gratis at kalde.

get-plan-details {}
→ { "plan": { ... }, "subscription": { ... }, "limits": { ... }, "usage": { ... },
    "remaining": { "messages": { "daily": ..., "monthly": ... } } }

Hvis remaining.messages.daily er lav, så planlæg batchen til efter 00:00 UTC, hvor den nulstilles.

Kom godt i gang

Brug af Flowstep

Teams og organisationer

Eksport og integrationer

MCP-server

Fakturering og abonnementer

Sikkerhed og privatliv

1. Generér og forhåndsvis en skærm

2. Visualisér en React-komponent

3. Itér på en skærm

4. Udvid en skærm til et fuldt flow

5. Overdrag en skærm til din kodebase, og skriv ændringer tilbage

6. Tjek din kvote før et batchjob

​1. Generér og forhåndsvis en skærm

​2. Visualisér en React-komponent

​3. Itér på en skærm

​4. Udvid en skærm til et fuldt flow

​5. Overdrag en skærm til din kodebase, og skriv ændringer tilbage

​6. Tjek din kvote før et batchjob

1. Generér og forhåndsvis en skærm

2. Visualisér en React-komponent

3. Itér på en skærm

4. Udvid en skærm til et fuldt flow

5. Overdrag en skærm til din kodebase, og skriv ændringer tilbage

6. Tjek din kvote før et batchjob