MCP-exempel

1. Generera och förhandsgranska en skärm

Det vanligaste arbetsflödet: generera en skärm (skapa filen i samma steg) och visa sedan resultatet.

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

2. ai-generate-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]

Om du utelämnar fileId skapas en ny fil automatiskt. Skicka med ett befintligt fileId för att lägga till skärmar i den filen i stället. Prompt till din AI-assistent:

Generera en Flowstep-design: en mobil inloggningsskärm för ett utvecklarverktyg med e-post/lösenord och en Google SSO-knapp i mörkt tema. Visa mig sedan bilden.

2. Visualisera en React-komponent

Ladda upp en .jsx- eller .tsx-fil som bilaga och be Flowstep generera en matchande design. Flowstep läser källkoden och skapar en skärm. Du behöver inte köra appen.

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

2. ai-generate-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]

För källfiler som är längre än 64 000 tecken använder du upload-attachment med mimeType och fileName i stället och kör det returnerade uploadCommand. Se upload-attachment. Prompt till din AI-assistent:

Läs src/components/settings/ApiKeys.tsx, ladda upp den som bilaga och generera en Flowstep-skärm som matchar komponentens layout. Visa mig den renderade bilden.

3. Iterera på en skärm

Ändra en befintlig skärm på plats med instruktioner i fritt format.

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

2. ai-edit-screens   { "fileId": "FILE_ID",
                       "message": "Change the color scheme to dark mode and
                                   add a 'Remember me' checkbox below the password field.",
                       "elementIds": ["SCREEN_ID"] }
                     → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

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

För att ändra endast en del av en skärm anropar du get-screen-jsx med "includeIds": true först och skickar data-id för elementet du vill ändra i elementIds. För en förinställning med ett klick på en hel skärm anropar du ai-edit-screen-variant i stället, till exempel med "operationVariant": "light_theme" eller "different_layout". Prompt till din AI-assistent:

I min Flowstep-fil “Login flow” byter du inloggningsskärmen till mörkt läge och lägger till en “Remember me”-kryssruta under lösenordsfältet. Visa mig resultatet.

4. Utöka en skärm till ett helt flöde

Lägg till efterföljande skärmar i en befintlig 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]

Upprepa steg 2 med operationVariant: "error_state" eller "empty_state" för att lägga till skärmar för kantfall, eller med "web_version" eller "tablet_version" för andra plattformar.

operationVariant är obligatoriskt för ai-generate-screen-variant, och verktyget tar exakt ett screenId. För att lägga till en skärm som inte är en variant av en befintlig använder du ai-generate-screens med ett fileId.

5. Lämna en skärm till din kodbas och skriv sedan ändringarna tillbaka

Läs en skärm som JSX, bygg från den och skicka tillbaka din redigerade JSX till canvas. Allt detta görs utan att använda meddelanden.

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]

Utelämnade fält (name, fidelity, screenType, colorTheme, fragments) behåller sina nuvarande värden. För att behålla originalet och lägga till din version bredvid det anropar du add-screen-jsx med screenType och jsx i stället för replace-screen-jsx.

6. Kontrollera din kvot innan ett batchjobb

Kontrollera kvarvarande kapacitet innan du startar flera genereringar. get-plan-details är gratis att anropa.

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

Om remaining.messages.daily är låg schemalägger du batchen till efter 00:00 UTC, när den återställs.

Kom igång

Använda Flowstep

Team och organisationer

Export och integrationer

MCP-server

Fakturering och planer

Säkerhet och integritet

1. Generera och förhandsgranska en skärm

2. Visualisera en React-komponent

3. Iterera på en skärm

4. Utöka en skärm till ett helt flöde

5. Lämna en skärm till din kodbas och skriv sedan ändringarna tillbaka

6. Kontrollera din kvot innan ett batchjobb

​1. Generera och förhandsgranska en skärm

​2. Visualisera en React-komponent

​3. Iterera på en skärm

​4. Utöka en skärm till ett helt flöde

​5. Lämna en skärm till din kodbas och skriv sedan ändringarna tillbaka

​6. Kontrollera din kvot innan ett batchjobb

1. Generera och förhandsgranska en skärm

2. Visualisera en React-komponent

3. Iterera på en skärm

4. Utöka en skärm till ett helt flöde

5. Lämna en skärm till din kodbas och skriv sedan ändringarna tillbaka

6. Kontrollera din kvot innan ett batchjobb