MCP-toolreferentie

Bij succes retourneert elke tool behalve get-screen-image het resultaat twee keer: als structuredContent (gevalideerd tegen het gepubliceerde uitvoerschema van de tool) en als hetzelfde object geserialiseerd in een tekstblok, { type: "text", text: "<json-string>" }, voor clients die geen gestructureerde content lezen. get-screen-image retourneert alleen een MCP-afbeeldingsblok: { type: "image", data: "<base64>", mimeType: "image/png" }. Bij een fout wordt isError: true ingesteld en bevat het tekstblok een korte foutmelding. Fouten waarop je kunt handelen, zoals een naamsverschil bij verwijderen, een ongeldige Figma-link, ongeldige ontwerprichtlijnen, een bijlageprobleem of een generatietime-out, leggen uit wat je moet oplossen. Andere fouten geven een algemene melding, zoals Failed to list files.

Prijzen: de drie AI-ontwerptools, namelijk ai-design-screens, ai-generate-screen-variant en ai-edit-screen-variant, gebruiken hetzelfde berichtenquotum als de Flowstep-app. Alle andere tools zijn gratis. Zie Gebruikslimieten.

Elke tool publiceert ook MCP-annotaties zodat je client weet wat hij doet. delete-file, delete-screen, delete-design-guidelines, replace-screen-jsx, ai-design-screens en ai-edit-screen-variant zijn als destructief gemarkeerd, omdat ze bestaande content verwijderen of overschrijven.

Bestandstools

`list-files`

Toon metadata van je Flowstep-bestanden. Roep dit eerst aan om te controleren of er al een relevant bestand bestaat. Het retourneert geen schermcontent. Gebruik daarvoor get-screen-image of get-screen-jsx. Invoer

Parameter	Type	Standaard	Beschrijving
`orderByCreation`	`boolean`	`true`	Sorteer nieuwste eerst op `created_at` (`true`) of op `updated_at` (`false`). Gebruik `false` om recent bewerkte bestanden te vinden
`limit`	`integer` (1–100)	`20`	Maximaal aantal teruggegeven bestanden. Een volledige pagina betekent mogelijk dat er meer bestanden zijn
`offset`	`integer` (≥0)	`0`	Over te slaan bestanden. De volgende pagina is `offset + limit`

