MCP-verktøyreferanse

Ved suksess returnerer hvert verktøy unntatt get-screen-image resultatet to ganger: som structuredContent (validert mot verktøyets publiserte utdataskjema) og som det samme objektet serialisert i en tekstblokk, { type: "text", text: "<json-string>" }, for klienter som ikke leser strukturert innhold. get-screen-image returnerer bare en MCP-bildeblokk: { type: "image", data: "<base64>", mimeType: "image/png" }. Ved feil er isError: true satt, og tekstblokken inneholder en kort feilmelding. Feil du kan gjøre noe med, for eksempel en navnefeil ved sletting, en ugyldig Figma-lenke, ugyldige designretningslinjer, et problem med et vedlegg eller en tidsavbrudd ved generering, forklarer hva du må rette. Andre feil returnerer en generell melding, for eksempel Failed to list files.

Priser: de tre AI-designverktøyene — ai-design-screens, ai-generate-screen-variant og ai-edit-screen-variant — bruker den samme meldingskvoten som Flowstep-appen. Alle andre verktøy er gratis. Se Bruksgrenser.

Hvert verktøy publiserer også MCP-annotasjoner, slik at klienten din vet hva det gjør. delete-file, delete-screen, delete-design-guidelines, replace-screen-jsx, ai-design-screens og ai-edit-screen-variant er merket som destruktive fordi de fjerner eller overskriver eksisterende innhold.

Filverktøy

`list-files`

Liste over metadata for filene dine i Flowstep. Kall dette først for å sjekke om en relevant fil allerede finnes. Det returnerer ikke skjerminnhold. Bruk get-screen-image eller get-screen-jsx til det. Inndata

Parameter	Type	Standard	Beskrivelse
`orderByCreation`	`boolean`	`true`	Sorter nyeste først etter `created_at` (`true`) eller etter `updated_at` (`false`). Bruk `false` for å finne nylig redigerte filer
`limit`	`integer` (1–100)	`20`	Maksimalt antall filer som returneres. En full side kan bety at flere filer finnes
`offset`	`integer` (≥0)	`0`	Antall filer som hoppes over. Neste side er `offset + limit`

