MCP-Tool-Referenz

Bei Erfolg liefert jedes Tool außer get-screen-image sein Ergebnis zweimal: als structuredContent (gegen das veröffentlichte Ausgabeschema des Tools geprüft) und als dasselbe Objekt, serialisiert in einen Textblock { type: "text", text: "<json-string>" }. Letzteres ist für Clients gedacht, die keine strukturierten Inhalte lesen. get-screen-image liefert nur einen MCP-Bildblock: { type: "image", data: "<base64>", mimeType: "image/png" }. Bei einem Fehler wird isError: true gesetzt, und der Textblock enthält eine kurze Fehlermeldung. Fehler, die Sie beheben können, etwa eine Namensabweichung beim Löschen, ein ungültiger Figma-Link, ungültige Design-Richtlinien, ein Problem mit einem Anhang oder eine Zeitüberschreitung bei der Generierung, erklären, was Sie korrigieren müssen. Andere Fehler liefern eine allgemeine Meldung wie Failed to list files.

Preise: Die drei KI-Design-Tools, also ai-design-screens, ai-generate-screen-variant und ai-edit-screen-variant, nutzen dasselbe Nachrichtenkontingent wie die Flowstep-App. Alle anderen Tools sind kostenlos. Weitere Informationen finden Sie unter Nutzungslimits.

Jedes Tool veröffentlicht außerdem MCP-Annotationen, damit Ihr Client weiß, was es tut. delete-file, delete-screen, delete-design-guidelines, replace-screen-jsx, ai-design-screens und ai-edit-screen-variant sind als destruktiv gekennzeichnet, weil sie bestehende Inhalte entfernen oder überschreiben.

Datei-Tools

`list-files`

Listet die Metadaten Ihrer Flowstep-Dateien auf. Rufen Sie dies zuerst auf, um zu prüfen, ob eine passende Datei bereits existiert. Es werden keine Screen-Inhalte zurückgegeben. Verwenden Sie dafür get-screen-image oder get-screen-jsx. Eingabe

Parameter	Typ	Standard	Beschreibung
`orderByCreation`	`boolean`	`true`	Sortiert die neuesten zuerst nach `created_at` (`true`) oder nach `updated_at` (`false`). Verwenden Sie `false`, um zuletzt bearbeitete Dateien zu finden
`limit`	`integer` (1–100)	`20`	Maximale Anzahl zurückgegebener Dateien. Eine volle Seite bedeutet, dass möglicherweise weitere Dateien existieren
`offset`	`integer` (≥0)	`0`	Anzahl der zu überspringenden Dateien. Die nächste Seite beginnt bei `offset + limit`

Ausgabe — { files }.

{
  "files": [
    {
      "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",
      "organisation_id": "0b7f3c9e-2d4a-4f1b-9a5e-6c8d7e1f2a3b",
      "shared_with_me": false,
      "owner": true,
      "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
    }
  ]
}

owner: true, wenn Sie die Datei erstellt haben.
shared_with_me: true, wenn die Datei direkt mit Ihnen geteilt wurde, nicht nur über Ihre Organisation.
url: öffnet die Datei im Flowstep-Editor.

`get-file`

Ruft die Metadaten einer einzelnen Datei ab. Der Dateiinhalt ist absichtlich nicht enthalten. Verwenden Sie get-screen-image oder get-screen-jsx, um Screens zu prüfen, und get-design-guidelines, um angehängte Richtlinien abzurufen. Wenn Sie eine ausstehende Einladung zur Datei haben, nimmt get-file sie an. Eingabe

Parameter	Typ	Beschreibung
`id`	`uuid`	Datei-ID

Ausgabe — { file, user_access_level }.