Uitvoer: { 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 als je het bestand hebt aangemaakt.
shared_with_me: true als het bestand rechtstreeks met je is gedeeld en niet alleen via je organisatie.
url: opent het bestand in de Flowstep-editor.

`get-file`

Haal metadata op van één bestand. Bestandscontent is bewust weggelaten. Gebruik get-screen-image of get-screen-jsx om schermen te bekijken, en get-design-guidelines om gekoppelde richtlijnen op te halen. Als je een openstaande uitnodiging voor het bestand hebt, accepteert get-file die wanneer je het aanroept. Invoer

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

Uitvoer: { 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 of write.
visibility: private, member of public.
user_access_level: jouw toegang tot het bestand, read of write.

`create-file`

Maak een leeg Flowstep-bestand zonder schermen aan. Om een bestand aan te maken en in één stap schermen te genereren, roep je in plaats daarvan ai-design-screens aan zonder fileId. Gebruik create-file voor code-first-workflows, gevolgd door add-screen-jsx. Invoer

Parameter	Type	Beschrijving
`name`	`string` (min 1)	Weergavenaam van het nieuwe bestand

Uitvoer: { file, user_access_level }, in dezelfde vorm als get-file. owner is altijd true en user_access_level is altijd write. Gebruik de teruggegeven file.id als fileId in volgende toolaanroepen.

`update-file`

Hernoem een bestand. Invoer

Parameter	Type	Beschrijving
`id`	`uuid`	Bestands-ID
`name`	`string` (min 1)	Nieuwe weergavenaam

Uitvoer: { file, user_access_level }, in dezelfde vorm als get-file.

`delete-file`

Verwijder een bestand definitief. De name die je meegeeft, wordt vergeleken met de huidige weergavenaam van het bestand voordat het wordt verwijderd. Komt die niet overeen, dan wordt het verwijderen afgebroken. Zo voorkom je dat je per ongeluk het verkeerde bestand verwijdert. Agents worden geïnstrueerd je eerst om bevestiging te vragen. Invoer

Parameter	Type	Beschrijving
`id`	`uuid`	Bestands-ID
`name`	`string`	Huidige weergavenaam van het bestand. Moet overeenkomen, anders wordt het verwijderen afgebroken

Uitvoer: { "deleted": true }

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

Schermtools

`list-screens`

Toon de schermen in een bestand, in canvasvolgorde. Roep dit aan na list-files om te zien wat er al in een bestand staat. Gebruik de teruggegeven screenId-waarden met de andere schermtools en de AI-ontwerptools. Invoer

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

Uitvoer: { 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: de laatste generatieprompt voor het scherm, of een lege string als het nooit is gegenereerd (bijvoorbeeld een scherm dat met add-screen-jsx is toegevoegd).
fidelity: lofi, hifi of ui.

`get-screen-image`

Render een scherm naar PNG en retourneer het als inline afbeelding. Vereist een client die afbeeldingsblokken ondersteunt. Roep de tool eenmaal aan voor elke screenId die wordt teruggegeven door een AI-ontwerptool, add-screen-jsx, replace-screen-jsx of import-figma. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Bestands-ID
`screenId`	`uuid`	Een `screenId` uit `list-screens` of uit de `screenIds`-array die een ontwerptool teruggeeft

Uitvoer: MCP-afbeeldingscontentblok (image/png). data is standaard base64 van de PNG-bytes, geen data-URI. Er is geen structuredContent voor deze tool.

`get-screen-jsx`

Haal een scherm op als JSX, plus de metadata. Zo kun je erop bouwen in je codebase, of het bewerken en terugschrijven met replace-screen-jsx. Gebruik get-screen-image voor een visuele preview. Invoer

Parameter	Type	Standaard	Beschrijving
`fileId`	`uuid`	—	Bestands-ID
`screenId`	`uuid`	—	Een `screenId` uit `list-screens` of uit de `screenIds`-array die een ontwerptool teruggeeft
`includeIds`	`boolean`	`false`	Neem een `data-id`-attribuut op bij elementen in `jsx`. Gebruik dit wanneer je element-id’s nodig hebt om als `elementIds` mee te geven aan `ai-design-screens`, om ter plekke te bewerken of als visuele referentie

Uitvoer: { 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: alleen opmaak. data-id-attributen worden alleen opgenomen als includeIds true is.
prompt: de laatste generatieprompt, of een lege string als het scherm nooit is gegenereerd.
fragments: gedeelde chrome die op het scherm is opgeslagen, zoals een navigatiebalk, header of logo, als { purpose, markup }-objecten. Leeg als er geen zijn. Geef ze terug aan replace-screen-jsx om ze te behouden of bij te werken.

Zie Schermveldwaarden voor de waarden van fidelity, screenType en colorTheme.

`add-screen-jsx`

Voeg een nieuw scherm toe aan een bestand vanuit JSX die je zelf hebt geschreven. Dit is het code-first-pad en is gratis. Gebruik ai-design-screens als je wilt dat de AI van Flowstep het scherm ontwerpt. add-screen-jsx maakt altijd een nieuw scherm aan. Om een bestaand scherm te overschrijven, gebruik je replace-screen-jsx. Om een afbeelding te tonen die je hebt geüpload, zie Afbeeldingen in JSX. Als het nieuwe scherm is gebaseerd op een bestaand scherm, begin dan met get-screen-jsx (zonder includeIds) voor name, fidelity, screenType, colorTheme en jsx. Pas daarna aan wat anders moet zijn. Invoer

Parameter	Type	Standaard	Beschrijving
`fileId`	`uuid`	—	Bestands-ID
`name`	`string` (1–100 tekens)	—	Optionele weergavenaam. Laat deze weg om het scherm automatisch `Screen N` te noemen
`fidelity`	`string`	`"ui"`	Detailniveau van het scherm
`screenType`	`string`	—	Verplicht: het apparaat of de viewport waarvoor het scherm is ontworpen
`colorTheme`	`string`	`"default"`	Kleurthema
`jsx`	`string`	—	Alleen JSX-opmaak. `data-id`-attributen worden genegeerd. Het nieuwe scherm krijgt nieuwe element-id’s

Uitvoer: { fileId, screenId }. Roep get-screen-image aan met screenId om het resultaat te bekijken.

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

`replace-screen-jsx`

Overschrijf een bestaand scherm met JSX die je zelf hebt geschreven. Het scherm behoudt zijn screenId en zijn positie op het canvas. Geneste elementen krijgen nieuwe id’s. Dit is het code-first-pad en is gratis. Gebruik ai-design-screens of ai-edit-screen-variant voor AI-wijzigingen, en add-screen-jsx om in plaats daarvan een nieuw scherm aan te maken. Begin met get-screen-jsx (zonder includeIds) en pas daarna aan wat anders moet zijn. Om een afbeelding te tonen die je hebt geüpload, zie Afbeeldingen in JSX. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Bestands-ID
`screenId`	`uuid`	Het scherm dat je overschrijft
`jsx`	`string`	Alleen JSX-opmaak. `data-id`-attributen worden genegeerd
`name`	`string` (1–100 tekens)	Optioneel. Laat weg om de huidige naam te behouden
`fidelity`	`string`	Optioneel. Laat weg om het huidige detailniveau te behouden
`screenType`	`string`	Optioneel. Laat weg om het huidige schermtype te behouden
`colorTheme`	`string`	Optioneel. Laat weg om het huidige kleurthema te behouden
`fragments`	`{ purpose, markup }[]`	Optionele gedeelde chrome uit `get-screen-jsx`. Laat weg om de huidige fragmenten te behouden, of geef `[]` om ze te wissen

Uitvoer: { fileId, screenId }. Roep get-screen-image aan met screenId om het resultaat te bekijken.

Dit vervangt de inhoud van het scherm ter plekke.

`rename-screen`

Hernoem het canvaslabel van een scherm, de naam die wordt getoond door list-screens en in de editor. Dit wijzigt alleen het label, niet de lay-out, grootte of inhoud van het scherm. Gebruik daarvoor ai-design-screens. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Bestands-ID
`screenId`	`uuid`	De `screenId` die `list-screens` retourneert
`name`	`string` (1–100 tekens)	Nieuwe schermnaam. Witruimte aan het begin en het eind wordt verwijderd

Uitvoer: { screenId, name }.

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

`delete-screen`

Verwijder een scherm definitief uit een bestand. De name die je meegeeft, wordt vergeleken met de huidige weergavenaam van het scherm. Komt die niet overeen, dan wordt het verwijderen afgebroken. Agents worden geïnstrueerd je eerst om bevestiging te vragen. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Bestands-ID
`screenId`	`uuid`	Het scherm dat je verwijdert
`name`	`string`	Huidige weergavenaam van het scherm. Moet overeenkomen, anders wordt het verwijderen afgebroken

Uitvoer: { "deleted": true }

Afbeeldingen in JSX

add-screen-jsx en replace-screen-jsx accepteren afbeeldingen in een img-src, of als achtergrond in className met bg-[url(...)]. Schrijf alt-tekst en stel de grootte van elke afbeelding af op het doel ervan. Zo plaats je een eigen afbeelding:

Upload deze met upload-attachment in modus A (mimeType + fileName) en voer de teruggegeven uploadCommand uit.
Als het type van het antwoord "image" is, plak dan de assetUrl precies zoals teruggegeven in img src of bg-[url(assetUrl)].

Laat elke andere afbeeldings-URL precies staan zoals get-screen-jsx die heeft teruggegeven. Zet geen path, signedUrl of uploadCommand in src.

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

Schermveldwaarden

get-screen-jsx retourneert deze waarden, en add-screen-jsx en replace-screen-jsx accepteren ze:

Veld	Waarden
`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`

Ontwerprichtlijnentools

Ontwerprichtlijnen zijn DESIGN.md-tekst die aan een bestand is opgeslagen. Wanneer ze zijn ingesteld, worden ze in elke AI-generatie voor dat bestand geïnjecteerd. Zie Ontwerprichtlijnen.

`get-design-guidelines`

Haal de ontwerprichtlijnen op die aan een bestand zijn gekoppeld. Invoer

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

Uitvoer: { guidelines }.

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

guidelines is null als er geen richtlijnen zijn ingesteld.

`update-design-guidelines`

Stel de ontwerprichtlijnen voor een bestand in of vervang ze. Geef de richtlijnen als gewone tekenreeks op in Google’s DESIGN.md-formaat, niet als object of JSON. Als je uit een bestand leest, geef dan de tekst van dat bestand mee. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Bestands-ID
`designGuidelines`	`string` (min 1)	Ruwe tekst van de richtlijnen. Moet een gewone tekenreeks zijn, niet JSON-geëncodeerd

Validatieregels

Frontmatter moet correct worden geopend en gesloten
Frontmatter-regels moeten geldige YAML in blokstijl zijn
De markdown-body mag geen dubbele ##-sectiekoppen bevatten

Als de validatie mislukt, retourneert de aanroep een fout die begint met Invalid design guidelines:. Uitvoer: { updated, warnings? }.

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

warnings somt zachte validatieproblemen op, zoals onbekende sleutels en niet-hexkleuren. Die zijn geaccepteerd, maar de AI negeert ze mogelijk. Het veld ontbreekt wanneer er geen zijn. Geef deze waarschuwingen door aan de gebruiker.

`delete-design-guidelines`

Wis de ontwerprichtlijnen voor een bestand. Het verwijderen van richtlijnen die niet bestaan, heeft geen effect. Invoer

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

Uitvoer: { "deleted": true }

Chattools

`get-chat-history`

Haal het ontwerpgesprek op dat bij een bestand hoort. Dat is de Flowstep-chat van het bestand, niet het gesprek van je MCP-client. Gebruik het om eerder werk aan het bestand te hervatten. Invoer

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

Uitvoer: { messages }. messages is leeg als je geen ontwerpgesprek op het bestand hebt. Elk bericht heeft een type ("request" of "response"), een author ("human" of "ai") en een content_type. Responsberichten gebruiken "text", "summary" of "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" }]
    }
  ]
}