Utdata — { 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 hvis du opprettet filen.
shared_with_me — true hvis filen ble delt med deg direkte, og ikke bare gjennom organisasjonen din.
url — åpner filen i Flowstep-editoren.

`get-file`

Hent metadata for én fil. Filinnhold er bevisst utelatt. Bruk get-screen-image eller get-screen-jsx for å inspisere skjermer, og get-design-guidelines for å hente tilknyttede retningslinjer. Hvis du har en ventende invitasjon til filen, aksepterer du den ved å kalle get-file. Inndata

Parameter	Type	Beskrivelse
`id`	`uuid`	Fil-ID

Utdata — { 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 eller write.
visibility — private, member eller public.
user_access_level — tilgangen din til filen: read eller write.

`create-file`

Opprett en tom Flowstep-fil uten skjermer. For å opprette en fil og generere skjermer i ett steg kaller du ai-design-screens uten fileId i stedet. Bruk create-file til kodefirst-arbeidsflyter, etterfulgt av add-screen-jsx. Inndata

Parameter	Type	Beskrivelse
`name`	`string` (minst 1)	Visningsnavnet til den nye filen

Utdata — { file, user_access_level }, i samme form som get-file. owner er alltid true, og user_access_level er alltid write. Bruk den returnerte file.id-en som fileId i de påfølgende verktøykallene.

`update-file`

Gi en fil nytt navn. Inndata

Parameter	Type	Beskrivelse
`id`	`uuid`	Fil-ID
`name`	`string` (minst 1)	Nytt visningsnavn

Utdata — { file, user_access_level }, i samme form som get-file.

`delete-file`

Slett en fil permanent. Navnet du sender inn, sjekkes mot filens gjeldende visningsnavn før sletting. Hvis det ikke stemmer, avbrytes slettingen. Dette forhindrer at du sletter feil fil ved et uhell. Agenter får instruks om å bekrefte med deg først. Inndata

Parameter	Type	Beskrivelse
`id`	`uuid`	Fil-ID
`name`	`string`	Filens gjeldende visningsnavn. Må stemme, ellers avbrytes slettingen

Utdata — { "deleted": true }

Dette kan ikke angres. Alle skjermer i filen slettes.

Skjermverktøy

`list-screens`

Liste over skjermene i en fil, i lerretsrekkefølge. Kall dette etter list-files for å se hva som allerede finnes i en fil. Bruk de returnerte screenId-verdiene med de andre skjermverktøyene og AI-designverktøyene. Inndata

Parameter	Type	Beskrivelse
`fileId`	`uuid`	Fil-ID

Utdata — { 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 — den siste genereringsprompten for skjermen, eller en tom streng hvis den aldri ble generert (for eksempel en skjerm lagt til med add-screen-jsx).
fidelity — lofi, hifi eller ui.

`get-screen-image`

Gjengi en skjerm til PNG og returner den som et innebygd bilde. Krever en klient som støtter bildeinnholdsblokker. Kall det én gang for hver screenId som returneres av et AI-designverktøy, add-screen-jsx, replace-screen-jsx eller import-figma. Inndata

Parameter	Type	Beskrivelse
`fileId`	`uuid`	Fil-ID
`screenId`	`uuid`	En `screenId` fra `list-screens` eller fra `screenIds`-matrisen som returneres av et designverktøy

Utdata — MCP-bildeinnholdsblokk (image/png). data er standard base64 for PNG-bytene, ikke en data-URI. Det finnes ingen structuredContent for dette verktøyet.

`get-screen-jsx`

Hent en skjerm som JSX, med metadataene den har. Da kan du bygge videre på den i kodebasen din, eller redigere den og skrive den tilbake med replace-screen-jsx. Bruk get-screen-image for en visuell forhåndsvisning i stedet. Inndata

Parameter	Type	Standard	Beskrivelse
`fileId`	`uuid`	—	Fil-ID
`screenId`	`uuid`	—	En `screenId` fra `list-screens` eller fra `screenIds`-matrisen som returneres av et designverktøy
`includeIds`	`boolean`	`false`	Ta med et `data-id`-attributt på elementene i `jsx`. Bruk dette når du trenger element-ID-er å sende som `elementIds` til `ai-design-screens`, enten for å redigere på stedet eller som visuell referanse

Utdata — { 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 — kun markup. data-id-attributter tas med bare når includeIds er true.
prompt — den siste genereringsprompten, eller en tom streng hvis skjermen aldri ble generert.
fragments — felles elementer lagret på skjermen, for eksempel en navigasjonslinje, en topptekst eller en logo, som { purpose, markup }-objekter. Tom når det ikke finnes noen. Send dem tilbake til replace-screen-jsx for å beholde eller oppdatere dem.

Se Feltverdier for skjerm for verdiene til fidelity, screenType og colorTheme.

`add-screen-jsx`

Legg til en ny skjerm i en fil fra JSX du har skrevet. Dette er kodefirst-veien, og den er gratis. Bruk ai-design-screens når du vil at Flowsteps AI skal designe skjermen. add-screen-jsx oppretter alltid en ny skjerm. For å overskrive en eksisterende skjerm bruker du replace-screen-jsx. For å vise et bilde du har lastet opp, se Bilder i JSX. Når den nye skjermen er basert på en eksisterende, starter du fra get-screen-jsx (uten includeIds) for name, fidelity, screenType, colorTheme og jsx, og endrer deretter det som skal være annerledes. Inndata

Parameter	Type	Standard	Beskrivelse
`fileId`	`uuid`	—	Fil-ID
`name`	`string` (1–100 tegn)	—	Valgfritt visningsnavn. Utelat det for at skjermen automatisk skal få navnet `Screen N`
`fidelity`	`string`	`"ui"`	Skjermens detaljnivå
`screenType`	`string`	—	Påkrevd — enheten eller visningsporten skjermen er designet for
`colorTheme`	`string`	`"default"`	Fargetema
`jsx`	`string`	—	Kun JSX-markup. `data-id`-attributter ignoreres. Den nye skjermen får nye element-ID-er

Utdata — { fileId, screenId }. Kall get-screen-image med screenId for å se resultatet.

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

`replace-screen-jsx`

Overskriv en eksisterende skjerm med JSX du har skrevet. Skjermen beholder screenId-en og plasseringen sin på lerretet. Innebygde elementer får nye ID-er. Dette er kodefirst-veien, og den er gratis. Bruk ai-design-screens eller ai-edit-screen-variant for AI-endringer, og add-screen-jsx for å opprette en ny skjerm i stedet. Start fra get-screen-jsx (uten includeIds), og endre deretter det som skal være annerledes. For å vise et bilde du har lastet opp, se Bilder i JSX. Inndata

Parameter	Type	Beskrivelse
`fileId`	`uuid`	Fil-ID
`screenId`	`uuid`	Skjermen som skal overskrives
`jsx`	`string`	Kun JSX-markup. `data-id`-attributter ignoreres
`name`	`string` (1–100 tegn)	Valgfritt. Utelat det for å beholde gjeldende navn
`fidelity`	`string`	Valgfritt. Utelat det for å beholde gjeldende detaljnivå
`screenType`	`string`	Valgfritt. Utelat det for å beholde gjeldende skjermtype
`colorTheme`	`string`	Valgfritt. Utelat det for å beholde gjeldende fargetema
`fragments`	`{ purpose, markup }[]`	Valgfrie felles elementer fra `get-screen-jsx`. Utelat det for å beholde gjeldende fragmenter, eller send `[]` for å fjerne dem

Utdata — { fileId, screenId }. Kall get-screen-image med screenId for å se resultatet.

Dette erstatter innholdet på skjermen på stedet.

`rename-screen`

Gi en skjerm nytt navn på lerretet, altså navnet som vises i list-screens og i editoren. Dette endrer bare etiketten, ikke skjermens oppsett, størrelse eller innhold. Bruk ai-design-screens for disse. Inndata

Parameter	Type	Beskrivelse
`fileId`	`uuid`	Fil-ID
`screenId`	`uuid`	`screenId`-en som returneres av `list-screens`
`name`	`string` (1–100 tegn)	Nytt skjermnavn. Innledende og avsluttende mellomrom fjernes

Utdata — { screenId, name }.

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

`delete-screen`

Slett en skjerm fra en fil permanent. Navnet du sender inn, sjekkes mot skjermens gjeldende visningsnavn. Hvis det ikke stemmer, avbrytes slettingen. Agenter får instruks om å bekrefte med deg først. Inndata

Parameter	Type	Beskrivelse
`fileId`	`uuid`	Fil-ID
`screenId`	`uuid`	Skjermen som skal slettes
`name`	`string`	Skjermens gjeldende visningsnavn. Må stemme, ellers avbrytes slettingen

Utdata — { "deleted": true }

Bilder i JSX

add-screen-jsx og replace-screen-jsx godtar bilder i en img-src, eller som bakgrunn i className med bg-[url(...)]. Skriv alt-tekst, og tilpass størrelsen på hvert bilde til formålet. Slik legger du inn et eget bilde:

Last det opp med upload-attachment i modus A (mimeType + fileName), og kjør den returnerte uploadCommand-en.
Hvis type i svaret er "image", limer du inn assetUrl-en nøyaktig som den ble returnert, i img src eller bg-[url(assetUrl)].

Behold alle andre bilde-URL-er nøyaktig slik get-screen-jsx returnerte dem. Ikke legg path, signedUrl eller uploadCommand i src.

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

Feltverdier for skjerm

get-screen-jsx returnerer, og add-screen-jsx og replace-screen-jsx godtar, disse verdiene:

Felt	Verdier
`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`

Verktøy for designretningslinjer

Designretningslinjer er DESIGN.md-tekst lagret på en fil. Når de er satt, tas de med i hver AI-generering for den filen. Se Designretningslinjer.

`get-design-guidelines`

Hent designretningslinjene som er knyttet til en fil. Inndata

Parameter	Type	Beskrivelse
`fileId`	`uuid`	Fil-ID

Utdata — { guidelines }.

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

guidelines er null hvis ingen retningslinjer er satt.

`update-design-guidelines`

Sett eller erstatt designretningslinjene for en fil. Send retningslinjene som en ren streng i Googles DESIGN.md-format, ikke som et objekt eller JSON. Hvis du leser fra en fil, sender du filens tekst. Inndata

Parameter	Type	Beskrivelse
`fileId`	`uuid`	Fil-ID
`designGuidelines`	`string` (minst 1)	Retningslinjenes rå tekst. Må være en ren streng, ikke JSON-kodet

Valideringsregler

Frontmatter må åpnes og lukkes korrekt
Frontmatter-linjer må være gyldig YAML i blokkform
Markdown-brødteksten må ikke inneholde dupliserte ##-overskrifter for seksjoner

Hvis valideringen mislykkes, returnerer kallet en feil som starter med Invalid design guidelines:. Utdata — { updated, warnings? }.

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

warnings lister myke valideringsproblemer (ukjente nøkler, ikke-heksadesimale farger) som ble godtatt, men som AI-en kan ignorere. Det utelates når det ikke finnes noen. Vis disse til brukeren.

`delete-design-guidelines`

Fjern designretningslinjene for en fil. Å slette retningslinjer som ikke finnes, har ingen effekt. Inndata

Parameter	Type	Beskrivelse
`fileId`	`uuid`	Fil-ID

Utdata — { "deleted": true }

Chatverktøy

`get-chat-history`

Hent designsamtalen knyttet til en fil, altså filens Flowstep-chat og ikke samtalen i MCP-klienten din. Bruk den til å fortsette tidligere arbeid på filen. Inndata

Parameter	Type	Beskrivelse
`fileId`	`uuid`	Fil-ID

Utdata — { messages }. messages er tom når du ikke har noen designsamtale på filen. Hver melding har en type ("request" eller "response"), en author ("human" eller "ai") og en content_type. Svarmeldinger bruker "text", "summary" eller "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" }]
    }
  ]
}

