MCP-verktygsreferens

Vid lyckat resultat returnerar varje verktyg utom get-screen-image sitt resultat två gånger. Det första är som structuredContent, validerat mot verktygets publicerade utdataschema. Det andra är samma objekt serialiserat i ett textblock, { type: "text", text: "<json-string>" }, för klienter som inte läser strukturerat innehåll. get-screen-image returnerar endast ett MCP-bildblock: { type: "image", data: "<base64>", mimeType: "image/png" }. Vid fel sätts isError: true och textblocket innehåller ett kort felmeddelande. Fel som du kan åtgärda, till exempel en namnkonflikt vid borttagning, en ogiltig Figma-länk, ogiltiga designriktlinjer, ett bilageproblem eller en genereringstimeout, förklarar vad du behöver rätta. Andra fel returnerar ett generiskt meddelande, till exempel Failed to list files.

Priser: de tre AI-designverktygen, ai-design-screens, ai-generate-screen-variant och ai-edit-screen-variant, använder samma meddelandekvot som Flowstep-appen. Alla andra verktyg är gratis. Se Användningsgränser.

Varje verktyg publicerar också MCP-annoteringar så att din klient vet vad det gör. delete-file, delete-screen, delete-design-guidelines, replace-screen-jsx, ai-design-screens och ai-edit-screen-variant är markerade som destruktiva eftersom de tar bort eller skriver över befintligt innehåll.

Filverktyg

`list-files`

Lista metadata för dina Flowstep-filer. Anropa detta först för att kontrollera om en relevant fil redan finns. Svaret innehåller inget skärminnehåll. Använd get-screen-image eller get-screen-jsx för det. Indata

Parameter	Typ	Standardvärde	Beskrivning
`orderByCreation`	`boolean`	`true`	Sortera nyast först efter `created_at` (`true`) eller efter `updated_at` (`false`). Använd `false` för att hitta nyligen redigerade filer
`limit`	`integer` (1–100)	`20`	Högsta antal filer som returneras. En full sida kan betyda att fler filer finns
`offset`	`integer` (≥0)	`0`	Antal filer som hoppas över. Nästa sida är `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 om du skapade filen.
shared_with_me: true om filen delades med dig direkt, inte bara via din organisation.
url: öppnar filen i Flowstep-editorn.

`get-file`

Hämta metadata för en enskild fil. Filinnehållet utelämnas med avsikt. Använd get-screen-image eller get-screen-jsx för att granska skärmar och get-design-guidelines för att hämta kopplade riktlinjer. Om du har en väntande inbjudan till filen accepterar du den genom att anropa get-file. Indata

Parameter	Typ	Beskrivning
`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: din åtkomst till filen: read eller write.

`create-file`

Skapa en tom Flowstep-fil utan skärmar. Om du vill skapa en fil och generera skärmar i ett steg anropar du i stället ai-design-screens utan fileId. Använd create-file för kodfirst-arbetsflöden, följt av add-screen-jsx. Indata

Parameter	Typ	Beskrivning
`name`	`string` (minst 1)	Visningsnamn för den nya filen

Utdata: { file, user_access_level }, i samma form som get-file. owner är alltid true och user_access_level är alltid write. Använd det returnerade file.id som fileId i efterföljande verktygsanrop.

`update-file`

Byt namn på en fil. Indata

Parameter	Typ	Beskrivning
`id`	`uuid`	Fil-ID
`name`	`string` (minst 1)	Nytt visningsnamn

Utdata: { file, user_access_level }, i samma form som get-file.

`delete-file`

Ta bort en fil permanent. name du skickar in kontrolleras mot filens aktuella visningsnamn innan borttagningen. Om det inte stämmer avbryts borttagningen. Det förhindrar att du råkar ta bort fel fil. Agenter instrueras att bekräfta med dig först. Indata

Parameter	Typ	Beskrivning
`id`	`uuid`	Fil-ID
`name`	`string`	Filens aktuella visningsnamn. Måste stämma, annars avbryts borttagningen

Utdata: { "deleted": true }

Detta går inte att ångra. Alla skärmar i filen tas bort.

Skärmverktyg

`list-screens`

Lista skärmarna i en fil, i canvasordning. Anropa detta efter list-files för att se vad som redan finns i en fil. Använd de returnerade screenId-värdena med de andra skärmverktygen och AI-designverktygen. Indata

