MCP-Tools-Referenz

Alle Tools geben ein content-Array von MCP-Content-Blöcken zurück. Text-Tools geben { type: "text", text: "<json-string>" } zurück. Bild-Tools geben { type: "image", data: "<base64>", 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.

[
  {
    "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.

{
  "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.

{
  "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.

{
  "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.

[
  {
    "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.

<!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" screenId: "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0" -->
<div className="bg-white text-zinc-950 w-full h-fit">
  <div className="flex p-6 flex-col gap-6">
    <div className="flex pt-4 justify-between items-center">
      <ArrowLeft className="size-5 text-[#71717b]" />
      <span className="font-semibold text-zinc-950 text-lg leading-7">
        World Clock
      </span>
      <Plus className="size-5 text-[#2b7fff]" />
    </div>
    <div className="rounded-xl bg-zinc-100 flex p-2 items-center gap-2">
      <Search className="size-4 text-[#71717b] ml-2" />
      <span className="text-[#71717b] text-sm leading-5">Search cities...</span>
    </div>
...
    <div className="flex pt-2 pb-4 justify-center items-center gap-4">
      <Button variant="outline" className="rounded-full px-6 gap-2">
        <Clock className="size-4" />
        <span>Compare</span>
      </Button>
      <Button className="rounded-full bg-[#2b7fff] text-blue-50 px-6 gap-2">
        <Bell className="size-4" />
        <span>Set Alert</span>
      </Button>
    </div>
  </div>
</div>;

`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 <name>”), oder „Untitled”, falls nicht vorhanden.  Ausgabe — Die neu hinzugefügte Screen-ID.

{ "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.

{
  "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

{
  "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").

{
  "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

{
  "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.

{
  "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

{
  "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.

Erste Schritte

Flowstep verwenden

Teams & Organisationen

Export & Integrationen

MCP-Server

Abrechnung & Tarife

Sicherheit & Datenschutz

MCP-Tools-Referenz

Datei-Tools

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Screen-Tools

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

KI-Tools

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Chat-Tools

`get-chat-history`

Design-Tools

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Figma-Tools

`import-figma`

Abrechnungs-Tools

`get-plan-details`

​Datei-Tools

​list-files

​get-file

​create-file

​update-file

​delete-file

​Screen-Tools

​list-screens

​get-screen

​add-screen

​get-screen-image

​KI-Tools

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

​Chat-Tools

​get-chat-history

​Design-Tools

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Figma-Tools

​import-figma

​Abrechnungs-Tools

​get-plan-details

Datei-Tools

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Screen-Tools

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

KI-Tools

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Chat-Tools

`get-chat-history`

Design-Tools

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Figma-Tools

`import-figma`

Abrechnungs-Tools

`get-plan-details`