Vedleggsverktøy

`upload-attachment`

Last opp en referansefil som vedlegg i ai-design-screens, eller et bilde som du vil plassere i din egen JSX med add-screen-jsx eller replace-screen-jsx. ai-generate-screen-variant og ai-edit-screen-variant tar ikke vedlegg. Filbytes går aldri gjennom modellen, og serveren henter aldri URL-er på dine vegne. For å referere til en nettside tar du med URL-en i message i ai-design-screens. Det finnes to moduser. Bruk nøyaktig én, og ikke kombiner dem. Modus A — filer og bilder (mimeType + fileName) En obligatorisk tretrinnsflyt for alle bilder, PDF-er og større tekstfiler:

Kall upload-attachment med bare mimeType og fileName (for eksempel image/png og dog.png). Svaret er en forberedt opplasting, ikke en lagret fil:

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

Erstatt LOCAL_FILE_PATH i uploadCommand med den absolutte stien til filen din, og kjør nøyaktig den kommandoen i skallet ditt. Den må avsluttes med 0. Tokenet i signedUrl gir bare tilgang til denne ene opplastingen. Hvis du hopper over dette steget, blir lagringen tom, og designverktøyet feiler i forhåndssjekken.
Send bare { id, path, type } inn i attachments-matrisen til ai-design-screens, ikke signedUrl, uploadCommand eller nextStep. For å plassere et bilde i din egen JSX, legger du assetUrl i img src eller bg-[url(...)] i JSX-en du sender til add-screen-jsx eller replace-screen-jsx. Se Bilder i JSX.

