MCP-verktygsreferens

Alla verktyg returnerar en content-matris med MCP-innehållsblock. Textverktyg returnerar { type: "text", text: "<json-string>" }. Bildverktyg returnerar { type: "image", data: "<base64>", mimeType: "image/png" }. Vid fel ställs isError: true in och textblocket innehåller felmeddelandet.

Filverktyg

`list-files`

Visa Flowstep-filer för den aktuella användaren. Input

Parameter	Typ	Standard	Beskrivning
`orderByCreation`	`boolean`	`true`	Sortera efter skapandedatum
`limit`	`integer` (1–100)	`20`	Antal filer som ska returneras
`offset`	`integer` (≥0)	`0`	Förskjutning för sidnumrering

Utdata — JSON-matris med filobjekt.

[
  {
    "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`

Hämta en enstaka fil med ID. Filinnehållet är avsiktligt utelämnat — använd get-screen eller get-screen-image för att inspektera skärmar och get-design-guidelines för att hämta bifogade riktlinjer. Input

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

Utdata — JSON-filobjekt.

{
  "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`

Skapa en ny Flowstep-fil. Input

Parameter	Typ	Beskrivning
`title`	`string` (min 1)	Filnamn

Utdata — JSON-filobjekt med den nya filens id.

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

Använd det returnerade id-värdet som fileId i senare verktygsanrop.

`update-file`

Byt namn på en fil. Input

Parameter	Typ	Beskrivning
`id`	`uuid`	Fil-ID
`name`	`string` (min 1)	Nytt namn

Utdata — Uppdaterat filobjekt i samma format som get-file.

{
  "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`

Radera en fil permanent. Det name-värde du överför verifieras mot filens faktiska namn innan borttagning — om det inte matchar avbryts borttagningen. Detta förhindrar oavsiktlig borttagning av fel fil. Input

Parameter	Typ	Beskrivning
`id`	`uuid`	Fil-ID
`name`	`string`	Filens aktuella namn — måste matcha exakt eller borttagningen avbryts

Utdata — "File deleted successfully"

Detta är oåterkalleligt. Alla skärmar i filen tas bort.

Skärmverktyg

`list-screens`

Visa alla genererade skärmar för en fil. Använd de returnerade screenId-värdena för att referera till skärmar i get-screen, get-screen-image, upload-attachment och som targets i edit-design, regenerate-design eller expand-design. Input

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

Utdata — JSON-matris med skärmsammanfattningar.

[
  {
    "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 är det användardefinierade skärmnamnet, eller null om skärmen inte har ett namn.

`get-screen`

Hämta JSX-koden för en skärm så att du kan redigera eller använda koden utanför Flowstep. Använd get-screen-image för en visuell förhandsgranskning istället. Input

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Fil-ID
`screenId`	`uuid`	Det `screenId`-värde som returnerades av `list-screens` eller från `screenIds`-matrisen som returnerades av ett designverktyg

Utdata — Skärmen som kod (JSX). Notera den första radkommentaren som krävs när du använder verktyget add-screen.

<!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" screenId: "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0" -->
<div className="bg-white text-zinc-950 w-full h-fit">
  <div className="flex p-6 flex-col gap-6">
    <div className="flex pt-4 justify-between items-center">
      <ArrowLeft className="size-5 text-[#71717b]" />
      <span className="font-semibold text-zinc-950 text-lg leading-7">
        World Clock
      </span>
      <Plus className="size-5 text-[#2b7fff]" />
    </div>
    <div className="rounded-xl bg-zinc-100 flex p-2 items-center gap-2">
      <Search className="size-4 text-[#71717b] ml-2" />
      <span className="text-[#71717b] text-sm leading-5">Search cities...</span>
    </div>
...
    <div className="flex pt-2 pb-4 justify-center items-center gap-4">
      <Button variant="outline" className="rounded-full px-6 gap-2">
        <Clock className="size-4" />
        <span>Compare</span>
      </Button>
      <Button className="rounded-full bg-[#2b7fff] text-blue-50 px-6 gap-2">
        <Bell className="size-4" />
        <span>Set Alert</span>
      </Button>
    </div>
  </div>
</div>;

`add-screen`

Lägg till en ny skärm till en Flowstep-fil från en raw JSX-sträng. Input

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Fil-ID
`jsxContent`	`string`	JSX som ska läggas till i filen som en skärm
`screenType`	`string`	Krävs om skärmtypen inte är definierad som en kommentar i början av JSX:en

Notering - En kommentar liknande den nedan MÅSTE finnas som den första raden i JSX:en eftersom den används för att lägga till skärmen korrekt. screenType, name och screenId är alla valfria — screenId används (internt) om den finns (t.ex. när JSX som kopierats från get-screen-utdata överförs) men är inte obligatorisk. Skärmnamnet hämtas från kommentarens name-fält (visas som “Copy of <name>”), eller “Untitled” om det saknas.  Utdata — Det nyligen tillagda skärm-Id:t.

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" }

`get-screen-image`

Rendera en skärm till PNG och returnera den som en infogad bild. Kräver en klient som stöder bildinnehållsblock. Input

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Fil-ID
`screenId`	`uuid`	Det `screenId`-värde som returnerades av `list-screens` eller från `screenIds`-matrisen som returnerades av ett designverktyg

Utdata — MCP-bildinnehållsblock (image/png).

AI-verktyg

regenerate-design, expand-design och edit-design kräver designkontext som endast är närvarande på skärmar som ursprungligen generades med en designs-matris. Skärmar som generades utan designkontext returnerar ett fel. Workaround: använd upload-attachment för att rendera skärmen som en bild och anropa sedan create-new-design med bilden i attachments och ett meddelande som beskriver de önskade ändringarna.

`create-new-design`

Generera en eller flera skärmdesigner från en textprompt. Utelämna fileId för att skapa en ny fil automatiskt. Blockeras tills genereringen är färdig eller når timeout (180 sekunder). Input

Parameter	Typ	Standard	Beskrivning
`fileId`	`uuid`	—	Målfil — utelämna för att skapa en ny fil automatiskt
`message`	`string`	—	Prompt som beskriver de skärmar som ska genereras
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Föruppladade bilagor — bilder, PDF-filer eller kodfiler. Ladda alltid upp via `upload-attachment` först; infoga inte filinnehål direkt i meddelandet
`designs`	`DesignRequestData[]`	`[]`	Designreferenser

Utdata — { fileId, screenIds }. Överför varje screenId till get-screen-image för att visa resultat.

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

`regenerate-design`

Gör om befintliga skärmar från början eller med en stilvariation. Kräver minst ett screenId i targets. Blockeras tills genereringen är färdig eller når timeout (180 sekunder). Input

Parameter	Typ	Standard	Beskrivning
`fileId`	`uuid`	—	Målfil
`message`	`string`	—	Prompttext
`targets`	`uuid[]` (min 1)	—	screenIds för skärmar som ska genereras om
`operationVariant`	`"different_layout" \| "different_style" \| "from_scratch"`	—	Valfri stilvariation
`designs`	`DesignRequestData[]`	`[]`	Designreferenser (löses automatiskt)

Utdata — { fileId, screenIds }. Överför varje screenId till get-screen-image för att visa resultat.

`expand-design`

Lägg till uppföljningsskärmar till en befintlig design. Kräver minst ett screenId i targets och en obligatorisk operationVariant. Blockeras tills genereringen är färdig eller når timeout (180 sekunder). Input

Parameter	Typ	Standard	Beskrivning
`fileId`	`uuid`	—	Målfil
`message`	`string`	—	Prompttext
`targets`	`uuid[]` (min 1)	—	screenIds för skärmar som ska expanderas från
`operationVariant`	`"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"`	—	Krävs — typ av uppföljningsskärm som ska genereras
`designs`	`DesignRequestData[]`	`[]`	Designreferenser (löses automatiskt)

Utdata — { fileId, screenIds }. Överför varje screenId till get-screen-image för att visa resultat.

`edit-design`

Ändra befintliga skärmar via en prompt. Kräver minst ett screenId i targets. Blockeras tills genereringen är färdig eller når timeout (180 sekunder). Input

Parameter	Typ	Standard	Beskrivning
`fileId`	`uuid`	—	Målfil
`message`	`string`	—	Instruktioner som beskriver de ändringar som ska tillämpas
`targets`	`uuid[]` (min 1)	—	screenIds för skärmar som ska redigeras
`operationVariant`	`"dark_theme" \| "light_theme" \| "make_pretty"`	—	Valfri stilgenväg
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Föruppladade bilagor. Ladda alltid upp via `upload-attachment` först
`designs`	`DesignRequestData[]`	`[]`	Designreferenser (löses automatiskt)

Utdata — { fileId, screenIds }. Överför varje screenId till get-screen-image för att visa resultat.

`upload-attachment`

Ladda upp en fil som ska användas som bilaga i create-new-design eller edit-design. Returnerar { id, path, type, mimeType } — överför detta objekt direkt till attachments-matrisen. Två lägen: Läge 1 — Skärm efter ID Överför screenId och fileId. Servern hämtar skärmtillståndet från databasen och renderar det som en bild.

Parameter	Typ	Beskrivning
`fileId`	`uuid`	Fil som innehåller skärmen (krävs)
`screenId`	`uuid`	Skärm som ska renderas

Läge 2 — Extern fil Överför filinnehål direkt. Binära filer måste vara base64-kodade; textfiler (inklusive källkod) överförs som vanliga UTF-8-strängar.

Parameter	Typ	Beskrivning
`fileData`	`string`	Filinnehåll — base64 för binärt, UTF-8-sträng för text
`fileName`	`string`	Ursprungligt filnamn
`mimeType`	`"image/jpeg" \| "image/png" \| "image/webp" \| "application/pdf" \| "text/plain" \| "text/javascript"`	MIME-typ. Använd `text/javascript` för `.jsx`, `.tsx`, `.js`, `.ts`-filer

Största filstorlek: 3 MB. För stora bilder föredrar du image/jpeg framför image/png. Utdata

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "type": "image",
  "mimeType": "image/jpeg"
}

type är "image" för bild/PDF-uppladdningar och "document" för text/kodfiler.

Chattverktyg

`get-chat-history`

Hämta meddelandehistoriken för en fil. Input

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

Utdata — JSON-objekt med en messages-matris. Varje meddelande har en type ("request" eller "response"), author ("human" eller "ai") och content_type ("text", "summary" eller "followup").

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

Designverktyg

`get-design-guidelines`

Hämta designriktlinjerna som lagrats för en fil. Input

Parameter	Typ	Standard	Beskrivning
`resourceId`	`uuid`	—	Fil-ID
`linkedTo`	`"file"`	`"file"`	Resurstyp

Utdata

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

guidelines är null om inga riktlinjer har angetts.

`update-design-guidelines`

Ange eller ersätt designriktlinjerna för en fil. Riktlinjer överförs som en vanlig textsträng i Google:s design.md-format — överför inte ett objekt eller JSON. Servern utför mjuk validering och kan returnera en Warnings:-sektion i svaret som visar problem (okända nycklar, icke-hex-färger) som accepterades men som kan ignoreras av AI:n. Presentera dessa för användaren. Input

Parameter	Typ	Standard	Beskrivning
`resourceId`	`uuid`	—	Fil-ID
`designGuidelines`	`string` (min 1)	—	Råtextinnehål för riktlinjerna. Måste vara en vanlig sträng — inte JSON-kodad
`linkedTo`	`"file"`	`"file"`	Resurstyp

Valideringsregler

Frontmatter måste öppnas och stängas korrekt
Frontmatter-rader måste vara giltigt block-stil YAML
Markdown-brödtexten får inte innehålla dubblerade ##-avsnittsrubriker

Utdata — "Design guidelines updated successfully", eventuellt följt av en Warnings:-sektion.

`delete-design-guidelines`

Rensa designriktlinjerna för en fil. Input

Parameter	Typ	Standard	Beskrivning
`resourceId`	`uuid`	—	Fil-ID
`linkedTo`	`"file"`	`"file"`	Resurstyp

Utdata — "Design guidelines deleted successfully"

Figma-verktyg

`import-figma`

Importera en Figma-ram till en Flowstep-fil som redigerbara element på arbetsytan. Omimportering av samma ram uppdaterar den på plats. Organisationen måste ha Figma anslutet i Flowstep-inställningarna. Input

Parameter	Typ	Beskrivning
`figmaUrl`	`string`	Länk till en specifik Figma-ram. I Figma högerklickar du på ramen och väljer Copy link to selection. En länk till en sida importerar alla toppramar på den sidan (begränsad till 20 ramar över MCP).
`fileId`	`uuid`	Flowstep-filen som ramen ska importeras till

Utdata — { fileId, screenId }. screenId är ID:t för det importerade skärmelementet — överför det till get-screen-image för att se resultatet. När en sid-URL importerar flera ramar är screenId null och frameCount returneras istället.

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

Faktureringsverktyg

`get-plan-details`

Hämta den aktuella användarens plan, prenumerationsstatus och återstående kvot. Kräver ingen inmatning. Utdata

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

Gränserna varierar beroende på plan. Anropa detta verktyg före en uppsättning genereringar för att kontrollera tillgänglig kvot.

Kom igång

Använda Flowstep

Team och organisationer

Export och integrationer

MCP-server

Fakturering och planer

Säkerhet och integritet

MCP-verktygsreferens

Filverktyg

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Skärmverktyg

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

AI-verktyg

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Chattverktyg

`get-chat-history`

Designverktyg

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Figma-verktyg

`import-figma`

Faktureringsverktyg

`get-plan-details`

​Filverktyg

​list-files

​get-file

​create-file

​update-file

​delete-file

​Skärmverktyg

​list-screens

​get-screen

​add-screen

​get-screen-image

​AI-verktyg

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

​Chattverktyg

​get-chat-history

​Designverktyg

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Figma-verktyg

​import-figma

​Faktureringsverktyg

​get-plan-details

Filverktyg

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Skärmverktyg

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

AI-verktyg

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Chattverktyg

`get-chat-history`

Designverktyg

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Figma-verktyg

`import-figma`

Faktureringsverktyg

`get-plan-details`