Bijlagetools

`upload-attachment`

Upload een referentiebestand om te gebruiken als bijlage in ai-design-screens, of een afbeelding om in je eigen JSX te plaatsen met add-screen-jsx of replace-screen-jsx. ai-generate-screen-variant en ai-edit-screen-variant accepteren geen bijlagen. Bestandsbytes gaan nooit door het model, en de server haalt nooit URL’s namens jou op. Om naar een webpagina te verwijzen, neem je de URL op in het message van ai-design-screens. Er zijn twee modi. Gebruik er precies één en combineer ze niet. Modus A: bestanden en afbeeldingen (mimeType + fileName) Een verplichte stroom van drie stappen voor elke afbeelding, pdf of groter tekstbestand:

Roep upload-attachment aan met alleen mimeType en fileName (bijvoorbeeld image/png en dog.png). Het antwoord is een voorbereide upload, geen opgeslagen bestand:

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

Vervang LOCAL_FILE_PATH in uploadCommand door het absolute pad naar je bestand en voer dat exacte commando uit in je shell. Het moet met status 0 afsluiten. Het token in signedUrl autoriseert alleen deze ene upload. Als je deze stap overslaat, blijft de opslag leeg en faalt de ontwerptool bij de preflight-controle.
Geef alleen { id, path, type } door aan de attachments-array van ai-design-screens. Geef signedUrl, uploadCommand of nextStep niet door. Om een afbeelding in je eigen JSX te plaatsen, zet je de assetUrl in de img src of bg-[url(...)] van de JSX die je doorgeeft aan add-screen-jsx of replace-screen-jsx. Zie Afbeeldingen in JSX.