For å legge ved en ekstern fil laster du den ned til en lokal sti selv først (for eksempel med curl), og følger deretter de samme tre stegene. Send aldri en URL til upload-attachment.

Parameter	Type	Beskrivelse
`mimeType`	enum	Filens MIME-type. Én av `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`. Bruk `text/javascript` for `.jsx`-, `.tsx`-, `.js`- og `.ts`-filer
`fileName`	`string` (minst 1)	Opprinnelig filnavn med filendelse, for eksempel `cat.png` eller `design.md`

Modus B — kort tekst (text + mimeType) Last opp tekst som allerede er i konteksten, uten skallkommando. Svaret kan brukes direkte:

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

Parameter	Type	Beskrivelse
`text`	`string` (maks 64 000 tegn)	Rått tekstinnhold. Kun tekstfiler. Bruk det ikke for bilder eller PDF-er. Er teksten lengre enn 64 000 tegn? Bruk modus A i stedet
`mimeType`	enum	Én av `text/markdown`, `text/plain`, `text/javascript`

Send den resulterende { id, path, type }-en inn i attachments-matrisen til ai-design-screens. Maksimal filstørrelse er 3 MB i begge moduser, og PDF-er er begrenset til 100 sider. Utdata — { id, path, assetUrl, type, mimeType, signedUrl?, uploadCommand?, nextStep? }.