{
  "file": {
    "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",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "access_level": "private",
    "visibility": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

access_level: private, read oder write.
visibility: private, member oder public.
user_access_level: Ihr Zugriff auf die Datei, also read oder write.

`create-file`

Erstellt eine leere Flowstep-Datei ohne Screens. Um eine Datei zu erstellen und im selben Schritt Screens zu generieren, rufen Sie stattdessen ai-design-screens ohne fileId auf. Verwenden Sie create-file für Code-first-Workflows, gefolgt von add-screen-jsx. Eingabe

Parameter	Typ	Beschreibung
`name`	`string` (min. 1)	Anzeigename der neuen Datei

Ausgabe — { file, user_access_level }, in derselben Form wie bei get-file. owner ist immer true, und user_access_level ist immer write. Verwenden Sie die zurückgegebene file.id als fileId in den folgenden Tool-Aufrufen.

`update-file`

Benennt eine Datei um. Eingabe

Parameter	Typ	Beschreibung
`id`	`uuid`	Datei-ID
`name`	`string` (min. 1)	Neuer Anzeigename

Ausgabe — { file, user_access_level }, in derselben Form wie bei get-file.

`delete-file`

Löscht eine Datei dauerhaft. Der übergebene name wird vor dem Löschen mit dem aktuellen Anzeigenamen der Datei verglichen. Stimmt er nicht überein, wird das Löschen abgebrochen. So wird verhindert, dass versehentlich die falsche Datei gelöscht wird. Agenten sind angewiesen, vorher bei Ihnen nachzufragen. Eingabe

Parameter	Typ	Beschreibung
`id`	`uuid`	Datei-ID
`name`	`string`	Aktueller Anzeigename der Datei. Muss übereinstimmen, sonst wird das Löschen abgebrochen

Ausgabe — { "deleted": true }

Dies ist nicht rückgängig zu machen. Alle Screens in der Datei werden gelöscht.

Screen-Tools

`list-screens`

Listet die Screens einer Datei in der Canvas-Reihenfolge auf. Rufen Sie dies nach list-files auf, um zu sehen, was eine Datei bereits enthält. Verwenden Sie die zurückgegebenen screenId-Werte mit den anderen Screen-Tools und den KI-Design-Tools. Eingabe

Parameter	Typ	Beschreibung
`fileId`	`uuid`	Datei-ID

Ausgabe — { screens }.

{
  "screens": [
    {
      "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
      "name": "Mobile login screen",
      "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
      "fidelity": "ui"
    }
  ]
}

prompt: der letzte Generierungs-Prompt des Screens oder ein leerer String, wenn er nie generiert wurde (zum Beispiel bei einem Screen, der mit add-screen-jsx hinzugefügt wurde).
fidelity: lofi, hifi oder ui.

`get-screen-image`

Rendert einen Screen als PNG und gibt ihn als eingebettetes Bild zurück. Erfordert einen Client, der Bild-Inhaltsblöcke unterstützt. Rufen Sie das Tool einmal für jede screenId auf, die ein KI-Design-Tool, add-screen-jsx, replace-screen-jsx oder import-figma zurückgibt. Eingabe

Parameter	Typ	Beschreibung
`fileId`	`uuid`	Datei-ID
`screenId`	`uuid`	Eine `screenId` aus `list-screens` oder aus dem Array `screenIds`, das ein Design-Tool zurückgibt

Ausgabe — MCP-Bild-Inhaltsblock (image/png). data ist Standard-Base64 der PNG-Bytes, kein Data-URI. Für dieses Tool gibt es kein structuredContent.

`get-screen-jsx`

Ruft einen Screen als JSX sowie seine Metadaten ab, damit Sie darauf in Ihrer Codebasis aufbauen oder ihn bearbeiten und mit replace-screen-jsx zurückschreiben können. Verwenden Sie für eine visuelle Vorschau stattdessen get-screen-image. Eingabe

Parameter	Typ	Standard	Beschreibung
`fileId`	`uuid`	—	Datei-ID
`screenId`	`uuid`	—	Eine `screenId` aus `list-screens` oder aus dem Array `screenIds`, das ein Design-Tool zurückgibt
`includeIds`	`boolean`	`false`	Fügt Elementen in `jsx` ein `data-id`-Attribut hinzu. Verwenden Sie es, wenn Sie Element-IDs als `elementIds` an `ai-design-screens` übergeben möchten, entweder zur Bearbeitung an Ort und Stelle oder als visuelle Referenz

Ausgabe — { fileId, screenId, name, prompt, fidelity, screenType, colorTheme, jsx, fragments }.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0",
  "name": "World clock",
  "prompt": "A world clock screen with a city search and alert button",
  "fidelity": "ui",
  "screenType": "iphone-x-vertical",
  "colorTheme": "blue",
  "jsx": "<div className=\"bg-white text-zinc-950 w-full h-fit\">\n  <div className=\"flex p-6 flex-col gap-6\">\n    …\n  </div>\n</div>",
  "fragments": []
}

jsx: nur Markup. data-id-Attribute sind nur enthalten, wenn includeIds auf true gesetzt ist.
prompt: der letzte Generierungs-Prompt oder ein leerer String, wenn der Screen nie generiert wurde.
fragments: gemeinsam genutzte Elemente des Screens, etwa Navigationsleiste, Kopfzeile oder Logo, als Objekte { purpose, markup }. Leer, wenn keine vorhanden sind. Übergeben Sie sie an replace-screen-jsx, um sie zu behalten oder zu aktualisieren.

Die Werte für fidelity, screenType und colorTheme finden Sie unter Screen field values.

`add-screen-jsx`

Fügt einer Datei einen neuen Screen aus JSX hinzu, das Sie selbst geschrieben haben. Dies ist der Code-first-Weg und ist kostenlos. Verwenden Sie ai-design-screens, wenn die KI von Flowstep den Screen gestalten soll. add-screen-jsx erstellt immer einen neuen Screen. Um einen bestehenden Screen zu überschreiben, verwenden Sie replace-screen-jsx. Informationen zum Einfügen eines eigenen Bilds finden Sie unter Bilder in JSX. Wenn der neue Screen auf einem bestehenden basiert, beginnen Sie mit get-screen-jsx (ohne includeIds) für name, fidelity, screenType, colorTheme und jsx. Ändern Sie danach, was sich unterscheiden soll. Eingabe

Parameter	Typ	Standard	Beschreibung
`fileId`	`uuid`	—	Datei-ID
`name`	`string` (1–100 Zeichen)	—	Optionaler Anzeigename. Lassen Sie ihn weg, um den Screen automatisch als `Screen N` zu benennen
`fidelity`	`string`	`"ui"`	Detailgrad des Screens
`screenType`	`string`	—	Pflichtfeld: das Gerät oder der Viewport, für den der Screen gestaltet ist
`colorTheme`	`string`	`"default"`	Farbschema
`jsx`	`string`	—	Nur JSX-Markup. Alle `data-id`-Attribute werden ignoriert. Der neue Screen erhält neue Element-IDs

Ausgabe — { fileId, screenId }. Rufen Sie get-screen-image mit screenId auf, um das Ergebnis zu sehen.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf"
}

