MCP Tools-referentie

Alle tools retourneren een content-array van MCP-inhoudsblokken. Teksttools retourneren { type: "text", text: "<json-string>" }. Afbeeldingstools retourneren { type: "image", data: "<base64>", mimeType: "image/png" }. Bij fout wordt isError: true ingesteld en bevat het tekstblok het foutbericht.

Bestandstools

`list-files`

Geef een lijst van Flowstep-bestanden voor de huidige gebruiker. Invoer

Parameter	Type	Standaard	Beschrijving
`orderByCreation`	`boolean`	`true`	Sorteren op aanmaakdatum
`limit`	`integer` (1–100)	`20`	Aantal bestanden om terug te keren
`offset`	`integer` (≥0)	`0`	Paginering-offset

Uitvoer — JSON-array van bestandsobjecten.

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

Haal een enkel bestand op via ID. Bestandsinhoud wordt opzettelijk weggelaten — gebruik get-screen of get-screen-image om schermen te inspecteren en get-design-guidelines om gekoppelde richtlijnen op te halen. Invoer

Parameter	Type	Beschrijving
`id`	`uuid`	Bestand-ID

Uitvoer — JSON-bestandsobject.

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

Maak een nieuw Flowstep-bestand aan. Invoer

Parameter	Type	Beschrijving
`title`	`string` (min 1)	Bestandsnaam

Uitvoer — JSON-bestandsobject met de id van het nieuwe bestand.

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

Gebruik de geretourneerde id als fileId in volgende tooloproepen.

`update-file`

Hernoem een bestand. Invoer

Parameter	Type	Beschrijving
`id`	`uuid`	Bestand-ID
`name`	`string` (min 1)	Nieuwe naam

Uitvoer — Bijgewerkt bestandsobject in dezelfde vorm als 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`

Verwijder een bestand permanent. De name die je doorgeeft wordt geverifieerd tegen de werkelijke naam van het bestand vóór verwijdering — als deze niet overeenkomt, wordt de verwijdering afgebroken. Dit voorkomt dat je per ongeluk het verkeerde bestand verwijdert. Invoer

Parameter	Type	Beschrijving
`id`	`uuid`	Bestand-ID
`name`	`string`	Huidige naam van het bestand — moet precies overeenkomen of verwijdering wordt afgebroken

Uitvoer — "File deleted successfully"

Dit is onomkeerbaar. Alle schermen in het bestand worden verwijderd.

Schermtools

`list-screens`

Geef een lijst van alle gegenereerde schermen voor een bestand. Gebruik de geretourneerde screenId-waarden om naar schermen te verwijzen in get-screen, get-screen-image, upload-attachment en als targets in edit-design, regenerate-design of expand-design. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Bestand-ID

Uitvoer — JSON-array van schermoverzichten.

[
  {
    "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 is de door de gebruiker toegewezen schermaam, of null als niet benoemd.

`get-screen`

Haal de JSX-code voor een scherm op zodat je deze kunt bewerken of buiten Flowstep kunt gebruiken. Gebruik get-screen-image voor een visuele voorvertoning in plaats daarvan. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Bestand-ID
`screenId`	`uuid`	De `screenId` geretourneerd door `list-screens` of uit de `screenIds`-array geretourneerd door een design tool

Uitvoer — Het scherm als code (JSX). Let op de commentaarregel aan het begin, die vereist is bij gebruik van het add-screen-tool.

<!-- 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`

Voeg een nieuw scherm aan een Flowstep-bestand toe uit een ruwe JSX-string. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Bestand-ID
`jsxContent`	`string`	JSX om aan het bestand als scherm toe te voegen
`screenType`	`string`	Vereist als het schermtype niet als opmerking aan het begin van de JSX is gedefinieerd

Opmerking - Een opmerking die lijkt op de onderstaande MOET aanwezig zijn als de eerste regel van de JSX, omdat deze wordt gebruikt om het scherm correct toe te voegen. screenType, name en screenId zijn allemaal optioneel — screenId wordt gebruikt (intern) als aanwezig (bijvoorbeeld bij het doorgeven van JSX gekopieerd uit de get-screen-uitvoer) maar is niet verplicht. De schermnaam wordt gehaald uit het name-veld van de opmerking (weergegeven als “Copy of <name>”), of “Untitled” als afwezig.  Uitvoer — De ID van het nieuw toegevoegde scherm.

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" }

`get-screen-image`

Render een scherm naar PNG en retourneer het als inline-afbeelding. Vereist een client die inhoudsblokken van afbeeldingen ondersteunt. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Bestand-ID
`screenId`	`uuid`	De `screenId` geretourneerd door `list-screens` of uit de `screenIds`-array geretourneerd door een design tool

Uitvoer — MCP-afbeeldingsinhoudsblok (image/png).

AI-tools