type — "image" for bildefiler og "document" for PDF-er og tekstfiler.
assetUrl — URL-en til den opplastede filen, returnert i begge moduser. Bruk den i JSX for add-screen-jsx eller replace-screen-jsx bare når type er "image", og bare etter at uploadCommand-en fra modus A har kjørt.
signedUrl, uploadCommand, nextStep — settes bare i modus A. Ikke send dem inn i designverktøyene.

Figma-verktøy

`import-figma`

Importer en Figma-ramme til en Flowstep-fil som redigerbare elementer på lerretet. Hver import legger til en ny skjerm. Hvis du importerer den samme rammen to ganger, får du to skjermer, så slett den gamle med delete-screen hvis du mente å erstatte den. Organisasjonen som eier filen, må ha Figma koblet til i innstillingene i Flowstep. Inndata

Parameter	Type	Beskrivelse
`fileId`	`uuid`	Flowstep-filen rammen skal importeres til. Dette er ikke Figma-filnøkkelen i `figmaUrl`
`figmaUrl`	`string`	Lenke til en bestemt Figma-ramme, med en `node-id`. I Figma høyreklikker du rammen og velger Copy/Paste as → Copy link to selection. En lenke til en side importerer alle rammer på toppnivå på den siden (begrenset til 20 rammer over MCP)

Utdata — { fileId, screenId, frameCount? }. screenId er den importerte skjermen. Send den til get-screen-image for å se resultatet. Når en sidelenke importerer flere rammer, er screenId null, og frameCount returneres i stedet. Kall da list-screens, og deretter get-screen-image for hver ny skjerm.

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

Verktøy for abonnement og fakturering

`get-plan-details`

Hent organisasjonens Flowstep-abonnement, abonnementsstatus, bruk og gjenværende kvote. Krever ingen inndata. Organisasjonen finnes fra den innloggede brukeren. Bruk det til å sjekke kvoten din før du kaller AI-designverktøyene. Utdata — { plan, subscription, limits, usage, remaining }.

Felt	Beskrivelse
`plan`	`{ name, code, type }`. `type` er `"free"` eller `"paid"`
`subscription`	`{ isPaid, isTrial, startDate, endDate, trialDaysRemaining }`
`limits`	Grenser per funksjon, nøklet etter funksjon (for eksempel `messages`). Hver har valgfrie `daily`- og `monthly`-objekter med `max`- og `warn`-verdier, pluss et `unlimited`-flagg
`usage`	Bruk per funksjon så langt, som `{ daily, monthly }`
`remaining`	Gjenværende kvote per funksjon, som `{ daily, monthly }`. Utelates for ubegrensede funksjoner

Grensene varierer etter abonnement. Se Priser og Bruksgrenser.

AI-designverktøy

Disse tre verktøyene designer ut fra en beskrivelse eller en forhåndsinnstilling. De tar aldri imot eller gjenbruker JSX. Hvert kall bruker den samme meldingskvoten som Flowstep-appen, og blokkerer til genereringen er ferdig eller har fått tidsavbrudd (180 sekunder).