`replace-screen-jsx`

Überschreibt einen bestehenden Screen mit JSX, das Sie selbst geschrieben haben. Der Screen behält seine screenId und seine Position auf der Canvas. Verschachtelte Elemente erhalten neue IDs. Dies ist der Code-first-Weg und ist kostenlos. Verwenden Sie ai-design-screens oder ai-edit-screen-variant für KI-Änderungen und add-screen-jsx, um stattdessen einen neuen Screen anzulegen. Beginnen Sie mit get-screen-jsx (ohne includeIds) und ändern Sie danach, was sich unterscheiden soll. Informationen zum Einfügen eines eigenen Bilds finden Sie unter Bilder in JSX. Eingabe

Parameter	Typ	Beschreibung
`fileId`	`uuid`	Datei-ID
`screenId`	`uuid`	Der Screen, der überschrieben werden soll
`jsx`	`string`	Nur JSX-Markup. Alle `data-id`-Attribute werden ignoriert
`name`	`string` (1–100 Zeichen)	Optional. Lassen Sie es weg, um den aktuellen Namen zu behalten
`fidelity`	`string`	Optional. Lassen Sie es weg, um den aktuellen Detailgrad zu behalten
`screenType`	`string`	Optional. Lassen Sie es weg, um den aktuellen Screen-Typ zu behalten
`colorTheme`	`string`	Optional. Lassen Sie es weg, um das aktuelle Farbschema zu behalten
`fragments`	`{ purpose, markup }[]`	Optional: gemeinsam genutzte Elemente aus `get-screen-jsx`. Lassen Sie es weg, um die aktuellen Fragmente zu behalten, oder übergeben Sie `[]`, um sie zu entfernen

Ausgabe — { fileId, screenId }. Rufen Sie get-screen-image mit screenId auf, um das Ergebnis zu sehen.

Dies ersetzt den Inhalt des Screens an Ort und Stelle.

`rename-screen`

Benennt die Canvas-Bezeichnung eines Screens um. Das ist der Name, der in list-screens und im Editor angezeigt wird. Es ändert nur die Bezeichnung, nicht Layout, Größe oder Inhalt des Screens. Verwenden Sie dafür ai-design-screens. Eingabe

Parameter	Typ	Beschreibung
`fileId`	`uuid`	Datei-ID
`screenId`	`uuid`	Die `screenId` aus `list-screens`
`name`	`string` (1–100 Zeichen)	Neuer Screen-Name. Führende und nachgestellte Leerzeichen werden entfernt

Ausgabe — { screenId, name }.

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe", "name": "Checkout — empty cart" }

`delete-screen`

Löscht einen Screen dauerhaft aus einer Datei. Der übergebene name wird mit dem aktuellen Anzeigenamen des Screens verglichen. Stimmt er nicht überein, wird das Löschen abgebrochen. Agenten sind angewiesen, vorher bei Ihnen nachzufragen. Eingabe