Om een extern bestand bij te voegen, download je het eerst zelf naar een lokaal pad (bijvoorbeeld met curl). Volg daarna dezelfde drie stappen. Geef nooit een URL aan upload-attachment.

Parameter	Type	Beschrijving
`mimeType`	enum	Bestands-MIME-type. Een van `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`. Gebruik `text/javascript` voor `.jsx`-, `.tsx`-, `.js`- en `.ts`-bestanden
`fileName`	`string` (min 1)	Oorspronkelijke bestandsnaam met extensie, bijvoorbeeld `cat.png` of `design.md`

Modus B: korte tekst (text + mimeType) Upload tekst die al in de context staat. Er is geen shell-commando nodig. Het antwoord is direct bruikbaar:

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

Parameter	Type	Beschrijving
`text`	`string` (max 64.000 tekens)	Ruwe tekstinhoud. Alleen tekstbestanden. Gebruik dit niet voor afbeeldingen of pdf’s. Langer dan 64.000 tekens? Gebruik modus A
`mimeType`	enum	Een van `text/markdown`, `text/plain`, `text/javascript`

Geef de teruggegeven { id, path, type } door aan de attachments-array van ai-design-screens. De maximale bestandsgrootte is 3 MB in beide modi, en pdf’s zijn beperkt tot 100 pagina’s. Uitvoer: { id, path, assetUrl, type, mimeType, signedUrl?, uploadCommand?, nextStep? }.