regenerate-design, expand-design en edit-design vereisen design-context die alleen aanwezig is op schermen die oorspronkelijk met een designs-array zijn gegenereerd. Schermen gegenereerd zonder design-context geven een fout. Workaround: gebruik upload-attachment om het scherm als afbeelding weer te geven, en roep vervolgens create-new-design aan met de afbeelding in attachments en een bericht dat de gewenste wijzigingen beschrijft.

`create-new-design`

Genereer een of meer schermontwerpen vanuit een tekstprompt. Laat fileId weg om automatisch een nieuw bestand te maken. Blokkeert totdat de generatie is voltooid of een time-out optreedt (180 seconden). Invoer

Parameter	Type	Standaard	Beschrijving
`fileId`	`uuid`	—	Doelbestand — weglaten om automatisch een nieuw bestand te maken
`message`	`string`	—	Prompt die de schermen beschrijft die moeten worden gegenereerd
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Vooraf geüploade bijlagen — afbeeldingen, PDF’s of codebestanden. Upload altijd eerst via `upload-attachment`; plaats geen bestandsinhoud inline in het bericht
`designs`	`DesignRequestData[]`	`[]`	Design-referenties

Uitvoer — { fileId, screenIds }. Geef elke screenId door aan get-screen-image om resultaten te zien.

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

`regenerate-design`

Maak bestaande schermen opnieuw van nul af aan of met een stijlvariant. Vereist minstens één screenId in targets. Blokkeert totdat de generatie is voltooid of een time-out optreedt (180 seconden). Invoer

Parameter	Type	Standaard	Beschrijving
`fileId`	`uuid`	—	Doelbestand
`message`	`string`	—	Prompttekst
`targets`	`uuid[]` (min 1)	—	screenIds van schermen om opnieuw te genereren
`operationVariant`	`"different_layout" \| "different_style" \| "from_scratch"`	—	Optionele stijlvariant
`designs`	`DesignRequestData[]`	`[]`	Design-referenties (automatisch opgelost)

Uitvoer — { fileId, screenIds }. Geef elke screenId door aan get-screen-image om resultaten te zien.

`expand-design`

Voeg vervolgschermen toe aan een bestaand ontwerp. Vereist minstens één screenId in targets en een verplichte operationVariant. Blokkeert totdat de generatie is voltooid of een time-out optreedt (180 seconden). Invoer

Parameter	Type	Standaard	Beschrijving
`fileId`	`uuid`	—	Doelbestand
`message`	`string`	—	Prompttekst
`targets`	`uuid[]` (min 1)	—	screenIds van schermen waarvan af te vullen
`operationVariant`	`"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"`	—	Vereist — type vervolgscherm om te genereren
`designs`	`DesignRequestData[]`	`[]`	Design-referenties (automatisch opgelost)

Uitvoer — { fileId, screenIds }. Geef elke screenId door aan get-screen-image om resultaten te zien.

`edit-design`

Wijzig bestaande schermen via een prompt. Vereist minstens één screenId in targets. Blokkeert totdat de generatie is voltooid of een time-out optreedt (180 seconden). Invoer

Parameter	Type	Standaard	Beschrijving
`fileId`	`uuid`	—	Doelbestand
`message`	`string`	—	Instructies die beschrijven welke bewerkingen moeten worden toegepast
`targets`	`uuid[]` (min 1)	—	screenIds van schermen om te bewerken
`operationVariant`	`"dark_theme" \| "light_theme" \| "make_pretty"`	—	Optionele stijlsnelkoppeling
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Vooraf geüploade bijlagen. Upload altijd eerst via `upload-attachment`
`designs`	`DesignRequestData[]`	`[]`	Design-referenties (automatisch opgelost)

Uitvoer — { fileId, screenIds }. Geef elke screenId door aan get-screen-image om resultaten te zien.

`upload-attachment`

Upload een bestand om als bijlage in create-new-design of edit-design te gebruiken. Retourneert { id, path, type, mimeType } — geef dit object direct door in de attachments-array. Twee modi: Modus 1 — Scherm op ID Geef screenId en fileId door. De server haalt de schermstatus uit de database en rendert deze als afbeelding.

Parameter	Type	Beschrijving
`fileId`	`uuid`	Bestand met het scherm (vereist)
`screenId`	`uuid`	Scherm om weer te geven

Modus 2 — Extern bestand Geef bestandsinhoud rechtstreeks door. Binaire bestanden moeten base64-gecodeerd zijn; tekstbestanden (inclusief broncode) worden als platte UTF-8-strings doorgegeven.

Parameter	Type	Beschrijving
`fileData`	`string`	Bestandsinhoud — base64 voor binair, UTF-8-string voor tekst
`fileName`	`string`	Originele bestandsnaam
`mimeType`	`"image/jpeg" \| "image/png" \| "image/webp" \| "application/pdf" \| "text/plain" \| "text/javascript"`	MIME-type. Gebruik `text/javascript` voor `.jsx`, `.tsx`, `.js`, `.ts`-bestanden