Parameter	Typ	Beschreibung
`fileId`	`uuid`	Datei-ID
`screenId`	`uuid`	Der Screen, der gelöscht werden soll
`name`	`string`	Aktueller Anzeigename des Screens. Muss übereinstimmen, sonst wird das Löschen abgebrochen

Ausgabe — { "deleted": true }

Bilder in JSX

add-screen-jsx und replace-screen-jsx akzeptieren Bilder in einem img-src oder als Hintergrund in className mit bg-[url(...)]. Schreiben Sie alt-Text und dimensionieren Sie jedes Bild passend zu seinem Zweck. Um ein eigenes Bild einzufügen:

Laden Sie es mit upload-attachment in Modus A hoch (mimeType + fileName) und führen Sie den zurückgegebenen uploadCommand aus.
Wenn der type der Antwort "image" ist, fügen Sie die assetUrl genau so, wie sie zurückgegeben wurde, in img src oder bg-[url(assetUrl)] ein.

Lassen Sie alle anderen Bild-URLs genau so, wie get-screen-jsx sie zurückgegeben hat. Setzen Sie path, signedUrl oder uploadCommand nicht in src.

<img src="ASSET_URL" alt="Team photo" className="w-full h-48 object-cover rounded-lg" />

Screen field values

get-screen-jsx gibt diese Werte zurück, und add-screen-jsx sowie replace-screen-jsx akzeptieren sie:

Feld	Werte
`fidelity`	`lofi`, `hifi`, `ui`
`screenType`	`web`, `desktop`, `desktop-large`, `desktop-medium`, `desktop-small`, `tablet`, `ipad-tablet-horizontal`, `ipad-tablet-vertical`, `android-tablet-horizontal`, `android-tablet-vertical`, `mobile_ios`, `mobile_android`, `iphone-vertical`, `iphone-horizontal`, `iphone-x-vertical`, `iphone-x-horizontal`, `android-vertical`, `android-horizontal`, `android-small-vertical`, `android-small-horizontal`
`colorTheme`	`default`, `defaultDark`, `blue`, `blueDark`, `ice`, `iceDark`, `grayscale`, `grayscaleDark`, `green`, `greenDark`, `orange`, `orangeDark`, `red`, `redDark`, `rose`, `roseDark`, `violet`, `violetDark`, `yellow`, `yellowDark`

Tools für Design-Richtlinien

Design-Richtlinien sind DESIGN.md-Text, der in einer Datei gespeichert wird. Ist er gesetzt, wird er in jede KI-Generierung für diese Datei eingefügt. Siehe Design-Richtlinien.

`get-design-guidelines`

Ruft die Design-Richtlinien ab, die einer Datei zugeordnet sind. Eingabe

Parameter	Typ	Beschreibung
`fileId`	`uuid`	Datei-ID

Ausgabe — { guidelines }.

{
  "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter"
}

guidelines ist null, wenn keine Richtlinien festgelegt wurden.

`update-design-guidelines`

Legt die Design-Richtlinien einer Datei fest oder ersetzt sie. Übergeben Sie die Richtlinien als einfachen String im DESIGN.md-Format von Google, nicht als Objekt oder JSON. Wenn Sie aus einer Datei lesen, übergeben Sie deren Text. Eingabe

Parameter	Typ	Beschreibung
`fileId`	`uuid`	Datei-ID
`designGuidelines`	`string` (min. 1)	Rohtext der Richtlinien. Muss ein einfacher String sein, nicht JSON-kodiert

Validierungsregeln

Der Frontmatter muss korrekt geöffnet und geschlossen sein
Frontmatter-Zeilen müssen gültiges YAML im Blockstil sein
Der Markdown-Text darf keine doppelten ##-Abschnittsüberschriften enthalten

Schlägt die Validierung fehl, gibt der Aufruf einen Fehler zurück, der mit Invalid design guidelines: beginnt. Ausgabe — { updated, warnings? }.

{ "updated": true, "warnings": ["…"] }

warnings listet weiche Validierungsprobleme auf, etwa unbekannte Schlüssel oder Farben, die nicht im Hex-Format sind. Diese Einträge wurden akzeptiert, werden von der KI aber möglicherweise ignoriert. Das Feld fehlt, wenn keine Warnungen vorliegen. Zeigen Sie diese Hinweise Ihrem Nutzer an.

`delete-design-guidelines`

Entfernt die Design-Richtlinien einer Datei. Das Löschen nicht vorhandener Richtlinien hat keine Auswirkung. Eingabe

Parameter	Typ	Beschreibung
`fileId`	`uuid`	Datei-ID