type: "image" voor afbeeldingsbestanden en "document" voor pdf’s en tekstbestanden.
assetUrl: de URL van het geüploade bestand, in beide modi teruggegeven. Gebruik deze in JSX voor add-screen-jsx of replace-screen-jsx alleen wanneer type "image" is, en pas nadat het uploadCommand van modus A is uitgevoerd.
signedUrl, uploadCommand, nextStep: alleen ingesteld in modus A. Geef ze niet door aan ontwerptools.

Figma-tools

`import-figma`

Importeer een Figma-frame in een Flowstep-bestand als bewerkbare elementen op het canvas. Elke import voegt een nieuw scherm toe. Als je hetzelfde frame twee keer importeert, krijg je twee schermen. Verwijder het oude scherm met delete-screen als je het wilde vervangen. De organisatie van het bestand moet Figma hebben gekoppeld in de Flowstep-instellingen. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Het Flowstep-bestand waarin het frame wordt geïmporteerd. Dit is niet de Figma-bestandssleutel in `figmaUrl`
`figmaUrl`	`string`	Link naar een specifiek Figma-frame met een `node-id`. Klik in Figma met de rechtermuisknop op het frame en kies Copy/Paste as → Copy link to selection. Een link naar een pagina importeert alle frames op het hoogste niveau van die pagina (via MCP beperkt tot 20 frames)

Uitvoer: { fileId, screenId, frameCount? }. screenId is het geïmporteerde scherm. Geef het door aan get-screen-image om het resultaat te bekijken. Wanneer een pagina-URL meerdere frames importeert, is screenId null en wordt in plaats daarvan frameCount teruggegeven. Roep dan list-screens aan en daarna get-screen-image voor elk nieuw scherm.

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

Abonnements- en factureringstools

`get-plan-details`

Haal het Flowstep-abonnement, de abonnementsstatus, het gebruik en het resterende quotum van je organisatie op. Deze tool heeft geen invoer. De organisatie wordt bepaald op basis van de ingelogde gebruiker. Gebruik de tool om je quotum te controleren voordat je de AI-ontwerptools aanroept. Uitvoer: { plan, subscription, limits, usage, remaining }.

Veld	Beschrijving
`plan`	`{ name, code, type }`. `type` is `"free"` of `"paid"`
`subscription`	`{ isPaid, isTrial, startDate, endDate, trialDaysRemaining }`
`limits`	Limieten per functie, gesleuteld op functie (bijvoorbeeld `messages`). Elk heeft optionele `daily`- en `monthly`-objecten met `max`- en `warn`-waarden, plus een `unlimited`-vlag
`usage`	Gebruik per functie tot nu toe, als `{ daily, monthly }`
`remaining`	Resterend quotum per functie, als `{ daily, monthly }`. Weggelaten voor onbeperkte functies

Limieten verschillen per abonnement. Zie Prijzen en Gebruikslimieten.

AI-ontwerptools

Deze drie tools ontwerpen op basis van een beschrijving of voorinstelling. Ze nemen of hergebruiken nooit JSX. Elke aanroep gebruikt hetzelfde berichtenquotum als de Flowstep-app. De aanroep blokkeert tot de generatie klaar is of een time-out bereikt (180 seconden).

