MCP-Beispiele

1. Generieren Sie einen Screen und zeigen Sie eine Vorschau an

Der häufigste Workflow: Generieren Sie einen Screen (erstellen Sie die Datei im gleichen Schritt), dann sehen Sie sich das Ergebnis an.

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]

Das Weglassen von fileId erstellt automatisch eine neue Datei. Übergeben Sie stattdessen eine vorhandene fileId, um Screens dieser Datei hinzuzufügen. Prompt zu Ihrem KI-Assistent:

Generate a Flowstep design: a mobile sign-in screen for a developer tool with email/password and a Google SSO button in dark theme, then show me the image.

2. Visualisieren Sie eine React-Komponente

Laden Sie eine .jsx- oder .tsx-Datei als Anlage hoch und fordern Sie Flowstep auf, ein passendes Design zu generieren. Flowstep liest den Quellcode und erstellt einen Screen — es ist nicht notwendig, die App auszuführen.

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 zu Ihrem KI-Assistent:

Read src/components/settings/ApiKeys.tsx, upload it as an attachment, and generate a Flowstep screen that matches the component layout. Show me the rendered image.

3. Überarbeiten Sie einen mit MCP generierten Screen

edit-design und regenerate-design erfordern Design-Kontext, der nur auf Screens vorhanden ist, die mit einem designs-Array generiert wurden. Für Screens, die ohne einen generiert wurden, ist der Workaround, den Screen als Anlage zu rendern und create-new-design mit dem Bild aufzurufen.

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]

Für Screens, die Design-Kontext haben, rufen Sie edit-design direkt mit der Änderung in message und dem Screen in targets auf.

4. Erweitern Sie einen Screen zu einem vollständigen Flow

Fügen Sie Nachfolge-Screens zu einem vorhandenen Design hinzu.

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]

Wiederholen Sie Schritt 2 mit operationVariant: "error_state" oder "empty_state", um Edge-Case-Screens hinzuzufügen.

operationVariant ist ein erforderlicher Parameter für expand-design. Der Basis-Screen muss auch mit einem designs-Array generiert worden sein (Design-Kontext) — für Screens ohne ihn verwenden Sie den Anlage-Workaround aus Beispiel 3.

5. Prüfen Sie das Kontingent vor einem Batch-Job

Überprüfen Sie die verbleibende Kapazität, bevor Sie mehrere Generierungen starten.

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

Wenn daily niedrig ist, planen Sie den Batch nach 00:00 UTC, wenn er sich zurückzusetzt.

Erste Schritte

Flowstep verwenden

Teams & Organisationen

Export & Integrationen

MCP-Server

Abrechnung & Tarife

Sicherheit & Datenschutz

1. Generieren Sie einen Screen und zeigen Sie eine Vorschau an

2. Visualisieren Sie eine React-Komponente

3. Überarbeiten Sie einen mit MCP generierten Screen

4. Erweitern Sie einen Screen zu einem vollständigen Flow

5. Prüfen Sie das Kontingent vor einem Batch-Job

​1. Generieren Sie einen Screen und zeigen Sie eine Vorschau an

​2. Visualisieren Sie eine React-Komponente

​3. Überarbeiten Sie einen mit MCP generierten Screen

​4. Erweitern Sie einen Screen zu einem vollständigen Flow

​5. Prüfen Sie das Kontingent vor einem Batch-Job

1. Generieren Sie einen Screen und zeigen Sie eine Vorschau an

2. Visualisieren Sie eine React-Komponente

3. Überarbeiten Sie einen mit MCP generierten Screen

4. Erweitern Sie einen Screen zu einem vollständigen Flow

5. Prüfen Sie das Kontingent vor einem Batch-Job