Ausgabe — { "deleted": true }

Chat-Tools

`get-chat-history`

Ruft die Design-Unterhaltung ab, die mit einer Datei verknüpft ist. Gemeint ist der Flowstep-Chat der Datei, nicht die Unterhaltung in Ihrem MCP-Client. Verwenden Sie das Tool, um frühere Arbeit an der Datei fortzusetzen. Eingabe

Parameter	Typ	Beschreibung
`fileId`	`uuid`	Datei-ID

Ausgabe — { messages }. messages ist leer, wenn Sie auf der Datei keine Design-Unterhaltung haben. Jede Nachricht hat einen type ("request" oder "response"), einen author ("human" oder "ai") und einen content_type. Antwortnachrichten verwenden "text", "summary" oder "followup".

{
  "messages": [
    {
      "id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "type": "request",
      "status": "success",
      "content": "Generate a simple mobile login screen with email and password fields",
      "author": "human",
      "content_type": "text",
      "sequence": 1,
      "targets": [],
      "attachments": []
    },
    {
      "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
      "type": "response",
      "status": "success",
      "content": "Generated a mobile login screen with email and password input fields, a sign in button, and a 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" }]
    }
  ]
}

Anhang-Tools

`upload-attachment`

Lädt eine Referenzdatei hoch, die als Anhang in ai-design-screens verwendet werden kann, oder ein Bild, das Sie mit add-screen-jsx oder replace-screen-jsx in Ihr eigenes JSX einfügen. ai-generate-screen-variant und ai-edit-screen-variant nehmen keine Anhänge. Dateibytes laufen nie über das Modell, und der Server ruft niemals URLs in Ihrem Auftrag ab. Um auf eine Webseite zu verweisen, fügen Sie deren URL stattdessen in die message von ai-design-screens ein. Es gibt zwei Modi. Verwenden Sie genau einen und kombinieren Sie sie nicht. Modus A: Dateien und Bilder (mimeType + fileName) Für jedes Bild, jede PDF-Datei und jede größere Textdatei ist ein dreistufiger Ablauf erforderlich:

Rufen Sie upload-attachment nur mit mimeType und fileName auf (zum Beispiel image/png und dog.png). Die Antwort ist ein vorbereiteter Upload, keine gespeicherte Datei:

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "assetUrl": "https://…",
  "type": "image",
  "mimeType": "image/png",
  "signedUrl": "https://…",
  "uploadCommand": "curl -sS -f -X PUT '…' -H 'Content-Type: image/png' -H 'x-metadata: …' --data-binary @LOCAL_FILE_PATH",
  "nextStep": "…"
}

Ersetzen Sie LOCAL_FILE_PATH in uploadCommand durch den absoluten Pfad zu Ihrer Datei und führen Sie genau diesen Befehl in Ihrer Shell aus. Er muss mit Exit-Code 0 enden. Das Token in signedUrl autorisiert nur diesen einen Upload. Wenn Sie diesen Schritt auslassen, bleibt der Speicher leer, und die Vorabprüfung des Design-Tools schlägt fehl.
Übergeben Sie nur { id, path, type } in das Array attachments von ai-design-screens, nicht signedUrl, uploadCommand oder nextStep. Um stattdessen ein Bild in Ihr eigenes JSX einzufügen, übergeben Sie assetUrl im img src oder bg-[url(...)] des JSX, das Sie an add-screen-jsx oder replace-screen-jsx senden. Siehe Bilder in JSX.

Um eine entfernte Datei anzuhängen, laden Sie sie zuerst selbst auf einen lokalen Pfad herunter (zum Beispiel mit curl) und folgen Sie dann denselben drei Schritten. Übergeben Sie nie eine URL an upload-attachment.

Parameter	Typ	Beschreibung
`mimeType`	Enum	MIME-Typ der Datei. Einer von `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`. Verwenden Sie `text/javascript` für `.jsx`-, `.tsx`-, `.js`- und `.ts`-Dateien
`fileName`	`string` (min. 1)	Ursprünglicher Dateiname mit Erweiterung, zum Beispiel `cat.png` oder `design.md`

Modus B: kurzer Text (text + mimeType) Laden Sie Text hoch, der bereits im Kontext steht. Ein Shell-Befehl ist nicht nötig. Die Antwort können Sie direkt verwenden:

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "assetUrl": "https://…",
  "type": "document",
  "mimeType": "text/plain"
}

Parameter	Typ	Beschreibung
`text`	`string` (max. 64.000 Zeichen)	Rohtextinhalt. Nur für Textdateien, nicht für Bilder oder PDFs. Ist der Text länger als 64.000 Zeichen, verwenden Sie Modus A
`mimeType`	Enum	Einer von `text/markdown`, `text/plain`, `text/javascript`