Tool	Gebruik deze tool om
`ai-design-screens`	Nieuwe schermen genereren, bestaande schermen ter plekke wijzigen, of beide, op basis van een vrije beschrijving
`ai-generate-screen-variant`	Een volgende-stap-, fout- of lege-statusvariant, of een platformvariant van één bestaand scherm toevoegen
`ai-edit-screen-variant`	Een bewerkings- of herontwerpvoorinstelling toepassen op één heel bestaand scherm

Alle drie retourneren { status, fileId, screenIds, designGuidelinesUpdated }. Roep get-screen-image eenmaal aan voor elke screenId om het resultaat te zien.

designGuidelinesUpdated: een korte samenvatting van de wijziging wanneer de DESIGN.md-richtlijnen van het bestand tijdens deze beurt automatisch zijn bijgewerkt. Anders is de waarde null.

`ai-design-screens`

Genereer in één aanroep een of meer nieuwe schermen, wijzig bestaande schermen ter plekke, of beide, op basis van een tekstbeschrijving. Denk aan nieuwe flows, thema’s, tekst, lay-out of gecoördineerde wijzigingen over meerdere schermen. Dit is dezelfde ontwerpagent als de chat in de Flowstep-editor: op basis van je message en elementIds bepaalt hij wat hij bouwt en wat hij wijzigt. Laat fileId weg om een nieuw bestand te starten. Geef fileId mee om in een bestaand bestand te werken. Als het verzoek op een bestand kan slaan dat je al hebt, moet je agent eerst list-files en list-screens controleren. Voor een volgende-stap-, fout- of lege-statusvariant, of een platformvariant van één scherm, gebruik je ai-generate-screen-variant. Voor een voorinstelling-bewerking of herontwerp van één scherm gebruik je ai-edit-screen-variant. Heb je al JSX, gebruik dan add-screen-jsx of replace-screen-jsx. Invoer

Parameter	Type	Standaard	Beschrijving
`fileId`	`uuid`	—	Doelbestand. Laat weg om een nieuw bestand aan te maken. Verplicht wanneer `elementIds` is ingesteld
`message`	`string`	—	Beschrijving van de te genereren schermen en/of de te maken wijzigingen. Geef bij `elementIds` aan of ze bewerkt moeten worden of als referentie dienen. Neem hier de webpagina-URL’s op waarnaar Flowstep moet verwijzen
`elementIds`	`uuid[]`	`[]`	Optionele `screenId`’s uit `list-screens` en/of element-`data-id`’s uit `get-screen-jsx` (met `includeIds`), zoals een selectie in de editor. Ze kunnen ter plekke worden bewerkt of als visuele referentie voor nieuwe schermen dienen. Een `screenId` richt zich op het hele scherm
`attachments`	`{ id, path, type }[]` (max 5)	`[]`	Bestanden uit `upload-attachment`: afbeeldingen, pdf’s, of code- en tekstbestanden. Neem bestandsinhoud niet inline op in het bericht

Voorbeeld: bewerk één scherm en voeg in één aanroep een ander toe:

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

