> ## Documentation Index > Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt > Use this file to discover all available pages before exploring further. # MCP-Tools-Referenz > Eingabeschema, Ausgabeform und Beispiele für alle 20 Flowstep MCP-Tools. Alle Tools geben ein `content`-Array von MCP-Content-Blöcken zurück. Text-Tools geben `{ type: "text", text: "" }` zurück. Bild-Tools geben `{ type: "image", data: "", mimeType: "image/png" }` zurück. Im Fehlerfall ist `isError: true` gesetzt und der Text-Block enthält die Fehlermeldung. *** ## Datei-Tools ### `list-files` Listet Flowstep-Dateien für den aktuellen Benutzer auf. **Eingabe** | Parameter | Typ | Standard | Beschreibung | | ----------------- | ----------------- | -------- | ----------------------------------- | | `orderByCreation` | `boolean` | `true` | Nach Erstellungsdatum sortieren | | `limit` | `integer` (1–100) | `20` | Anzahl der zurückzugebenden Dateien | | `offset` | `integer` (≥0) | `0` | Paginierungs-Offset | **Ausgabe** — JSON-Array von Dateiobjekten. ```json theme={"system"} [ { "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "name": "Dashboard redesign", "created_at": "2026-04-30T15:02:13.120152+00:00", "updated_at": "2026-04-30T15:02:13.120152+00:00", "owner": true, "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0" } ] ``` *** ### `get-file` Ruft eine einzelne Datei anhand ihrer ID ab. Der Dateiinhalt wird absichtlich weggelassen — verwenden Sie `get-screen` oder `get-screen-image`, um Screens zu prüfen, und `get-design-guidelines`, um angehängte Richtlinien abzurufen. **Eingabe** | Parameter | Typ | Beschreibung | | --------- | ------ | ------------ | | `id` | `uuid` | Datei-ID | **Ausgabe** — JSON-Dateiobjekt. ```json theme={"system"} { "file": { "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "name": "Dashboard redesign", "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d", "created_at": "2026-04-30T15:02:13.120152+00:00", "updated_at": "2026-04-30T15:02:13.120152+00:00", "access_level": "private", "owner": true, "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0" }, "user_access_level": "write" } ``` *** ### `create-file` Erstellt eine neue Flowstep-Datei. **Eingabe** | Parameter | Typ | Beschreibung | | --------- | ---------------- | ------------ | | `title` | `string` (min 1) | Dateiname | **Ausgabe** — JSON-Dateiobjekt mit der `id` der neuen Datei. ```json theme={"system"} { "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "name": "Dashboard redesign", "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d", "created_at": "2026-04-30T15:02:13.120152+00:00", "updated_at": "2026-04-30T15:02:13.120152+00:00", "access_level": "private", "user_access_level": "write", "owner": true, "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0" } ``` Verwenden Sie die zurückgegebene `id` als `fileId` in nachfolgenden Tool-Aufrufen. *** ### `update-file` Benennt eine Datei um. **Eingabe** | Parameter | Typ | Beschreibung | | --------- | ---------------- | ------------ | | `id` | `uuid` | Datei-ID | | `name` | `string` (min 1) | Neuer Name | **Ausgabe** — Aktualisiertes Dateiobjekt in der gleichen Form wie `get-file`. ```json theme={"system"} { "file": { "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "name": "Dashboard redesign (v2)", "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d", "created_at": "2026-04-30T15:02:13.120152+00:00", "updated_at": "2026-04-30T15:02:13.120152+00:00", "access_level": "private", "owner": true, "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0" }, "user_access_level": "write" } ``` *** ### `delete-file` Löscht eine Datei dauerhaft. Der `name`, den Sie übergeben, wird vor dem Löschen mit dem tatsächlichen Namen der Datei verglichen — wenn er nicht übereinstimmt, wird das Löschen abgebrochen. Dies verhindert, dass Sie versehentlich die falsche Datei löschen. **Eingabe** | Parameter | Typ | Beschreibung | | --------- | -------- | ---------------------------------------------------------------------------------------- | | `id` | `uuid` | Datei-ID | | `name` | `string` | Aktueller Name der Datei — muss genau übereinstimmen, sonst wird das Löschen abgebrochen | **Ausgabe** — `"File deleted successfully"` Dies ist nicht rückgängig zu machen. Alle Screens in der Datei werden gelöscht. *** ## Screen-Tools ### `list-screens` Listet alle generierten Screens für eine Datei auf. Verwenden Sie die zurückgegebenen `screenId`-Werte, um Screens in `get-screen`, `get-screen-image`, `upload-attachment` zu referenzieren und als `targets` in `edit-design`, `regenerate-design` oder `expand-design`. **Eingabe** | Parameter | Typ | Beschreibung | | --------- | ------ | ------------ | | `fileId` | `uuid` | Datei-ID | **Ausgabe** — JSON-Array von Screen-Zusammenfassungen. ```json theme={"system"} [ { "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe", "name": "Mobile login screen", "fidelity": "ui", "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button", "createdAt": "2026-04-30T15:02:37.444139+00:00" } ] ``` `name` ist der vom Benutzer zugewiesene Screen-Name oder `null`, wenn er unbenannt ist. *** ### `get-screen` Ruft den JSX-Code für einen Screen ab, damit Sie den Code bearbeiten oder außerhalb von Flowstep verwenden können. Verwenden Sie `get-screen-image` für eine visuelle Vorschau. **Eingabe** | Parameter | Typ | Beschreibung | | ---------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | Datei-ID | | `screenId` | `uuid` | Die `screenId`, die von `list-screens` zurückgegeben wurde, oder aus dem `screenIds`-Array, das von einem Design-Tool zurückgegeben wurde | **Ausgabe** — Der Screen als Code (JSX). Beachten Sie den Kommentar in der ersten Zeile, der bei Verwendung des `add-screen`-Tools erforderlich ist. ```json theme={"system"}
World Clock
Search cities...
...
; ``` *** ### `add-screen` Fügt einen neuen Screen zu einer Flowstep-Datei aus einer Raw JSX-Zeichenkette hinzu. **Eingabe** | Parameter | Typ | Beschreibung | | ------------ | -------- | ------------------------------------------------------------------------------------- | | `fileId` | `uuid` | Datei-ID | | `jsxContent` | `string` | JSX, das der Datei als Screen hinzugefügt werden soll | | `screenType` | `string` | Erforderlich, wenn der Screen-Typ nicht als Kommentar zu Beginn des JSX definiert ist | **Hinweis** — Ein Kommentar ähnlich dem folgenden MUSS als erste Zeile des JSX vorhanden sein, da er verwendet wird, um den Screen korrekt hinzuzufügen. `screenType`, `name` und `screenId` sind alle optional — `screenId` wird (intern) verwendet, falls vorhanden (z. B. wenn JSX aus `get-screen`-Ausgabe kopiert wird), ist aber nicht erforderlich. Der Screen-Name wird aus dem Feld `name` des Kommentars entnommen (angezeigt als „Copy of \"), oder „Untitled", falls nicht vorhanden. `` **Ausgabe** — Die neu hinzugefügte Screen-ID. ```json theme={"system"} { "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" } ``` *** ### `get-screen-image` Rendert einen Screen in PNG und gibt ihn als Inline-Bild zurück. Erfordert einen Client, der Image-Content-Blöcke unterstützt. **Eingabe** | Parameter | Typ | Beschreibung | | ---------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | Datei-ID | | `screenId` | `uuid` | Die `screenId`, die von `list-screens` zurückgegeben wurde, oder aus dem `screenIds`-Array, das von einem Design-Tool zurückgegeben wurde | **Ausgabe** — MCP-Image-Content-Block (`image/png`). *** ## KI-Tools `regenerate-design`, `expand-design` und `edit-design` erfordern Design-Kontext, der nur auf Screens vorhanden ist, die ursprünglich mit einem `designs`-Array generiert wurden. Screens, die ohne Design-Kontext generiert wurden, geben einen Fehler zurück. Workaround: Verwenden Sie `upload-attachment`, um den Screen als Bild zu rendern, und rufen Sie dann `create-new-design` mit dem Bild in `attachments` und einer Nachricht auf, die die gewünschten Änderungen beschreibt. ### `create-new-design` Generiert einen oder mehrere Screen-Designs aus einem Text-Prompt. Lassen Sie `fileId` weg, um automatisch eine neue Datei zu erstellen. Blockiert, bis die Generierung abgeschlossen ist oder das Timeout (180 Sekunden) überschritten wird. **Eingabe** | Parameter | Typ | Standard | Beschreibung | | ------------- | --------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | — | Zieldatei — weglassen, um automatisch eine neue Datei zu erstellen | | `message` | `string` | — | Prompt, der die zu generierenden Screens beschreibt | | `attachments` | `AttachmentRequestData[]` (max 5) | `[]` | Vorab hochgeladene Anlagen — Bilder, PDFs oder Code-Dateien. Laden Sie immer über `upload-attachment` hoch; fügen Sie keine Dateiinhalte in der Nachricht ein | | `designs` | `DesignRequestData[]` | `[]` | Design-Referenzen | **Ausgabe** — `{ fileId, screenIds }`. Übergeben Sie jede `screenId` an `get-screen-image`, um Ergebnisse anzuzeigen. ```json theme={"system"} { "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "screenIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"] } ``` *** ### `regenerate-design` Erstellt vorhandene Screens von vorne neu oder mit einer Stilvariation. Erfordert mindestens eine `screenId` in `targets`. Blockiert, bis die Generierung abgeschlossen ist oder das Timeout (180 Sekunden) überschritten wird. **Eingabe** | Parameter | Typ | Standard | Beschreibung | | ------------------ | ----------------------------------------------------------- | -------- | ------------------------------------------ | | `fileId` | `uuid` | — | Zieldatei | | `message` | `string` | — | Prompt-Text | | `targets` | `uuid[]` (min 1) | — | screenIds der neu zu generierenden Screens | | `operationVariant` | `"different_layout" \| "different_style" \| "from_scratch"` | — | Optionale Stilvariation | | `designs` | `DesignRequestData[]` | `[]` | Design-Referenzen (automatisch aufgelöst) | **Ausgabe** — `{ fileId, screenIds }`. Übergeben Sie jede `screenId` an `get-screen-image`, um Ergebnisse anzuzeigen. *** ### `expand-design` Fügt Nachfolge-Screens zu einem vorhandenen Design hinzu. Erfordert mindestens eine `screenId` in `targets` und eine erforderliche `operationVariant`. Blockiert, bis die Generierung abgeschlossen ist oder das Timeout (180 Sekunden) überschritten wird. **Eingabe** | Parameter | Typ | Standard | Beschreibung | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------- | | `fileId` | `uuid` | — | Zieldatei | | `message` | `string` | — | Prompt-Text | | `targets` | `uuid[]` (min 1) | — | screenIds, aus denen Screens zu erweitern sind | | `operationVariant` | `"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"` | — | **Erforderlich** — Typ des zu generierenden Nachfolge-Screens | | `designs` | `DesignRequestData[]` | `[]` | Design-Referenzen (automatisch aufgelöst) | **Ausgabe** — `{ fileId, screenIds }`. Übergeben Sie jede `screenId` an `get-screen-image`, um Ergebnisse anzuzeigen. *** ### `edit-design` Ändert vorhandene Screens über einen Prompt. Erfordert mindestens eine `screenId` in `targets`. Blockiert, bis die Generierung abgeschlossen ist oder das Timeout (180 Sekunden) überschritten wird. **Eingabe** | Parameter | Typ | Standard | Beschreibung | | ------------------ | ------------------------------------------------ | -------- | ------------------------------------------------------------------------- | | `fileId` | `uuid` | — | Zieldatei | | `message` | `string` | — | Anweisungen, die die anzuwendenden Änderungen beschreiben | | `targets` | `uuid[]` (min 1) | — | screenIds der zu bearbeitenden Screens | | `operationVariant` | `"dark_theme" \| "light_theme" \| "make_pretty"` | — | Optionale Stil-Abkürzung | | `attachments` | `AttachmentRequestData[]` (max 5) | `[]` | Vorab hochgeladene Anlagen. Laden Sie immer über `upload-attachment` hoch | | `designs` | `DesignRequestData[]` | `[]` | Design-Referenzen (automatisch aufgelöst) | **Ausgabe** — `{ fileId, screenIds }`. Übergeben Sie jede `screenId` an `get-screen-image`, um Ergebnisse anzuzeigen. *** ### `upload-attachment` Lädt eine Datei hoch, um sie als Anlage in `create-new-design` oder `edit-design` zu verwenden. Gibt `{ id, path, type, mimeType }` zurück — übergeben Sie dieses Objekt direkt in das `attachments`-Array. Zwei Modi: **Modus 1 — Screen nach ID** Übergeben Sie `screenId` und `fileId`. Der Server ruft den Screen-Status aus der Datenbank ab und rendert ihn als Bild. | Parameter | Typ | Beschreibung | | ---------- | ------ | -------------------------------------------- | | `fileId` | `uuid` | Datei, die den Screen enthält (erforderlich) | | `screenId` | `uuid` | Zu rendernder Screen | **Modus 2 — Externe Datei** Übergeben Sie Dateiinhalte direkt. Binärdateien müssen Base64-kodiert sein; Text-Dateien (einschließlich Quellcode) werden als reine UTF-8-Zeichenketten übergeben. | Parameter | Typ | Beschreibung | | ---------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | | `fileData` | `string` | Dateiinhalt — Base64 für Binär, UTF-8-Zeichenkette für Text | | `fileName` | `string` | Ursprünglicher Dateiname | | `mimeType` | `"image/jpeg" \| "image/png" \| "image/webp" \| "application/pdf" \| "text/plain" \| "text/javascript"` | MIME-Typ. Verwenden Sie `text/javascript` für `.jsx`-, `.tsx`-, `.js`-, `.ts`-Dateien | Max. Dateigröße: **3 MB**. Bevorzugen Sie für große Bilder `image/jpeg` gegenüber `image/png`. **Ausgabe** ```json theme={"system"} { "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890", "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890", "type": "image", "mimeType": "image/jpeg" } ``` `type` ist `"image"` für Bild-/PDF-Uploads und `"document"` für Text-/Code-Dateien. *** ## Chat-Tools ### `get-chat-history` Ruft den Chat-Nachrichtenverlauf für eine Datei ab. **Eingabe** | Parameter | Typ | Beschreibung | | --------- | ------ | ------------ | | `fileId` | `uuid` | Datei-ID | **Ausgabe** — JSON-Objekt mit einem `messages`-Array. Jede Nachricht hat einen `type` (`"request"` oder `"response"`), `author` (`"human"` oder `"ai"`) und `content_type` (`"text"`, `"summary"` oder `"followup"`). ```json theme={"system"} { "messages": [ { "id": "453f593d-2380-425b-ba29-127db08d6a8e", "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b", "type": "request", "status": "success", "content": "Generate a simple mobile login screen with email and password fields", "author": "human", "content_type": "text", "sequence": 1, "request_message_id": null, "targets": [], "attachments": [] }, { "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf", "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b", "type": "response", "status": "success", "content": "Generated a mobile login screen with email and password input fields, sign in button, remember me checkbox, forgot password link, social login options (Apple/Google), and sign up link.", "author": "ai", "content_type": "summary", "sequence": 7, "request_message_id": "453f593d-2380-425b-ba29-127db08d6a8e", "targets": [{ "target_id": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" }], "attachments": [] } ] } ``` *** ## Design-Tools ### `get-design-guidelines` Ruft die Design-Richtlinien ab, die für eine Datei gespeichert sind. **Eingabe** | Parameter | Typ | Standard | Beschreibung | | ------------ | -------- | -------- | ------------- | | `resourceId` | `uuid` | — | Datei-ID | | `linkedTo` | `"file"` | `"file"` | Ressourcentyp | **Ausgabe** ```json theme={"system"} { "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter", "linkedTo": "file" } ``` `guidelines` ist `null`, wenn keine Richtlinien festgelegt wurden. *** ### `update-design-guidelines` Legt Design-Richtlinien für eine Datei fest oder ersetzt sie. Richtlinien werden als reine Text-Zeichenkette im Google `design.md`-Format übergeben — übergeben Sie kein Objekt oder JSON. Der Server führt weiche Validierung durch und kann einen `Warnings:`-Abschnitt in der Antwort zurückgeben, der Probleme auflistet (unbekannte Schlüssel, nicht-Hex-Farben), die akzeptiert, aber möglicherweise vom KI ignoriert werden. Zeigen Sie diese dem Benutzer an. **Eingabe** | Parameter | Typ | Standard | Beschreibung | | ------------------ | ---------------- | -------- | --------------------------------------------------------------------------------------- | | `resourceId` | `uuid` | — | Datei-ID | | `designGuidelines` | `string` (min 1) | — | Raw-Text-Inhalt der Richtlinien. Muss eine reine Zeichenkette sein — nicht JSON-kodiert | | `linkedTo` | `"file"` | `"file"` | Ressourcentyp | **Validierungsregeln** * Frontmatter muss korrekt geöffnet und geschlossen werden * Frontmatter-Zeilen müssen gültiges Block-Stil-YAML sein * Markdown-Body darf keine doppelten `##`-Abschnittsüberschriften enthalten **Ausgabe** — `"Design guidelines updated successfully"`, optional gefolgt von einem `Warnings:`-Abschnitt. *** ### `delete-design-guidelines` Löscht die Design-Richtlinien für eine Datei. **Eingabe** | Parameter | Typ | Standard | Beschreibung | | ------------ | -------- | -------- | ------------- | | `resourceId` | `uuid` | — | Datei-ID | | `linkedTo` | `"file"` | `"file"` | Ressourcentyp | **Ausgabe** — `"Design guidelines deleted successfully"` *** ## Figma-Tools ### `import-figma` Importiert einen Figma-Frame als editierbare Elemente auf der Canvas einer Flowstep-Datei. Das erneute Importieren desselben Frames aktualisiert ihn an Ort und Stelle. Die Organisation der Datei muss zuerst Figma in den Flowstep-Einstellungen verbunden haben. **Eingabe** | Parameter | Typ | Beschreibung | | ---------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `figmaUrl` | `string` | Link zu einem bestimmten Figma-Frame. Klicken Sie in Figma mit der rechten Maustaste auf den Frame und wählen Sie **Copy link to selection**. Ein Link zu einer Seite importiert alle Top-Level-Frames auf dieser Seite (auf MCP begrenzt auf 20 Frames). | | `fileId` | `uuid` | Die Flowstep-Datei, in die der Frame importiert werden soll | **Ausgabe** — `{ fileId, screenId }`. `screenId` ist die ID des importierten Screen-Elements — übergeben Sie sie an `get-screen-image`, um das Ergebnis anzuzeigen. Wenn eine Seiten-URL mehrere Frames importiert, ist `screenId` `null` und `frameCount` wird stattdessen zurückgegeben. ```json theme={"system"} { "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" } ``` *** ## Abrechnungs-Tools ### `get-plan-details` Ruft den aktuellen Tarif des Benutzers, den Abonnementstatus und das verbleibende Kontingent ab. Nimmt keine Eingabe an. **Ausgabe** ```json theme={"system"} { "plan": { "name": "Starter", "code": "starter", "type": "paid" }, "subscription": { "isPaid": true, "isTrial": false, "startDate": "2025-01-01T00:00:00Z", "endDate": null, "trialDaysRemaining": null }, "limits": { "messages": { "daily": { "max": 50, "warn": 40 }, "monthly": { "max": 500, "warn": 400 }, "unlimited": false } }, "usage": { "messages": { "daily": 12, "monthly": 87 } }, "remaining": { "messages": { "daily": 38, "monthly": 413 } } } ``` Limits variieren je nach Tarif. Rufen Sie dieses Tool vor mehreren Generierungen auf, um das verfügbare Kontingent zu überprüfen.