Übergeben Sie das resultierende { id, path, type } in das Array attachments von ai-design-screens. Die maximale Dateigröße beträgt in beiden Modi 3 MB. PDFs sind auf 100 Seiten begrenzt. Ausgabe — { id, path, assetUrl, type, mimeType, signedUrl?, uploadCommand?, nextStep? }.

type: "image" für Bilddateien und "document" für PDFs und Textdateien.
assetUrl: die URL der hochgeladenen Datei, in beiden Modi zurückgegeben. Verwenden Sie sie im JSX für add-screen-jsx oder replace-screen-jsx nur, wenn type den Wert "image" hat, und erst nachdem der uploadCommand aus Modus A ausgeführt wurde.
signedUrl, uploadCommand, nextStep: nur in Modus A gesetzt. Übergeben Sie sie nicht an Design-Tools.

Figma-Tools

`import-figma`

Importiert einen Figma-Frame als bearbeitbare Elemente auf die Canvas einer Flowstep-Datei. Jeder Import erstellt einen neuen Screen. Wenn Sie denselben Frame zweimal importieren, erhalten Sie zwei Screens. Wenn Sie den alten ersetzen wollten, löschen Sie ihn mit delete-screen. Die Organisation der Datei muss Figma in den Flowstep-Einstellungen verbunden haben. Eingabe

Parameter	Typ	Beschreibung
`fileId`	`uuid`	Die Flowstep-Datei, in die der Frame importiert wird. Dies ist nicht der Figma-Dateischlüssel aus `figmaUrl`
`figmaUrl`	`string`	Link zu einem bestimmten Figma-Frame mit einer `node-id`. Klicken Sie in Figma mit der rechten Maustaste auf den Frame und wählen Sie Copy/Paste as → Copy link to selection. Ein Link zu einer Seite importiert alle obersten Frames dieser Seite (über MCP auf 20 Frames begrenzt)

Ausgabe — { fileId, screenId, frameCount? }. screenId ist der importierte Screen. Übergeben Sie ihn an get-screen-image, um das Ergebnis zu sehen. Wenn eine Seiten-URL mehrere Frames importiert, ist screenId null, und stattdessen wird frameCount zurückgegeben. Rufen Sie dann list-screens auf und danach für jeden neuen Screen get-screen-image.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe"
}

Tarif- und Abrechnungs-Tools

`get-plan-details`

Ruft den Flowstep-Tarif Ihrer Organisation, den Abonnementstatus, die Nutzung und das verbleibende Kontingent ab. Es gibt keine Eingabe. Die Organisation wird über den angemeldeten Nutzer ermittelt. Verwenden Sie das Tool, um Ihr Kontingent zu prüfen, bevor Sie die KI-Design-Tools aufrufen. Ausgabe — { plan, subscription, limits, usage, remaining }.

Feld	Beschreibung
`plan`	`{ name, code, type }`. `type` ist `"free"` oder `"paid"`
`subscription`	`{ isPaid, isTrial, startDate, endDate, trialDaysRemaining }`
`limits`	Limits pro Funktion, geordnet nach Funktion (zum Beispiel `messages`). Jede Funktion hat optionale Objekte `daily` und `monthly` mit den Werten `max` und `warn` sowie ein Flag `unlimited`
`usage`	Bisherige Nutzung pro Funktion als `{ daily, monthly }`
`remaining`	Verbleibendes Kontingent pro Funktion als `{ daily, monthly }`. Fehlt bei unbegrenzten Funktionen

Die Limits hängen vom Tarif ab. Siehe Preise und Nutzungslimits.

AI-Design-Tools

Diese drei Tools entwerfen anhand einer Beschreibung oder eines Presets. Sie nehmen oder verwenden nie JSX wieder. Jeder Aufruf nutzt dasselbe Nachrichtenkontingent wie die Flowstep-App und blockiert, bis die Generierung abgeschlossen ist oder das Zeitlimit von 180 Sekunden erreicht ist.

Tool	Verwenden Sie es, um
`ai-design-screens`	Neue Screens generieren, bestehende Screens direkt ändern oder beides aus einer freien Beschreibung
`ai-generate-screen-variant`	Den nächsten Schritt im Flow, einen Fehler- oder Leerzustand oder eine Plattformvariante eines bestehenden Screens hinzufügen
`ai-edit-screen-variant`	Ein Bearbeitungs- oder Redesign-Preset auf einen ganzen bestehenden Screen anwenden

