> ## Documentation Index > Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt > Use this file to discover all available pages before exploring further. # MCP Tools-referentie > Invoerschema, uitvoervorm en voorbeelden voor alle 20 Flowstep MCP-tools. Alle tools retourneren een `content`-array van MCP-inhoudsblokken. Teksttools retourneren `{ type: "text", text: "" }`. Afbeeldingstools retourneren `{ type: "image", data: "", 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. ```json theme={"system"} [ { "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. ```json theme={"system"} { "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. ```json theme={"system"} { "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`. ```json theme={"system"} { "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. ```json theme={"system"} [ { "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. ```json theme={"system"}
World Clock
Search cities...
...
; ``` *** ### `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 \"), of "Untitled" als afwezig. `` **Uitvoer** — De ID van het nieuw toegevoegde scherm. ```json theme={"system"} { "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. ```json theme={"system"} { "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** ```json theme={"system"} { "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"`). ```json theme={"system"} { "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** ```json theme={"system"} { "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. ```json theme={"system"} { "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** ```json theme={"system"} { "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.