Zum Hauptinhalt springen
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
ParameterTypStandardBeschreibung
orderByCreationbooleantrueNach Erstellungsdatum sortieren
limitinteger (1–100)20Anzahl der zurückzugebenden Dateien
offsetinteger (≥0)0Paginierungs-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
ParameterTypBeschreibung
iduuidDatei-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
ParameterTypBeschreibung
titlestring (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
ParameterTypBeschreibung
iduuidDatei-ID
namestring (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
ParameterTypBeschreibung
iduuidDatei-ID
namestringAktueller 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
ParameterTypBeschreibung
fileIduuidDatei-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
ParameterTypBeschreibung
fileIduuidDatei-ID
screenIduuidDie 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
ParameterTypBeschreibung
fileIduuidDatei-ID
jsxContentstringJSX, das der Datei als Screen hinzugefügt werden soll
screenTypestringErforderlich, 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. <!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" --> 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
ParameterTypBeschreibung
fileIduuidDatei-ID
screenIduuidDie 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
ParameterTypStandardBeschreibung
fileIduuidZieldatei — weglassen, um automatisch eine neue Datei zu erstellen
messagestringPrompt, der die zu generierenden Screens beschreibt
attachmentsAttachmentRequestData[] (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
designsDesignRequestData[][]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
ParameterTypStandardBeschreibung
fileIduuidZieldatei
messagestringPrompt-Text
targetsuuid[] (min 1)screenIds der neu zu generierenden Screens
operationVariant"different_layout" | "different_style" | "from_scratch"Optionale Stilvariation
designsDesignRequestData[][]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
ParameterTypStandardBeschreibung
fileIduuidZieldatei
messagestringPrompt-Text
targetsuuid[] (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
designsDesignRequestData[][]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
ParameterTypStandardBeschreibung
fileIduuidZieldatei
messagestringAnweisungen, die die anzuwendenden Änderungen beschreiben
targetsuuid[] (min 1)screenIds der zu bearbeitenden Screens
operationVariant"dark_theme" | "light_theme" | "make_pretty"Optionale Stil-Abkürzung
attachmentsAttachmentRequestData[] (max 5)[]Vorab hochgeladene Anlagen. Laden Sie immer über upload-attachment hoch
designsDesignRequestData[][]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.
ParameterTypBeschreibung
fileIduuidDatei, die den Screen enthält (erforderlich)
screenIduuidZu 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.
ParameterTypBeschreibung
fileDatastringDateiinhalt — Base64 für Binär, UTF-8-Zeichenkette für Text
fileNamestringUrsprü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
ParameterTypBeschreibung
fileIduuidDatei-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
ParameterTypStandardBeschreibung
resourceIduuidDatei-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
ParameterTypStandardBeschreibung
resourceIduuidDatei-ID
designGuidelinesstring (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
ParameterTypStandardBeschreibung
resourceIduuidDatei-ID
linkedTo"file""file"Ressourcentyp
Ausgabe"Design guidelines deleted successfully"

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.