MCP-Beispiele

1. Einen Screen generieren und in der Vorschau anzeigen

Der häufigste Workflow: Erstellen Sie einen Screen (die Datei wird im selben Schritt angelegt) und sehen Sie sich dann das Ergebnis an.

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]

Wenn Sie fileId weglassen, erstellt Flowstep automatisch eine neue Datei. Übergeben Sie eine bestehende fileId, um die Screens stattdessen dieser Datei hinzuzufügen. Prompt an Ihren KI-Assistenten:

Erstellen Sie ein Flowstep-Design: einen mobilen Anmelde-Screen für ein Entwicklertool mit E-Mail-/Passwort-Feldern und einem Google-SSO-Button im Dark Theme. Zeigen Sie mir danach das Bild.

2. Eine React-Komponente visualisieren

Laden Sie eine .jsx- oder .tsx-Datei als Anhang hoch und bitten Sie Flowstep, ein passendes Design zu generieren. Flowstep liest den Quellcode und erstellt einen Screen. Sie müssen die App dafür nicht starten.

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]

Bei Quelldateien mit mehr als 64.000 Zeichen verwenden Sie stattdessen upload-attachment mit mimeType und fileName und führen den zurückgegebenen uploadCommand aus. Siehe upload-attachment. Prompt an Ihren KI-Assistenten:

Lesen Sie src/components/settings/ApiKeys.tsx, laden Sie die Datei als Anhang hoch und generieren Sie einen Flowstep-Screen, der dem Layout der Komponente entspricht. Zeigen Sie mir das gerenderte Bild.

3. Einen Screen anpassen

Ändern Sie einen bestehenden Screen direkt mit freien Anweisungen. Im selben Aufruf können Sie außerdem einen neuen, passenden Screen hinzufügen.

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 listet jeden Screen auf, den der Aufruf erstellt oder geändert hat. Rufen Sie get-screen-image daher für jeden einzelnen auf. Lassen Sie den letzten Satz der Nachricht weg, wenn Sie nur den bestehenden Screen bearbeiten möchten. Um nur einen Teil eines Screens zu ändern, rufen Sie zuerst get-screen-jsx mit "includeIds": true auf. Übergeben Sie dann die data-id des Elements, das Sie ändern möchten, in elementIds. Für ein Preset, das einen ganzen Screen mit einem Klick verändert, rufen Sie stattdessen ai-edit-screen-variant auf, zum Beispiel mit "operationVariant": "light_theme" oder "different_layout". Prompt an Ihren KI-Assistenten:

Wechseln Sie in meiner Flowstep-Datei „Login flow“ den Anmelde-Screen in den Dark Mode, fügen Sie unter dem Passwortfeld eine Checkbox „Remember me“ hinzu und ergänzen Sie einen passenden Screen zum Zurücksetzen des Passworts. Zeigen Sie mir die Ergebnisse.

4. Einen Screen zu einem vollständigen Flow erweitern

Fügen Sie einem bestehenden Design Folge-Screens hinzu.

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]

Wiederholen Sie Schritt 2 mit operationVariant: "error_state" oder "empty_state", um Screens für Sonderfälle hinzuzufügen. Mit "web_version" oder "tablet_version" erstellen Sie Versionen für andere Plattformen.

operationVariant ist für ai-generate-screen-variant erforderlich, und das Tool akzeptiert genau eine screenId. Um einen Screen hinzuzufügen, der keine Variante eines bestehenden Screens ist, verwenden Sie ai-design-screens mit einer fileId.

5. Einen Screen in Ihre Codebasis übernehmen und Änderungen zurückschreiben

Lesen Sie einen Screen als JSX, bauen Sie darauf auf und schreiben Sie Ihr bearbeitetes JSX zurück auf die Canvas. Dabei verbrauchen Sie keine Nachrichten.

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]

Weggelassene Felder (name, fidelity, screenType, colorTheme, fragments) behalten ihre aktuellen Werte. Um das Original zu behalten und Ihre Version daneben hinzuzufügen, rufen Sie add-screen-jsx mit screenType und jsx statt replace-screen-jsx auf. Um ein eigenes Bild im Screen anzuzeigen, laden Sie es mit upload-attachment hoch und fügen die zurückgegebene assetUrl in einem img src Ihres JSX ein. Siehe Bilder in JSX.

6. Das Kontingent vor einem Batch-Auftrag prüfen

Prüfen Sie die verbleibende Kapazität, bevor Sie mehrere Generierungen starten. get-plan-details ist kostenlos.

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

Wenn remaining.messages.daily niedrig ist, planen Sie den Batch nach 00:00 UTC, wenn das Limit zurückgesetzt wird.

Erste Schritte

Flowstep verwenden

Teams & Organisationen

Export & Integrationen

MCP-Server

Abrechnung & Tarife

Sicherheit & Datenschutz

1. Einen Screen generieren und in der Vorschau anzeigen

2. Eine React-Komponente visualisieren

3. Einen Screen anpassen

4. Einen Screen zu einem vollständigen Flow erweitern

5. Einen Screen in Ihre Codebasis übernehmen und Änderungen zurückschreiben

6. Das Kontingent vor einem Batch-Auftrag prüfen

​1. Einen Screen generieren und in der Vorschau anzeigen

​2. Eine React-Komponente visualisieren

​3. Einen Screen anpassen

​4. Einen Screen zu einem vollständigen Flow erweitern

​5. Einen Screen in Ihre Codebasis übernehmen und Änderungen zurückschreiben

​6. Das Kontingent vor einem Batch-Auftrag prüfen

1. Einen Screen generieren und in der Vorschau anzeigen

2. Eine React-Komponente visualisieren

3. Einen Screen anpassen

4. Einen Screen zu einem vollständigen Flow erweitern

5. Einen Screen in Ihre Codebasis übernehmen und Änderungen zurückschreiben

6. Das Kontingent vor einem Batch-Auftrag prüfen