Parameter	Typ	Beskrivning
`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 senaste genereringsprompten för skärmen, eller en tom sträng om den aldrig genererades (till exempel en skärm som lagts till med add-screen-jsx).
fidelity: lofi, hifi eller ui.

`get-screen-image`

Rendera en skärm till PNG och returnera den som en inline-bild. Kräver en klient som stöder bildblock. Anropa verktyget en gång för varje screenId som returneras av ett AI-designverktyg, add-screen-jsx, replace-screen-jsx eller import-figma. Indata

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Fil-ID
`screenId`	`uuid`	Ett `screenId` från `list-screens` eller från arrayen `screenIds` som returneras av ett designverktyg

Utdata: MCP-bildinnehållsblock (image/png). data är standard-base64 för PNG-bytes, inte en data-URI. Det finns inget structuredContent för detta verktyg.

`get-screen-jsx`

Hämta en skärm som JSX tillsammans med dess metadata. Då kan du bygga utifrån den i din kodbas, eller redigera den och skriva tillbaka den med replace-screen-jsx. Använd get-screen-image för en visuell förhandsvisning i stället. Indata

Parameter	Typ	Standardvärde	Beskrivning
`fileId`	`uuid`		Fil-ID
`screenId`	`uuid`		Ett `screenId` från `list-screens` eller från arrayen `screenIds` som returneras av ett designverktyg
`includeIds`	`boolean`	`false`	Inkludera ett `data-id`-attribut på elementen i `jsx`. Använd detta när du behöver elementens ID:n för att skicka som `elementIds` till `ai-design-screens`, antingen för att redigera på plats eller som visuell referens

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: endast markup. data-id-attribut ingår bara när includeIds är true.
prompt: den senaste genereringsprompten, eller en tom sträng om skärmen aldrig genererades.
fragments: delad gemensam kromkod som lagras på skärmen, till exempel en navigeringsrad, en rubrik eller en logotyp, som objekt av typen { purpose, markup }. Tom när det inte finns några. Skicka tillbaka dem till replace-screen-jsx för att behålla eller uppdatera dem.

Se Skärmfältens värden för värdena för fidelity, screenType och colorTheme.

`add-screen-jsx`

Lägg till en ny skärm i en fil från JSX som du har skrivit. Detta är den kodfirst-väg som är gratis. Använd ai-design-screens när du vill att Flowstep:s AI ska designa skärmen. add-screen-jsx skapar alltid en ny skärm. Vill du skriva över en befintlig skärm använder du replace-screen-jsx. Om du vill visa en bild du har laddat upp, se Bilder i JSX. När den nya skärmen bygger på en befintlig börjar du med get-screen-jsx (utan includeIds) för name, fidelity, screenType, colorTheme och jsx, och ändrar sedan det som ska skilja sig. Indata

Parameter	Typ	Standardvärde	Beskrivning
`fileId`	`uuid`		Fil-ID
`name`	`string` (1–100 tecken)		Valfritt visningsnamn. Utelämna det för att låta skärmen få namnet `Screen N` automatiskt
`fidelity`	`string`	`"ui"`	Skärmens detaljnivå
`screenType`	`string`		Obligatoriskt: enheten eller visningsytan som skärmen är designad för
`colorTheme`	`string`	`"default"`	Färgtema
`jsx`	`string`		Endast JSX-markup. Eventuella `data-id`-attribut ignoreras. Den nya skärmen får nya element-ID:n

Utdata: { fileId, screenId }. Anropa get-screen-image med screenId för att se resultatet.

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

`replace-screen-jsx`

Skriv över en befintlig skärm med JSX som du har skrivit. Skärmen behåller sitt screenId och sin position på canvas. Kapslade element får nya ID:n. Detta är den kodfirst-väg som är gratis. Använd ai-design-screens eller ai-edit-screen-variant för AI-ändringar och add-screen-jsx för att skapa en ny skärm i stället. Börja med get-screen-jsx (utan includeIds) och ändra sedan det som ska skilja sig. Om du vill visa en bild du har laddat upp, se Bilder i JSX. Indata

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Fil-ID
`screenId`	`uuid`	Skärmen som ska skrivas över
`jsx`	`string`	Endast JSX-markup. Eventuella `data-id`-attribut ignoreras
`name`	`string` (1–100 tecken)	Valfritt. Utelämna för att behålla det aktuella namnet
`fidelity`	`string`	Valfritt. Utelämna för att behålla den aktuella detaljnivån
`screenType`	`string`	Valfritt. Utelämna för att behålla den aktuella skärmtypen
`colorTheme`	`string`	Valfritt. Utelämna för att behålla det aktuella färgtemat
`fragments`	`{ purpose, markup }[]`	Valfri delad kromkod från `get-screen-jsx`. Utelämna för att behålla de aktuella fragmenten, eller skicka `[]` för att rensa dem

Utdata: { fileId, screenId }. Anropa get-screen-image med screenId för att se resultatet.

Detta ersätter skärmens innehåll på plats.

`rename-screen`

Byt namn på en skärms canvasetikett, det namn som visas i list-screens och i editorn. Detta ändrar endast etiketten, inte skärmens layout, storlek eller innehåll. För sådana ändringar använder du ai-design-screens. Indata

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Fil-ID
`screenId`	`uuid`	Det `screenId` som returneras av `list-screens`
`name`	`string` (1–100 tecken)	Nytt skärmnamn. Inledande och avslutande blanksteg tas bort

Utdata: { screenId, name }.

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

`delete-screen`

Ta bort en skärm permanent från en fil. name du skickar in kontrolleras mot skärmens aktuella visningsnamn. Om det inte stämmer avbryts borttagningen. Agenter instrueras att bekräfta med dig först. Indata

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Fil-ID
`screenId`	`uuid`	Skärmen som ska tas bort
`name`	`string`	Skärmens aktuella visningsnamn. Måste stämma, annars avbryts borttagningen

Utdata: { "deleted": true }

Bilder i JSX

add-screen-jsx och replace-screen-jsx accepterar bilder i ett img-src, eller som bakgrund i className med bg-[url(...)]. Skriv alt-text och anpassa storleken på varje bild efter dess syfte. Så här placerar du en egen bild:

Ladda upp den med upload-attachment i läge A (mimeType + fileName) och kör det returnerade uploadCommand.
Om svarets type är "image" klistrar du in dess assetUrl exakt som den returnerades i img src eller bg-[url(assetUrl)].

Lämna alla andra bild-URL:er exakt som get-screen-jsx returnerade dem. Lägg inte path, signedUrl eller uploadCommand i src.

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

Skärmfältens värden

get-screen-jsx returnerar, och add-screen-jsx och replace-screen-jsx accepterar, dessa värden:

Fält	Värden
`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`

Verktyg för designriktlinjer

Designriktlinjer är DESIGN.md-text som lagras på en fil. När de är satta injiceras de i varje AI-generering för den filen. Se Designriktlinjer.

`get-design-guidelines`

Hämta designriktlinjerna som är kopplade till en fil. Indata

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Fil-ID

Utdata: { guidelines }.

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

guidelines är null om inga riktlinjer har satts.

`update-design-guidelines`

Sätt eller ersätt designriktlinjerna för en fil. Skicka riktlinjerna som en vanlig sträng i Googles DESIGN.md-format, inte som ett objekt eller JSON. Om du läser från en fil skickar du den filens text. Indata

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Fil-ID
`designGuidelines`	`string` (minst 1)	Råtexten i riktlinjerna. Måste vara en vanlig sträng, inte JSON-kodad

Valideringsregler

Frontmatter måste öppnas och stängas korrekt
Frontmatter-rader måste vara giltig YAML i blockstil
Markdown-brödtexten får inte innehålla dubbla ##-rubriker för sektioner

Om valideringen misslyckas returnerar anropet ett fel som börjar med Invalid design guidelines:. Utdata: { updated, warnings? }.

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

warnings listar mjuka valideringsproblem (okända nycklar, färger som inte är hex) som accepterades men som AI:n kan ignorera. Den utelämnas när det inte finns några. Visa dessa för användaren.

`delete-design-guidelines`

Rensa designriktlinjerna för en fil. Att ta bort riktlinjer som inte finns gör inget. Indata

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Fil-ID

Utdata: { "deleted": true }

Chattverktyg

`get-chat-history`

Hämta designkonversationen som är kopplad till en fil, det vill säga filens Flowstep-chatt och inte din MCP-klients konversation. Använd den för att återuppta tidigare arbete på filen. Indata

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Fil-ID

Utdata: { messages }. messages är tom när det inte finns någon designkonversation på filen. Varje meddelande har en type ("request" eller "response"), en author ("human" eller "ai") och en content_type. Svarsmeddelanden använder "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" }]
    }
  ]
}

Bilageverktyg

`upload-attachment`

Ladda upp en referensfil att använda som bilaga i ai-design-screens, eller en bild att placera i din egen JSX med add-screen-jsx eller replace-screen-jsx. ai-generate-screen-variant och ai-edit-screen-variant tar inte emot bilagor. Filbytes passerar aldrig genom modellen, och servern hämtar aldrig URL:er å dina vägnar. Om du vill referera till en webbsida tar du med dess URL i message för ai-design-screens i stället. Det finns två lägen. Använd exakt ett av dem och kombinera dem inte. Läge A: filer och bilder (mimeType + fileName) Ett obligatoriskt trestegsflöde för bilder, PDF-filer och större textfiler:

Anropa upload-attachment med endast mimeType och fileName (till exempel image/png och dog.png). Svaret är en förberedd uppladdning, inte en lagrad 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": "…"
}

Ersätt LOCAL_FILE_PATH i uploadCommand med den absoluta sökvägen till din fil och kör exakt det kommandot i din shell. Det måste avslutas med 0. Token i signedUrl godkänner endast denna enskilda uppladdning. Om du hoppar över detta steg blir lagringen tom och designverktyget misslyckas med sin förkontroll.
Skicka endast { id, path, type } i arrayen attachments för ai-design-screens, inte signedUrl, uploadCommand eller nextStep. Om du i stället vill placera en bild i din egen JSX lägger du assetUrl i img src eller bg-[url(...)] i JSX:en som du skickar till add-screen-jsx eller replace-screen-jsx. Se Bilder i JSX.

Om du vill bifoga en fjärrfil laddar du först ner den till en lokal sökväg själv (till exempel med curl) och följer sedan samma tre steg. Skicka aldrig en URL till upload-attachment.

Parameter	Typ	Beskrivning
`mimeType`	enum	Filens MIME-typ. En av `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`. Använd `text/javascript` för `.jsx`-, `.tsx`-, `.js`- och `.ts`-filer
`fileName`	`string` (minst 1)	Originalfilnamn med filändelse, till exempel `cat.png` eller `design.md`

Läge B: kort text (text + mimeType) Ladda upp text som redan finns i kontexten. Ingen shell-kommando behövs. Svaret kan användas direkt:

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

Parameter	Typ	Beskrivning
`text`	`string` (högst 64 000 tecken)	Råtext. Endast textfiler. Använd inte för bilder eller PDF-filer. Längre än 64 000 tecken? Använd läge A i stället
`mimeType`	enum	En av `text/markdown`, `text/plain`, `text/javascript`

Skicka det resulterande { id, path, type } i arrayen attachments för ai-design-screens. Maximal filstorlek är 3 MB i båda lägena, och PDF-filer är begränsade till 100 sidor. Utdata: { id, path, assetUrl, type, mimeType, signedUrl?, uploadCommand?, nextStep? }.

type: "image" för bildfiler och "document" för PDF-filer och textfiler.
assetUrl: den uppladdade filens URL, som returneras i båda lägena. Använd den i JSX för add-screen-jsx eller replace-screen-jsx endast när type är "image", och först efter att uploadCommand i läge A har körts.
signedUrl, uploadCommand, nextStep: anges endast i läge A. Skicka dem inte till designverktygen.

Figma-verktyg

`import-figma`

Importera en Figma-ram till en Flowstep-fil som redigerbara element på dess canvas. Varje import lägger till en ny skärm. Om du importerar samma ram två gånger får du två skärmar, så ta bort den gamla med delete-screen om du menade att ersätta den. Filens organisation måste ha Figma anslutet i Flowstep-inställningarna. Indata

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Flowstep-filen som ramen ska importeras till. Detta är inte Figma-filnyckeln i `figmaUrl`
`figmaUrl`	`string`	Länk till en specifik Figma-ram, med en `node-id`. I Figma högerklickar du på ramen och väljer Copy/Paste as → Copy link to selection. En länk till en sida importerar alla ramar på toppnivå på den sidan (begränsat till 20 ramar via MCP)

Utdata: { fileId, screenId, frameCount? }. screenId är den importerade skärmen. Skicka den till get-screen-image för att se resultatet. När en sid-URL importerar flera ramar är screenId null och frameCount returneras i stället. Anropa då list-screens och sedan get-screen-image för varje ny skärm.

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

Verktyg för plan och fakturering

`get-plan-details`

Hämta din organisations Flowstep-plan, prenumerationsstatus, användning och kvarvarande kvot. Tar inga indata. Organisationen fastställs utifrån den inloggade användaren. Använd det för att kontrollera din kvot innan du anropar AI-designverktygen. Utdata: { plan, subscription, limits, usage, remaining }.

Fält	Beskrivning
`plan`	`{ name, code, type }`. `type` är `"free"` eller `"paid"`
`subscription`	`{ isPaid, isTrial, startDate, endDate, trialDaysRemaining }`
`limits`	Gränser per funktion, nycklade efter funktion (till exempel `messages`). Varje har valfria objekt `daily` och `monthly` med värdena `max` och `warn`, plus en `unlimited`-flagga
`usage`	Användning per funktion hittills, som `{ daily, monthly }`
`remaining`	Kvarvarande kvot per funktion, som `{ daily, monthly }`. Utelämnas för obegränsade funktioner

Gränserna varierar mellan planerna. Se Priser och Användningsgränser.

AI-designverktyg

Dessa tre verktyg designar utifrån en beskrivning eller en förinställning. De tar aldrig emot eller återanvänder JSX. Varje anrop använder samma meddelandekvot som Flowstep-appen och blockeras tills genereringen är klar eller får timeout (180 sekunder).

Verktyg	Använd det för att
`ai-design-screens`	Generera nya skärmar, ändra befintliga skärmar på plats eller båda, utifrån en beskrivning i fritt format
`ai-generate-screen-variant`	Lägga till nästa steg, ett fel- eller tomt tillstånd eller en plattformsvariant av en befintlig skärm
`ai-edit-screen-variant`	Tillämpa en redigerings- eller omdesignförinställning på en hel befintlig skärm

Alla tre returnerar { status, fileId, screenIds, designGuidelinesUpdated }. Anropa get-screen-image en gång för varje screenId för att se resultatet.

designGuidelinesUpdated: en kort sammanfattning av ändringen när filens DESIGN.md-riktlinjer uppdaterades automatiskt under den här omgången. Annars null.

`ai-design-screens`

Generera en eller flera nya skärmar, ändra befintliga skärmar på plats, eller båda i ett anrop, utifrån en textbeskrivning. Detta gäller nya flöden, teman, text, layout eller samordnade ändringar över flera skärmar. Det är samma designagent som chatten i Flowstep-editorn. Den avgör utifrån ditt message och elementIds vad som ska byggas och vad som ska ändras. Utelämna fileId för att starta en ny fil. Skicka fileId för att arbeta i en befintlig fil. Om begäran kan gälla en fil du redan har bör din agent kontrollera list-files och list-screens först. För nästa steg, ett fel- eller tomt tillstånd eller en plattformsvariant av en skärm använder du ai-generate-screen-variant. För en förinställd redigering eller omdesign av en skärm använder du ai-edit-screen-variant. Om du redan har JSX använder du add-screen-jsx eller replace-screen-jsx i stället. Indata

Parameter	Typ	Standardvärde	Beskrivning
`fileId`	`uuid`		Målfil. Utelämna för att skapa en ny fil. Krävs när `elementIds` är satt
`message`	`string`		Beskrivning av skärmarna som ska genereras och/eller ändringarna som ska göras. När du skickar `elementIds` anger du om de ska redigeras eller användas som referens. Ta med alla webbsid-URL:er som Flowstep ska referera till här
`elementIds`	`uuid[]`	`[]`	Valfria `screenId`-värden från `list-screens` och/eller element-`data-id`-värden från `get-screen-jsx` (med `includeIds`), som ett urval i editorn. De kan redigeras på plats eller användas som visuell referens för nya skärmar. Ett `screenId` riktar sig mot hela skärmen
`attachments`	`{ id, path, type }[]` (högst 5)	`[]`	Filer från `upload-attachment`: bilder, PDF-filer, kod- eller textfiler. Bädda inte in filinnehåll i meddelandet

Exempel: redigera en skärm och lägg till en annan i ett enda anrop:

{
  "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 skärmar byggdes eller ändrades. "chat" när Flowstep svarade utan att bygga. Då innehåller reply svaret och screenIds är tom. Om din beskrivning är tvetydig bör din agent be dig förtydliga och anropa verktyget igen.
screenIds: varje skärm som byggdes eller ändrades under anropet, inklusive skärmar som redigerades på plats. Om anropet får timeout efter att vissa skärmar har byggts returnerar det dessa skärmar i stället för ett fel.

Skärmar som du ber det redigera skrivs över på plats.

`ai-generate-screen-variant`

Lägg till en ny skärm som härleds från exakt en befintlig skärm: nästa steg i flödet, ett fel- eller tomt tillstånd eller en version för en annan plattform. Originalskärmen lämnas oförändrad. För att lägga till en skärm som inte är en variant av en befintlig, till exempel en inställningsskärm, använder du ai-design-screens med ett fileId. Indata

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Målfil
`screenId`	`uuid`	Den befintliga skärmen att härleda från
`operationVariant`	enum	Obligatoriskt: hur den nya skärmen förhåller sig till den befintliga

`operationVariant`	Lägger till
`next_screen`	Nästa skärm i användarflödet
`error_state`	Ett feltillstånd för skärmen
`empty_state`	Ett tomt tillstånd för skärmen
`web_version`	En webbversion
`mobile_version`	En mobilversion
`tablet_version`	En surfplattaversion
`mobile_ios_version`	En iOS-version
`mobile_android_version`	En Android-version

Utdata: { status, fileId, screenIds, designGuidelinesUpdated }. status är alltid "generated".

`ai-edit-screen-variant`

Ändra exakt en befintlig skärm på plats med en förinställning: sätt tema eller polera den, prova en annan layout eller visuell stil, eller designa om den från grunden. För nya skärmar, instruktioner i fritt format eller en exakt redigering av enskilda element använder du ai-design-screens. Indata

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Målfil
`screenId`	`uuid`	Den befintliga skärmen att ändra
`operationVariant`	enum	Obligatoriskt: redigerings- eller omdesignförinställningen att tillämpa

`operationVariant`	Typ	Effekt
`dark_theme`	Redigering	Byt skärmen till ett mörkt tema
`light_theme`	Redigering	Byt skärmen till ett ljust tema
`make_pretty`	Redigering	Polera skärmens visuella design
`different_layout`	Omdesign	Prova en annan layout
`different_style`	Omdesign	Prova en annan visuell stil
`from_scratch`	Omdesign	Designa om skärmen från grunden

Utdata: { status, fileId, screenIds, designGuidelinesUpdated }. status är alltid "generated".

Detta skriver över skärmens innehåll på plats.

Omdöpta verktyg

Verktygsnamnen ändrades i september och oktober 2026. Om du har prompter, skript eller agentinstruktioner som använder de gamla namnen uppdaterar du dem:

Gammalt namn	Nytt namn
`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` (instruktioner i fritt format)	`ai-design-screens`
`edit-design` (med en `operationVariant`-förinställning)	`ai-edit-screen-variant`
`regenerate-design`	`ai-edit-screen-variant`
`expand-design`	`ai-generate-screen-variant`

Indata ändrades också: AI-designverktygen tar elementIds (eller ett enskilt screenId för variantverktygen) i stället för targets. add-screen-jsx tar jsx och explicita metadatafält i stället för jsxContent med en metadatakommentar. create-file tar name i stället för title. Verktygen för designriktlinjer tar fileId i stället för resourceId och linkedTo.

​Filverktyg

​list-files

​get-file

​create-file

​update-file

​delete-file

​Skärmverktyg

​list-screens

​get-screen-image

​get-screen-jsx

​add-screen-jsx

​replace-screen-jsx

​rename-screen

​delete-screen

​Bilder i JSX

​Skärmfältens värden

​Verktyg för designriktlinjer

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Chattverktyg

​get-chat-history

​Bilageverktyg

​upload-attachment

​Figma-verktyg

​import-figma

​Verktyg för plan och fakturering

​get-plan-details

​AI-designverktyg

​ai-design-screens

​ai-generate-screen-variant

​ai-edit-screen-variant

​Omdöpta verktyg

Filverktyg

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Skärmverktyg

`list-screens`

`get-screen-image`

`get-screen-jsx`

`add-screen-jsx`

`replace-screen-jsx`

`rename-screen`

`delete-screen`

Bilder i JSX

Skärmfältens värden

Verktyg för designriktlinjer

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Chattverktyg

`get-chat-history`

Bilageverktyg

`upload-attachment`

Figma-verktyg

`import-figma`

Verktyg för plan och fakturering

`get-plan-details`

AI-designverktyg

`ai-design-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

Omdöpta verktyg