Alle drei geben { status, fileId, screenIds, designGuidelinesUpdated } zurück. Rufen Sie für jede screenId einmal get-screen-image auf, um das Ergebnis zu sehen.

designGuidelinesUpdated: eine kurze Zusammenfassung der Änderung, wenn die DESIGN.md-Richtlinien der Datei während dieses Durchgangs automatisch aktualisiert wurden. Andernfalls null.

`ai-design-screens`

Generiert einen oder mehrere neue Screens, ändert bestehende Screens direkt oder erledigt beides in einem Aufruf anhand einer Textbeschreibung. Dazu gehören neue Abläufe, Theming, Texte, Layout oder abgestimmte Änderungen über mehrere Screens hinweg. Dies ist derselbe Design-Agent wie der Chat im Flowstep-Editor. Er entscheidet anhand Ihrer message und elementIds, was erstellt und was geändert wird. Lassen Sie fileId weg, um eine neue Datei zu starten. Übergeben Sie fileId, um in einer bestehenden Datei zu arbeiten. Wenn sich die Anfrage auf eine bereits vorhandene Datei beziehen könnte, sollte Ihr Agent zuerst list-files und list-screens prüfen. Für einen nächsten Schritt, einen Fehler- oder Leerzustand oder eine Plattformvariante eines Screens verwenden Sie ai-generate-screen-variant. Für ein Preset-Redesign oder eine Preset-Bearbeitung eines Screens verwenden Sie ai-edit-screen-variant. Wenn Sie bereits JSX haben, verwenden Sie stattdessen add-screen-jsx oder replace-screen-jsx. Eingabe

Parameter	Typ	Standard	Beschreibung
`fileId`	`uuid`	—	Zieldatei. Lassen Sie es weg, um eine neue Datei zu erstellen. Erforderlich, wenn `elementIds` gesetzt ist
`message`	`string`	—	Beschreibung der zu generierenden Screens und/oder der vorzunehmenden Änderungen. Wenn Sie `elementIds` übergeben, geben Sie an, ob diese bearbeitet oder als Referenz verwendet werden sollen. Fügen Sie hier alle Webseiten-URLs ein, auf die sich Flowstep beziehen soll
`elementIds`	`uuid[]`	`[]`	Optionale `screenId`s aus `list-screens` und/oder Element-`data-id`s aus `get-screen-jsx` (mit `includeIds`), ähnlich einer Auswahl im Editor. Sie können direkt bearbeitet oder als visuelle Referenz für neue Screens verwendet werden. Eine `screenId` bezieht sich auf den gesamten Screen
`attachments`	`{ id, path, type }[]` (max. 5)	`[]`	Dateien aus `upload-attachment`: Bilder, PDFs oder Code- und Textdateien. Fügen Sie Dateiinhalte nicht direkt in die message ein

Beispiel: Einen Screen bearbeiten und in einem Aufruf einen weiteren hinzufügen:

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "message": "Switch this sign-in screen to dark mode, then add a matching forgot-password screen.",
  "elementIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"]
}

Ausgabe — { status, fileId, screenIds, designGuidelinesUpdated, reply? }.

{
  "status": "generated",
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": [
    "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
    "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0"
  ],
  "designGuidelinesUpdated": null
}

status: "generated", wenn Screens erstellt oder geändert wurden. "chat", wenn Flowstep geantwortet hat, ohne etwas zu erstellen. In diesem Fall enthält reply die Antwort und screenIds ist leer. Ist Ihre Vorgabe unklar, sollte Ihr Agent um Klärung bitten und das Tool erneut aufrufen.
screenIds: jeder Screen, der während des Aufrufs erstellt oder geändert wurde, einschließlich Screens, die direkt bearbeitet wurden. Läuft der Aufruf in eine Zeitüberschreitung, nachdem einige Screens erstellt wurden, gibt er diese Screens statt eines Fehlers zurück.

Screens, die Sie bearbeiten lassen, werden an Ort und Stelle überschrieben.

`ai-generate-screen-variant`

Fügt einen neuen Screen hinzu, der von genau einem bestehenden Screen abgeleitet ist: der nächste Schritt im Flow, ein Fehler- oder Leerzustand oder eine Version für eine andere Plattform. Der ursprüngliche Screen bleibt unverändert. Um einen Screen hinzuzufügen, der keine Variante eines bestehenden Screens ist (zum Beispiel einen Einstellungs-Screen), verwenden Sie ai-design-screens mit einer fileId. Eingabe

