Hopp til hovedinnhold
Alle verktøy returnerer en content-matrise med MCP-innholdsblokker. Tekstverktøy returnerer { type: "text", text: "<json-string>" }. Bildeverktøy returnerer { type: "image", data: "<base64>", mimeType: "image/png" }. Ved feil settes isError: true og tekstblokken inneholder feilmeldingen.

Filverktøy

list-files

List Flowstep-filer for gjeldende bruker. Inndata
ParameterTypeStandardBeskrivelse
orderByCreationbooleantrueSorter etter opprettelsesdato
limitinteger (1–100)20Antall filer som skal returneres
offsetinteger (≥0)0Paginasjonsforskyvning
Utdata — JSON-matrise med filobjekter.
[
  {
    "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

Hent en enkelt fil etter ID. Filinnholdet er med vilje utelatt — bruk get-screen eller get-screen-image for å inspisere skjermer, og get-design-guidelines for å hente tilknyttede retningslinjer. Inndata
ParameterTypeBeskrivelse
iduuidFil-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

Opprett en ny Flowstep-fil. Inndata
ParameterTypeBeskrivelse
titlestring (min 1)Filnavn
Utdata — JSON-filobjekt med den nye 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"
}
Bruk den returnerte id-en som fileId i senere verktøykall.

update-file

Gi nytt navn til en fil. Inndata
ParameterTypeBeskrivelse
iduuidFil-ID
namestring (min 1)Nytt navn
Utdata — Oppdatert filobjekt i samme 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

Slett en fil permanent. name-verdien du oppgir valideres mot filens faktiske navn før sletting — hvis den ikke stemmer, avbrytes slettingen. Dette forhindrer utilsiktet sletting av feil fil. Inndata
ParameterTypeBeskrivelse
iduuidFil-ID
namestringGjeldende navn på filen — må stemme nøyaktig eller slettingen avbrytes
Utdata"File deleted successfully"
Dette er permanent. Alle skjermer i filen slettes.

Skjermverktøy

list-screens

List alle genererte skjermer for en fil. Bruk de returnerte screenId-verdiene for å referere til skjermer i get-screen, get-screen-image, upload-attachment, og som targets i edit-design, regenerate-design eller expand-design. Inndata
ParameterTypeBeskrivelse
fileIduuidFil-ID
Utdata — JSON-matrise med skjermoppsummeringer.
[
  {
    "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 er det brukertildelte skjermnavnet, eller null hvis skjermen ikke er navngitt.

get-screen

Hent JSX-koden for en skjerm slik at du kan redigere eller bruke koden utenfor Flowstep. Bruk get-screen-image for en visuell forhåndsvisning i stedet. Inndata
ParameterTypeBeskrivelse
fileIduuidFil-ID
screenIduuidDen screenId som returneres av list-screens eller fra screenIds-matrisen som returneres av et designverktøy
Utdata — Skjermen som kode (JSX). Legg merke til kommentaren på første linje, som er påkrevd når du bruker add-screen-verktøyet.
<!-- 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

Legger til en ny skjerm i en Flowstep-fil fra en rå JSX-streng. Inndata
ParameterTypeBeskrivelse
fileIduuidFil-ID
jsxContentstringJSX som skal legges til filen som en skjerm
screenTypestringPåkrevd hvis skjermtypen ikke er definert som en kommentar i starten av JSX-en
Merk – En kommentar som ligner den nedenfor MÅ være på første linje av JSX-en fordi den brukes til å legge til skjermen korrekt. screenType, name og screenId er alle valgfrie — screenId brukes (internt) hvis den er tilstede (f.eks. når du sender JSX kopiert fra get-screen-utdata) men er ikke obligatorisk. Skjermnavnet er hentet fra kommentarens name-felt (vises som «Copy of <name>»), eller «Untitled» hvis det mangler. <!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" --> Utdata — ID-en til den nylig tillagte skjermen.
{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" }

get-screen-image

Gjengir en skjerm som PNG og returnerer den som et innebygd bilde. Krever en klient som støtter bildeinnholdsblokker. Inndata
ParameterTypeBeskrivelse
fileIduuidFil-ID
screenIduuidDen screenId som returneres av list-screens eller fra screenIds-matrisen som returneres av et designverktøy
Utdata — MCP-bildeinnholdsblokk (image/png).

AI-verktøy

regenerate-design, expand-design og edit-design krever designkontekst som bare er tilstede på skjermer som opprinnelig ble generert med en designs-matrise. Skjermer generert uten designkontekst vil returnere en feil. Løsning: bruk upload-attachment for å gjengi skjermen som et bilde, og kall deretter create-new-design med bildet i attachments og en melding som beskriver de ønskede endringene.

create-new-design

Generer ett eller flere skjermdesigner fra en tekstprompt. Utelat fileId for å opprette en ny fil automatisk. Blokkerer til genereringen er ferdig eller tidsavbruddet (180 sekunder) oppstår. Inndata
ParameterTypeStandardBeskrivelse
fileIduuidMålfil — utelat for å opprette en ny fil automatisk
messagestringPrompt som beskriver skjermene som skal genereres
attachmentsAttachmentRequestData[] (maks 5)[]Forhåndslastede vedlegg — bilder, PDF-er eller kodefiler. Last alltid opp via upload-attachment først; ikke bygg inn filinnholdet i meldingen
designsDesignRequestData[][]Designreferanser
Utdata{ fileId, screenIds }. Gi hver screenId til get-screen-image for å se resultatene.
{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"]
}

regenerate-design

Gjør eksisterende skjermer på nytt fra bunnen av eller med en stilvariant. Krever minst en screenId i targets. Blokkerer til genereringen er ferdig eller tidsavbruddet (180 sekunder) oppstår. Inndata
ParameterTypeStandardBeskrivelse
fileIduuidMålfil
messagestringPrompttekst
targetsuuid[] (min 1)screenIds for skjermer som skal genereres på nytt
operationVariant"different_layout" | "different_style" | "from_scratch"Valgfri stilvariant
designsDesignRequestData[][]Designreferanser (løses automatisk)
Utdata{ fileId, screenIds }. Gi hver screenId til get-screen-image for å se resultatene.

expand-design

Legg til oppfølgingsskjermer til et eksisterende design. Krever minst en screenId i targets og en obligatorisk operationVariant. Blokkerer til genereringen er ferdig eller tidsavbruddet (180 sekunder) oppstår. Inndata
ParameterTypeStandardBeskrivelse
fileIduuidMålfil
messagestringPrompttekst
targetsuuid[] (min 1)screenIds for skjermer som skal utvides fra
operationVariant"next_screen" | "error_state" | "empty_state" | "web_version" | "mobile_version" | "tablet_version" | "mobile_ios_version" | "mobile_android_version"Obligatorisk — type oppfølgingsskjerm som skal genereres
designsDesignRequestData[][]Designreferanser (løses automatisk)
Utdata{ fileId, screenIds }. Gi hver screenId til get-screen-image for å se resultatene.

edit-design

Endre eksisterende skjermer via en prompt. Krever minst en screenId i targets. Blokkerer til genereringen er ferdig eller tidsavbruddet (180 sekunder) oppstår. Inndata
ParameterTypeStandardBeskrivelse
fileIduuidMålfil
messagestringInstruksjoner som beskriver redigeringene som skal brukes
targetsuuid[] (min 1)screenIds for skjermer som skal redigeres
operationVariant"dark_theme" | "light_theme" | "make_pretty"Valgfri stilsnarvei
attachmentsAttachmentRequestData[] (maks 5)[]Forhåndslastede vedlegg. Last alltid opp via upload-attachment først
designsDesignRequestData[][]Designreferanser (løses automatisk)
Utdata{ fileId, screenIds }. Gi hver screenId til get-screen-image for å se resultatene.

upload-attachment

Last opp en fil som skal brukes som vedlegg i create-new-design eller edit-design. Returnerer { id, path, type, mimeType } — gi dette objektet direkte inn i attachments-matrisen. To modus: Modus 1 — Skjerm etter ID Gi screenId og fileId. Serveren henter skjermtilstanden fra databasen og gjengir den som et bilde.
ParameterTypeBeskrivelse
fileIduuidFil som inneholder skjermen (obligatorisk)
screenIduuidSkjerm som skal gjengis
Modus 2 — Ekstern fil Gi filinnholdet direkte. Binærfiler må være base64-kodet; tekstfiler (inkludert kildekode) oppgis som rene UTF-8-strenger.
ParameterTypeBeskrivelse
fileDatastringFilinnhold — base64 for binær, UTF-8-streng for tekst
fileNamestringOpprinnelig filnavn
mimeType"image/jpeg" | "image/png" | "image/webp" | "application/pdf" | "text/plain" | "text/javascript"MIME-type. Bruk text/javascript for .jsx-, .tsx-, .js- og .ts-filer
Maksimal filstørrelse: 3 MB. For store bilder foretrekker du image/jpeg fremfor image/png. Utdata
{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "type": "image",
  "mimeType": "image/jpeg"
}
type er "image" for bilde-/PDF-opplastinger og "document" for tekst-/kodefiler.

Chatverktøy

get-chat-history

Hent meldingshistorikken for en fil. Inndata
ParameterTypeBeskrivelse
fileIduuidFil-ID
Utdata — JSON-objekt med en messages-matrise. Hver melding har en type ("request" eller "response"), author ("human" eller "ai"), og 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": []
    }
  ]
}

Designverktøy

get-design-guidelines

Hent designretningslinjene som er lagret for en fil. Inndata
ParameterTypeStandardBeskrivelse
resourceIduuidFil-ID
linkedTo"file""file"Ressurstype
Utdata
{
  "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter",
  "linkedTo": "file"
}
guidelines er null hvis ingen retningslinjer er angitt.

update-design-guidelines

Angi eller erstatt designretningslinjene for en fil. Retningslinjer oppgis som en rein tekststreng i Googles design.md-format — ikke oppgi et objekt eller JSON. Serveren utfører myk validering og kan returnere en Warnings:-seksjon i svaret som viser problemer (ukjente nøkler, ikke-heksadesimale farger) som ble akseptert, men som kan ignoreres av AI-en. Gjør disse synlige for brukeren. Inndata
ParameterTypeStandardBeskrivelse
resourceIduuidFil-ID
designGuidelinesstring (min 1)Rå tekstinnhold i retningslinjene. Må være en ren streng — ikke JSON-kodet
linkedTo"file""file"Ressurstype
Valideringsregler
  • Frontmatter må åpnes og lukkes riktig
  • Frontmatter-linjer må være gyldig blokkstil-YAML
  • Markdown-brødteksten må ikke inneholde dupliserte ##-seksjonshoder
Utdata"Design guidelines updated successfully", eventuelt etterfulgt av en Warnings:-seksjon.

delete-design-guidelines

Fjern designretningslinjene for en fil. Inndata
ParameterTypeStandardBeskrivelse
resourceIduuidFil-ID
linkedTo"file""file"Ressurstype
Utdata"Design guidelines deleted successfully"

Faktureringsverktøy

get-plan-details

Hent den gjeldende brukerens abonnement, abonnementsstatus og gjenstående kvote. Tar ikke inndata. 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 }
  }
}
Grensene varierer etter abonnement. Kall dette verktøyet før en batch med generasjoner for å kontrollere tilgjengelig kvote.