Uitvoer: { 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" wanneer schermen zijn gebouwd of gewijzigd. "chat" wanneer Flowstep heeft geantwoord zonder te bouwen. In dat geval bevat reply het antwoord en is screenIds leeg. Is je opdracht onduidelijk, dan moet je agent je om verduidelijking vragen en de tool daarna opnieuw aanroepen.
screenIds: elk scherm dat tijdens de aanroep is gebouwd of gewijzigd, inclusief schermen die ter plekke zijn bewerkt. Als de aanroep na een time-out een aantal schermen heeft gebouwd, retourneert hij die schermen in plaats van een fout.

Schermen die je laat bewerken, worden ter plekke overschreven.

`ai-generate-screen-variant`

Voeg een nieuw scherm toe dat is afgeleid van precies één bestaand scherm. Dat kan de volgende stap in de flow zijn, een fout- of lege status, of een versie voor een ander platform. Het oorspronkelijke scherm blijft ongewijzigd. Om een scherm toe te voegen dat geen variant van een bestaand scherm is, bijvoorbeeld een instellingenscherm, gebruik je ai-design-screens met een fileId. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Doelbestand
`screenId`	`uuid`	Het bestaande scherm waarvan wordt afgeleid
`operationVariant`	enum	Verplicht: hoe het nieuwe scherm zich verhoudt tot het bestaande

`operationVariant`	Voegt toe
`next_screen`	Het volgende scherm in de gebruikersflow
`error_state`	Een foutstatus van het scherm
`empty_state`	Een lege status van het scherm
`web_version`	Een webversie
`mobile_version`	Een mobiele versie
`tablet_version`	Een tabletversie
`mobile_ios_version`	Een iOS-versie
`mobile_android_version`	Een Android-versie

Uitvoer: { status, fileId, screenIds, designGuidelinesUpdated }. status is altijd "generated".

`ai-edit-screen-variant`

Wijzig precies één bestaand scherm ter plekke met een voorinstelling. Je kunt het thema aanpassen of polijsten, een andere lay-out of visuele stijl proberen, of het helemaal opnieuw ontwerpen. Voor nieuwe schermen, vrije instructies of een precieze bewerking van afzonderlijke elementen gebruik je ai-design-screens. Invoer

Parameter	Type	Beschrijving
`fileId`	`uuid`	Doelbestand
`screenId`	`uuid`	Het bestaande scherm dat je wijzigt
`operationVariant`	enum	Verplicht: de bewerkings- of herontwerpvoorinstelling die je toepast

`operationVariant`	Type	Effect
`dark_theme`	Bewerking	Schakel het scherm naar een donker thema
`light_theme`	Bewerking	Schakel het scherm naar een licht thema
`make_pretty`	Bewerking	Polijst het visuele ontwerp van het scherm
`different_layout`	Herontwerp	Probeer een andere lay-out
`different_style`	Herontwerp	Probeer een andere visuele stijl
`from_scratch`	Herontwerp	Herontwerp het scherm helemaal opnieuw

Uitvoer: { status, fileId, screenIds, designGuidelinesUpdated }. status is altijd "generated".

Dit overschrijft de inhoud van het scherm ter plekke.

Hernoemde tools

Toolnamen zijn in september en oktober 2026 gewijzigd. Als je prompts, scripts of agentinstructies hebt die de oude namen gebruiken, werk ze dan bij:

Oude naam	Nieuwe naam
`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` (vrije instructies)	`ai-design-screens`
`edit-design` (met een `operationVariant`-voorinstelling)	`ai-edit-screen-variant`
`regenerate-design`	`ai-edit-screen-variant`
`expand-design`	`ai-generate-screen-variant`

De invoer is ook gewijzigd. De AI-ontwerptools nemen elementIds (of een enkele screenId voor de variant-tools) in plaats van targets. add-screen-jsx neemt jsx en expliciete metadatavelden in plaats van jsxContent met een metadatacommentaar. create-file neemt name in plaats van title. De ontwerprichtlijnentools nemen fileId in plaats van resourceId en linkedTo.

​Bestandstools

​list-files

​get-file

​create-file

​update-file

​delete-file

​Schermtools

​list-screens

​get-screen-image

​get-screen-jsx

​add-screen-jsx

​replace-screen-jsx

​rename-screen

​delete-screen

​Afbeeldingen in JSX

​Schermveldwaarden

​Ontwerprichtlijnentools

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Chattools

​get-chat-history

​Bijlagetools

​upload-attachment

​Figma-tools

​import-figma

​Abonnements- en factureringstools

​get-plan-details

​AI-ontwerptools

​ai-design-screens

​ai-generate-screen-variant

​ai-edit-screen-variant

​Hernoemde tools

Bestandstools

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Schermtools

`list-screens`

`get-screen-image`

`get-screen-jsx`

`add-screen-jsx`

`replace-screen-jsx`

`rename-screen`

`delete-screen`

Afbeeldingen in JSX

Schermveldwaarden

Ontwerprichtlijnentools

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Chattools

`get-chat-history`

Bijlagetools

`upload-attachment`

Figma-tools

`import-figma`

Abonnements- en factureringstools

`get-plan-details`

AI-ontwerptools

`ai-design-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

Hernoemde tools