Parameter	Typ	Beschreibung
`fileId`	`uuid`	Zieldatei
`screenId`	`uuid`	Der bestehende Screen, von dem abgeleitet wird
`operationVariant`	Enum	Pflichtfeld: wie sich der neue Screen zum bestehenden verhält

`operationVariant`	Fügt hinzu
`next_screen`	Den nächsten Screen im Nutzerflow
`error_state`	Einen Fehlerzustand des Screens
`empty_state`	Einen Leerzustand des Screens
`web_version`	Eine Webversion
`mobile_version`	Eine Mobilversion
`tablet_version`	Eine Tablet-Version
`mobile_ios_version`	Eine iOS-Version
`mobile_android_version`	Eine Android-Version

Ausgabe — { status, fileId, screenIds, designGuidelinesUpdated }. status ist immer "generated".

`ai-edit-screen-variant`

Ändert genau einen bestehenden Screen direkt mit einem Preset: Gestaltung verfeinern, ein anderes Layout oder einen anderen visuellen Stil ausprobieren oder den Screen von Grund auf neu gestalten. Für neue Screens, freie Anweisungen oder präzise Änderungen an einzelnen Elementen verwenden Sie ai-design-screens. Eingabe

Parameter	Typ	Beschreibung
`fileId`	`uuid`	Zieldatei
`screenId`	`uuid`	Der bestehende Screen, der geändert werden soll
`operationVariant`	Enum	Pflichtfeld: das Bearbeitungs- oder Redesign-Preset, das angewendet wird

`operationVariant`	Typ	Wirkung
`dark_theme`	Bearbeitung	Den Screen auf ein Dark Theme umstellen
`light_theme`	Bearbeitung	Den Screen auf ein Light Theme umstellen
`make_pretty`	Bearbeitung	Die visuelle Gestaltung des Screens verfeinern
`different_layout`	Redesign	Ein anderes Layout ausprobieren
`different_style`	Redesign	Einen anderen visuellen Stil ausprobieren
`from_scratch`	Redesign	Den Screen von Grund auf neu gestalten

Ausgabe — { status, fileId, screenIds, designGuidelinesUpdated }. status ist immer "generated".

Dies überschreibt den Inhalt des Screens an Ort und Stelle.

Umbenannte Tools

Die Namen einiger Tools haben sich im September und Oktober 2026 geändert. Wenn Ihre Prompts, Skripte oder Agenten-Anweisungen die alten Namen verwenden, aktualisieren Sie sie:

Alter Name	Neuer Name
`get-screen`	`get-screen-jsx`
`add-screen`	`add-screen-jsx`
`replace-screen`	`replace-screen-jsx`
`ai-generate-screens`	`ai-design-screens`
`ai-edit-screens`	`ai-design-screens`
`create-new-design`	`ai-design-screens`
`edit-design` (freie Anweisungen)	`ai-design-screens`
`edit-design` (mit einem `operationVariant`-Preset)	`ai-edit-screen-variant`
`regenerate-design`	`ai-edit-screen-variant`
`expand-design`	`ai-generate-screen-variant`

Auch die Eingaben haben sich geändert: Die KI-Design-Tools nehmen elementIds (bzw. eine einzelne screenId bei den Variant-Tools) statt targets. add-screen-jsx nimmt jsx und explizite Metadatenfelder statt jsxContent mit einem Metadaten-Kommentar. create-file nimmt name statt title. Die Tools für Design-Richtlinien nehmen fileId statt resourceId und linkedTo.

​Datei-Tools

​list-files

​get-file

​create-file

​update-file

​delete-file

​Screen-Tools

​list-screens

​get-screen-image

​get-screen-jsx

​add-screen-jsx

​replace-screen-jsx

​rename-screen

​delete-screen

​Bilder in JSX

​Screen field values

​Tools für Design-Richtlinien

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Chat-Tools

​get-chat-history

​Anhang-Tools

​upload-attachment

​Figma-Tools

​import-figma

​Tarif- und Abrechnungs-Tools

​get-plan-details

​AI-Design-Tools

​ai-design-screens

​ai-generate-screen-variant

​ai-edit-screen-variant

​Umbenannte Tools

Datei-Tools

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Screen-Tools

`list-screens`

`get-screen-image`

`get-screen-jsx`

`add-screen-jsx`

`replace-screen-jsx`

`rename-screen`

`delete-screen`

Bilder in JSX

Screen field values

Tools für Design-Richtlinien

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Chat-Tools

`get-chat-history`

Anhang-Tools

`upload-attachment`

Figma-Tools

`import-figma`

Tarif- und Abrechnungs-Tools

`get-plan-details`

AI-Design-Tools

`ai-design-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

Umbenannte Tools