Verktøy	Bruk det til
`ai-design-screens`	Generere nye skjermer, endre eksisterende skjermer på stedet, eller begge deler, ut fra en fritekstbeskrivelse
`ai-generate-screen-variant`	Legge til et neste steg, en feil- eller tomtilstand eller en plattformvariant av én eksisterende skjerm
`ai-edit-screen-variant`	Bruke en redigerings- eller redesignforhåndsinnstilling på én hel eksisterende skjerm

Alle tre returnerer { status, fileId, screenIds, designGuidelinesUpdated }. Kall get-screen-image én gang for hver screenId for å se resultatet.

designGuidelinesUpdated — en kort oppsummering av endringen når DESIGN.md-retningslinjene for filen ble oppdatert automatisk i løpet av denne runden. Ellers null.

`ai-design-screens`

Generer én eller flere nye skjermer, endre eksisterende skjermer på stedet, eller begge deler i ett kall, ut fra en tekstbeskrivelse. Dette gjelder nye flyter, tematisering, tekst, oppsett og koordinerte endringer på tvers av flere skjermer. Det er den samme designagenten som chatten i Flowstep-editoren. Den avgjør ut fra message og elementIds hva som skal bygges og hva som skal endres. Utelat fileId for å starte en ny fil. Send inn fileId for å jobbe i en eksisterende fil. Hvis forespørselen kan gjelde en fil du allerede har, bør agenten sjekke list-files og list-screens først. For et neste steg, en feil- eller tomtilstand eller en plattformvariant av én skjerm bruker du ai-generate-screen-variant. For en forhåndsinnstilt redigering eller redesign av én skjerm bruker du ai-edit-screen-variant. Hvis du allerede har JSX, bruker du add-screen-jsx eller replace-screen-jsx i stedet. Inndata

Parameter	Type	Standard	Beskrivelse
`fileId`	`uuid`	—	Målfilen. Utelat for å opprette en ny fil. Påkrevd når `elementIds` er satt
`message`	`string`	—	Beskrivelse av skjermene som skal genereres, og/eller endringene som skal gjøres. Når du sender `elementIds`, skriv om de skal redigeres eller brukes som referanse. Ta med eventuelle nettside-URL-er du vil at Flowstep skal referere til, her
`elementIds`	`uuid[]`	`[]`	Valgfrie `screenId`-er fra `list-screens` og/eller element-`data-id`-er fra `get-screen-jsx` (med `includeIds`), på samme måte som et utvalg i editoren. De kan redigeres på stedet, eller brukes som visuell referanse for nye skjermer. En `screenId` retter seg mot hele skjermen
`attachments`	`{ id, path, type }[]` (maks 5)	`[]`	Filer fra `upload-attachment` — bilder, PDF-er, eller kode- og tekstfiler. Ikke legg filinnhold rett inn i meldingen

Eksempel — rediger én skjerm og legg til en annen i ett kall:

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

