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.
Input
Output — JSON-array van bestandsobjecten.
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.
Input
Output — JSON-bestandsobject.
create-file
Maak een nieuw Flowstep-bestand aan.
Input
Output — JSON-bestandsobject met de
id van het nieuwe bestand.
id als fileId in volgende tool-aanroepen.
update-file
Hernoem een bestand.
Input
Output — Bijgewerkt bestandsobject in dezelfde vorm als
get-file.
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.
Input
Output —
"File deleted successfully"
Schermstools
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, en als targets in edit-design, regenerate-design of expand-design.
Input
Output — JSON-array van schermsamenvattingen.
name is de door de gebruiker toegewezen schermnaam, 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 preview in plaats daarvan.
Input
Output — Het scherm als code (JSX). Let op de commentaarregel aan het begin, die vereist is bij gebruik van het
add-screen-gereedschap.
add-screen
Voeg een nieuw scherm aan een Flowstep-bestand toe uit een ruwe JSX-string.
Input
Opmerking - Een opmerking die hieronder vergelijkbaar is, 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 (intern) gebruikt als aanwezig (bijvoorbeeld bij het doorgeven van JSX die is gekopieerd uit de uitvoer van get-screen), maar is niet verplicht. De schermnaam wordt uit het name-veld van de opmerking genomen (weergegeven als “Copy of <name>”), of “Untitled” als absent.
<!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" -->
Output — De nieuw toegevoegde scherm-ID.
get-screen-image
Render een scherm naar PNG en retourneer het als inline-afbeelding. Vereist een client die afbeeldingsinhoudsblokken ondersteunt.
Input
Output — MCP-afbeeldingsinhoudsblok (
image/png).
rename-screen
Hernoem het canvasetiket van een scherm — de naam weergegeven door list-screens en in de editor. Dit verandert alleen het label, niet de lay-out, grootte of inhoud van het scherm — gebruik edit-design daarvoor.
Input
Output —
{ screenId, name }.
AI-gereedschappen
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).
Input
Output —
{ fileId, screenIds, designGuidelinesUpdated }. Geef elk screenId door aan get-screen-image om resultaten te bekijken. designGuidelinesUpdated rapporteert of de ontwerprichtlijnen van het bestand zijn gewijzigd als onderdeel van deze generatie.
regenerate-design
Maak bestaande schermen helemaal opnieuw of met een stijlvariant. Vereist minstens één screenId in targets. Blokkeert totdat de generatie is voltooid of een time-out optreedt (180 seconden).
Input
Output —
{ fileId, screenIds, designGuidelinesUpdated }. Geef elk screenId door aan get-screen-image om resultaten te bekijken.
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).
Input
Output —
{ fileId, screenIds, designGuidelinesUpdated }. Geef elk screenId door aan get-screen-image om resultaten te bekijken.
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).
Input
Output —
{ fileId, screenIds, designGuidelinesUpdated }. Geef elk screenId door aan get-screen-image om resultaten te bekijken.
upload-attachment
Upload een bestand om als bijlage in create-new-design of edit-design te gebruiken (niet regenerate-design of expand-design). Bestandsbytes gaan nooit door het model, en de server haalt nooit URL’s voor je op.
Er zijn twee modi — gebruik er precies één en combineer ze niet.
Modus A — bestanden en afbeeldingen (mimeType + fileName)
Een verplichte drie-stappenprocedure voor elke afbeelding, PDF of groter tekstbestand:
-
Roep
upload-attachmentaan met alleenmimeTypeenfileName(bijvoorbeeldimage/pngendog.png). Het antwoord is een voorbereide upload, geen opgeslagen bestand: -
Vervang
LOCAL_FILE_PATHinuploadCommanddoor het absolute pad naar je bestand en voer die exacte opdracht in je shell uit — het moet uiting geven 0. Het token insignedUrlautoriseert alleen deze enkele upload. Het overslaan van deze stap laat storage leeg en het ontwerpgereedschap mislukt de preflight-controle. -
Geef alleen
{ id, path, type }door in deattachments-array van het ontwerpgereedschap — nietsignedUrl,uploadCommandofnextStep.
upload-attachment nooit voor bestanden die u lokaal wilt uploaden via een URL; download het bestand zelf eerst naar een lokaal pad (bijvoorbeeld met curl), en volg vervolgens dezelfde drie stappen. Geef nooit een URL door aan upload-attachment.
Modus B — korte tekst (
text + mimeType)
Upload tekst die al in context staat — geen shellvormulier nodig. Het antwoord is klaar om rechtstreeks te gebruiken:
Geef het resultaat
{ id, path, type } door in de attachments-array van create-new-design of edit-design.
De maximale bestandsgrootte is 3 MB voor beide modi, en PDF’s zijn begrensd tot 100 pagina’s. type is "image" voor afbeeldingsbestanden en "document" voor PDF’s en tekstbestanden.
Chatgereedschappen
get-chat-history
Haal de chatberichtgeschiedenis voor een bestand op.
Input
Output — JSON-object met een
messages-array. Elk bericht bevat een type ("request" of "response"), author ("human" of "ai") en content_type ("text", "summary" of "followup").
Ontwerpgereedschappen
get-design-guidelines
Haal de ontwerprichtlijnen die voor een bestand zijn opgeslagen op.
Input
Output
guidelines is null als er geen richtlijnen zijn ingesteld.
update-design-guidelines
Stel of vervang de ontwerprichtlijnen voor een bestand. Richtlijnen worden doorgegeven als een platte teksttekenreeks in de Google design.md-indeling — geef geen object of JSON door.
De server voert zachte validatie uit en kan een sectie Warnings: in het antwoord retourneren waarin problemen (onbekende sleutels, niet-hex-kleuren) worden vermeld die werden geaccepteerd, maar kunnen door de AI worden genegeerd. Geef deze aan de gebruiker aan.
Input
Validatieregels
- Voorgrond moet correct worden geopend en gesloten
- Voorgrondlijnen moeten geldige YAML-blokstijl zijn
- Markdown-body mag geen duplicaat
##sectiekoppen bevatten
"Design guidelines updated successfully", eventueel gevolgd door een sectie Warnings:.
delete-design-guidelines
Wis de ontwerprichtlijnen voor een bestand.
Input
Output —
"Design guidelines deleted successfully"
Figma-gereedschappen
import-figma
Importeer een Figma-frame in een Flowstep-bestand als bewerkbare elementen op het canvas. Het opnieuw importeren van dezelfde frame werkt deze ter plekke bij. De organisatie van het bestand moet eerst Figma verbonden hebben in Flowstep-instellingen.
Input
Output —
{ fileId, screenId }. screenId is de ID van het geïmporteerde scherm element — geef deze door aan get-screen-image om het resultaat te bekijken. Wanneer een pagina-URL meerdere frames importeert, is screenId null en wordt frameCount in plaats daarvan geretourneerd.