Max bestandsgrootte: 3 MB. Voor grote afbeeldingen kun je beter image/jpeg gebruiken dan image/png. Uitvoer

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "type": "image",
  "mimeType": "image/jpeg"
}

type is "image" voor uploads van afbeeldingen/PDF en "document" voor tekst-/codebestanden.

Chattools

`get-chat-history`

Haal de chatberichtgeschiedenis voor een bestand op. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Bestand-ID

Uitvoer — JSON-object met een messages-array. Elk bericht heeft een type ("request" of "response"), author ("human" of "ai"), en content_type ("text", "summary" of "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": []
    }
  ]
}

Designtools

`get-design-guidelines`

Haal de voor een bestand opgeslagen ontwerprichtlijnen op. Invoer

Parameter	Type	Standaard	Beschrijving
`resourceId`	`uuid`	—	Bestand-ID
`linkedTo`	`"file"`	`"file"`	Resourcetype

Uitvoer

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

guidelines is null als er nog geen richtlijnen zijn ingesteld.

`update-design-guidelines`

Stel of vervang de ontwerprichtlijnen voor een bestand. Richtlijnen worden doorgegeven als platte tekststring in Google’s design.md-indeling — geef geen object of JSON door. De server voert zachte validatie uit en kan een Warnings:-sectie in de reactie retourneren met problemen (onbekende sleutels, niet-hex-kleuren) die zijn geaccepteerd maar kunnen worden genegeerd door de AI. Geef deze aan de gebruiker door. Invoer

Parameter	Type	Standaard	Beschrijving
`resourceId`	`uuid`	—	Bestand-ID
`designGuidelines`	`string` (min 1)	—	Ruwe tekstinhoud van de richtlijnen. Moet een platte string zijn — niet JSON-gecodeerd
`linkedTo`	`"file"`	`"file"`	Resourcetype

Validatieregels

Frontmatter moet correct worden geopend en gesloten
Frontmatter-regels moeten geldige blokstijl YAML zijn
Markdown-lichaam mag geen dubbele ##-sectiekoppen bevatten

Uitvoer — "Design guidelines updated successfully", optioneel gevolgd door een Warnings:-sectie.

`delete-design-guidelines`

Wis de ontwerprichtlijnen voor een bestand. Invoer

Parameter	Type	Standaard	Beschrijving
`resourceId`	`uuid`	—	Bestand-ID
`linkedTo`	`"file"`	`"file"`	Resourcetype

Uitvoer — "Design guidelines deleted successfully"

Figma-tools

`import-figma`

Importeer een Figma-frame in een Flowstep-bestand als bewerkbare elementen op het canvas. Het opnieuw importeren van hetzelfde frame werkt het ter plekke bij. De organisatie van het bestand moet Figma eerst in Flowstep-instellingen hebben verbonden. Invoer

Parameter	Type	Beschrijving
`figmaUrl`	`string`	Link naar een specifiek Figma-frame. Klik in Figma met de rechtermuisknop op het frame en kies Copy link to selection. Een link naar een pagina importeert alle frames op het hoogste niveau op die pagina (beperkt tot 20 frames over MCP).
`fileId`	`uuid`	Het Flowstep-bestand waarin het frame moet worden geïmporteerd

Uitvoer — { fileId, screenId }. screenId is de ID van het geïmporteerde screenelement — geef het door aan get-screen-image om het resultaat te zien. Wanneer een pagina-URL meerdere frames importeert, is screenId null en wordt frameCount in plaats daarvan geretourneerd.

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

Factureringstools

`get-plan-details`

Haal het huidige abonnement van de gebruiker, abonnementsstatus en restant quotum op. Vereist geen invoer. Uitvoer

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

Limieten verschillen per abonnement. Roep dit tool aan vóór een batch generaties om beschikbare quotum te controleren.

Aan de slag

Flowstep gebruiken

Teams & organisaties

Exporteren & integraties

MCP-server

Facturering & abonnementen

Beveiliging & privacy

MCP Tools-referentie

Bestandstools

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Schermtools

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

AI-tools

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Chattools

`get-chat-history`

Designtools

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Figma-tools

`import-figma`

Factureringstools

`get-plan-details`

​Bestandstools

​list-files

​get-file

​create-file

​update-file

​delete-file

​Schermtools

​list-screens

​get-screen

​add-screen

​get-screen-image

​AI-tools

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

​Chattools

​get-chat-history

​Designtools

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Figma-tools

​import-figma

​Factureringstools

​get-plan-details

Bestandstools

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Schermtools

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

AI-tools

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Chattools

`get-chat-history`

Designtools

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Figma-tools

`import-figma`

Factureringstools

`get-plan-details`