Utdata — { 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" når skjermer ble bygget eller endret. "chat" når Flowstep svarte uten å bygge. I så fall inneholder reply svaret, og screenIds er tom. Hvis oppdraget ditt er tvetydig, bør agenten be deg om å avklare, og kalle verktøyet på nytt.
screenIds — hver skjerm som ble bygget eller endret under kallet, inkludert skjermer som ble redigert på stedet. Hvis kallet får tidsavbrudd etter at noen skjermer er bygget, returnerer det disse skjermene i stedet for en feil.

Skjermer du ber den om å redigere, overskrives på stedet.

`ai-generate-screen-variant`

Legg til en ny skjerm avledet fra nøyaktig én eksisterende skjerm. Det kan være neste steg i flyten, en feil- eller tomtilstand, eller en versjon for en annen plattform. Originalskjermen forblir uendret. For å legge til en skjerm som ikke er en variant av en eksisterende (for eksempel en innstillingsskjerm), bruker du ai-design-screens med en fileId. Inndata

Parameter	Type	Beskrivelse
`fileId`	`uuid`	Målfilen
`screenId`	`uuid`	Den eksisterende skjermen å avlede fra
`operationVariant`	enum	Påkrevd — hvordan den nye skjermen forholder seg til den eksisterende

`operationVariant`	Legger til
`next_screen`	Neste skjerm i brukerflyten
`error_state`	En feiltilstand for skjermen
`empty_state`	En tomtilstand for skjermen
`web_version`	En webversjon
`mobile_version`	En mobilversjon
`tablet_version`	En nettbrettversjon
`mobile_ios_version`	En iOS-versjon
`mobile_android_version`	En Android-versjon

Utdata — { status, fileId, screenIds, designGuidelinesUpdated }. status er alltid "generated".

`ai-edit-screen-variant`

Endre nøyaktig én eksisterende skjerm på stedet med en forhåndsinnstilling. Du kan tematisere eller polere den, prøve et annet oppsett eller en annen visuell stil, eller designe den på nytt fra bunnen av. For nye skjermer, fritekstinstruksjoner eller presise endringer på enkelte elementer, bruker du ai-design-screens. Inndata

Parameter	Type	Beskrivelse
`fileId`	`uuid`	Målfilen
`screenId`	`uuid`	Den eksisterende skjermen som skal endres
`operationVariant`	enum	Påkrevd — redigerings- eller redesignforhåndsinnstillingen som skal brukes

`operationVariant`	Type	Effekt
`dark_theme`	Redigering	Bytt skjermen til et mørkt tema
`light_theme`	Redigering	Bytt skjermen til et lyst tema
`make_pretty`	Redigering	Poler skjermens visuelle design
`different_layout`	Redesign	Prøv et annet oppsett
`different_style`	Redesign	Prøv en annen visuell stil
`from_scratch`	Redesign	Design skjermen på nytt fra bunnen av

Utdata — { status, fileId, screenIds, designGuidelinesUpdated }. status er alltid "generated".

Dette overskriver innholdet på skjermen på stedet.

Omdøpte verktøy

Verktøynavn ble endret i september og oktober 2026. Hvis du har prompter, skript eller instruksjoner for agenter som bruker de gamle navnene, oppdaterer du dem:

Gammelt navn	Nytt navn
`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` (fritekstinstruksjoner)	`ai-design-screens`
`edit-design` (med en `operationVariant`-forhåndsinnstilling)	`ai-edit-screen-variant`
`regenerate-design`	`ai-edit-screen-variant`
`expand-design`	`ai-generate-screen-variant`

Inndataene er også endret. AI-designverktøyene tar elementIds (eller en enkelt screenId for variantverktøyene) i stedet for targets. add-screen-jsx tar jsx og eksplisitte metadatafelter i stedet for jsxContent med en metadatakommentar. create-file tar name i stedet for title. Verktøyene for designretningslinjer tar fileId i stedet for resourceId og linkedTo.

​Filverktøy

​list-files

​get-file

​create-file

​update-file

​delete-file

​Skjermverktøy

​list-screens

​get-screen-image

​get-screen-jsx

​add-screen-jsx

​replace-screen-jsx

​rename-screen

​delete-screen

​Bilder i JSX

​Feltverdier for skjerm

​Verktøy for designretningslinjer

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Chatverktøy

​get-chat-history

​Vedleggsverktøy

​upload-attachment

​Figma-verktøy

​import-figma

​Verktøy for abonnement og fakturering

​get-plan-details

​AI-designverktøy

​ai-design-screens

​ai-generate-screen-variant

​ai-edit-screen-variant

​Omdøpte verktøy

Filverktøy

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Skjermverktøy

`list-screens`

`get-screen-image`

`get-screen-jsx`

`add-screen-jsx`

`replace-screen-jsx`

`rename-screen`

`delete-screen`

Bilder i JSX

Feltverdier for skjerm

Verktøy for designretningslinjer

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Chatverktøy

`get-chat-history`

Vedleggsverktøy

`upload-attachment`

Figma-verktøy

`import-figma`

Verktøy for abonnement og fakturering

`get-plan-details`

AI-designverktøy

`ai-design-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

Omdøpte verktøy