MCP-työkalujen viite

Kaikki työkalut palauttavat content-taulukon MCP-sisältölohkoista. Tekstityökalut palauttavat { type: "text", text: "<json-string>" }. Kuvityökalut palauttavat { type: "image", data: "<base64>", mimeType: "image/png" }. Epäonnistumisen tapauksessa isError: true asetetaan ja tekstilohko sisältää virhesanoman.

Tiedostotyökalut

`list-files`

Luetella nykyisen käyttäjän Flowstep-tiedostot. Syöte

Parametri	Tyyppi	Oletus	Kuvaus
`orderByCreation`	`boolean`	`true`	Järjestä luomispäivämäärän mukaan
`limit`	`integer` (1–100)	`20`	Palautettavien tiedostojen lukumäärä
`offset`	`integer` (≥0)	`0`	Sivutuksen siirtymä

Tulos — JSON-taulukko tiedostoobjekteista.

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

Hae yksittäinen tiedosto tunnuksen perusteella. Tiedoston sisältöä ei sisällytetä tarkoituksella — käytä get-screen tai get-screen-image näyttöjen tarkasteluun ja get-design-guidelines liitettyjen ohjeiden noutamiseen. Syöte

Parametri	Tyyppi	Kuvaus
`id`	`uuid`	Tiedoston tunnus

Tulos — JSON-tiedostoobjekti.

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

Luo uusi Flowstep-tiedosto. Syöte

Parametri	Tyyppi	Kuvaus
`title`	`string` (min 1)	Tiedoston nimi

Tulos — JSON-tiedostoobjekti, jossa uuden tiedoston 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"
}

Käytä palautettua id:tä fileId:nä myöhemmissä työkaluissa.

`update-file`

Nimeä tiedosto uudelleen. Syöte

Parametri	Tyyppi	Kuvaus
`id`	`uuid`	Tiedoston tunnus
`name`	`string` (min 1)	Uusi nimi

Tulos — Päivitetty tiedostoobjekti samassa muodossa kuin 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`

Poista tiedosto pysyvästi. Välitämäsi name varmistetaan tiedoston varsinaista nimeä vastaan ennen poistamista — jos ne eivät vastaa, poistaminen peruutetaan. Tämä estää väärän tiedoston vahingossa poistamisen. Syöte

Parametri	Tyyppi	Kuvaus
`id`	`uuid`	Tiedoston tunnus
`name`	`string`	Tiedoston nykyinen nimi — on vastattava tarkasti tai poistaminen peruutetaan

Tulos — "File deleted successfully"

Tämä on peruuttamaton. Kaikki tiedoston näytöt poistetaan.

Näyttötyökalut

`list-screens`

Luetella kaikki tiedoston luodut näytöt. Käytä palautettuja screenId-arvoja näyttöjen viittaamiseen get-screen, get-screen-image, upload-attachment sekä kohteina edit-design, regenerate-design tai expand-design komentoon. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus

Tulos — JSON-taulukko näyttöjen yhteenvedoista.

[
  {
    "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 on käyttäjän antama näyttönimi, tai null jos nimetön.

`get-screen`

Hae näytön JSX-koodi, jotta voit muokata tai käyttää koodia Flowstepin ulkopuolella. Käytä get-screen-image:ää visuaalisen esikatselun saamiseksi sen sijaan. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus
`screenId`	`uuid`	`screenId`, jonka `list-screens` palauttaa tai suunnittelutyökalun palauttamasta `screenIds`-taulukosta

Tulos — Näyttö koodina (JSX). Huomaa ensimmäisen rivin kommentti, joka vaaditaan käytettäessä add-screen-työkalua.

<!-- 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`

Lisää uusi näyttö Flowstep-tiedostoon raaasta JSX-merkkijonosta. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus
`jsxContent`	`string`	JSX tiedostoon lisättäväksi näytöksi
`screenType`	`string`	Vaaditaan, jos näyttötyyppiä ei määritetä kommentissa JSX:n alussa

Huomaa - Kommentti, joka muistuttaa alla olevaa, TÄYTYY olla JSX:n ensimmäisellä rivillä, koska se käytetään näytön lisäämiseen oikein. screenType, name ja screenId ovat kaikki valinnaisia — screenId käytetään (sisäisesti) jos se on läsnä (esim. JSX:n kopioidessa get-screen-tuloksesta), mutta ei ole pakollinen. Näyttönimi otetaan kommentin name-kentästä (näytetään “Copy of <name>”), tai “Untitled”, jos puuttuu.  Tulos — Äskettäin lisätyn näytön tunnus.

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

`get-screen-image`

Kääntää näytön PNG-kuvaksi ja palauttaa sen inline-kuvana. Vaatii asiakkaan, joka tukee kuvasisältölohkoja. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus
`screenId`	`uuid`	`screenId`, jonka `list-screens` palauttaa tai suunnittelutyökalun palauttamasta `screenIds`-taulukosta

Tulos — MCP-kuvasisältölohko (image/png).

Tekoälytyökalut

regenerate-design, expand-design ja edit-design vaativat suunnittelukontekstia, joka on vain näytöissä, jotka luotiin alun perin designs-taulukolla. Ilman suunnittelukontekstia luodut näytöt palauttavat virheen. Kiertotapa: käytä upload-attachment:ia näytön kääntämiseksi kuvaksi, sitten kutsu create-new-design kuvalla attachments-taulukossa ja viestillä, joka kuvaa halutut muutokset.

`create-new-design`

Luo yksi tai useampi näyttösuunnitelma tekstikehottesta. Jätä fileId pois luodaksesi uusi tiedosto automaattisesti. Lukkoastuu, kunnes luominen valmistuu tai aikakatkaistuu (180 sekuntia). Syöte

Parametri	Tyyppi	Oletus	Kuvaus
`fileId`	`uuid`	—	Kohdtiedosto — jätä pois automaattisen tiedoston luomiseen
`message`	`string`	—	Kehote, joka kuvaa luotavia näyttöjä
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Ennalta ladatut liitteet — kuvat, PDF:t tai koodi. Aina ladattava `upload-attachment` kautta; älä sisällytä tiedoston sisältöä viestiin
`designs`	`DesignRequestData[]`	`[]`	Suunnitteluviitteet

Tulos — { fileId, screenIds }. Välitä jokainen screenId get-screen-image komentoon tulosten näyttämiseksi.

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

`regenerate-design`

Tee olemassa olevat näytöt uudelleen alusta tai tyylien vaihtelulla. Vaatii vähintään yhden screenId:n targets:ssa. Lukkoastuu, kunnes luominen valmistuu tai aikakatkaistuu (180 sekuntia). Syöte

Parametri	Tyyppi	Oletus	Kuvaus
`fileId`	`uuid`	—	Kohdtiedosto
`message`	`string`	—	Kehote-teksti
`targets`	`uuid[]` (min 1)	—	Uudelleenluotavien näyttöjen screenId:t
`operationVariant`	`"different_layout" \| "different_style" \| "from_scratch"`	—	Valinnainen tyylien vaihtelu
`designs`	`DesignRequestData[]`	`[]`	Suunnitteluviitteet (ratkaistu automaattisesti)

Tulos — { fileId, screenIds }. Välitä jokainen screenId get-screen-image komentoon tulosten näyttämiseksi.

`expand-design`

Lisää seuraavat näytöt olemassa olevaan suunnitteluun. Vaatii vähintään yhden screenId:n targets:ssa ja pakollisen operationVariant:n. Lukkoastuu, kunnes luominen valmistuu tai aikakatkaistuu (180 sekuntia). Syöte

Parametri	Tyyppi	Oletus	Kuvaus
`fileId`	`uuid`	—	Kohdtiedosto
`message`	`string`	—	Kehote-teksti
`targets`	`uuid[]` (min 1)	—	Laajennettavien näyttöjen screenId:t
`operationVariant`	`"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"`	—	Pakollinen — luotavan seuraavan näytön tyyppi
`designs`	`DesignRequestData[]`	`[]`	Suunnitteluviitteet (ratkaistu automaattisesti)

Tulos — { fileId, screenIds }. Välitä jokainen screenId get-screen-image komentoon tulosten näyttämiseksi.

`edit-design`

Muokkaa olemassa olevia näyttöjä kehotteiden kautta. Vaatii vähintään yhden screenId:n targets:ssa. Lukkoastuu, kunnes luominen valmistuu tai aikakatkaistuu (180 sekuntia). Syöte

Parametri	Tyyppi	Oletus	Kuvaus
`fileId`	`uuid`	—	Kohdtiedosto
`message`	`string`	—	Ohjeet kuvaten sovellettavia muokkauksia
`targets`	`uuid[]` (min 1)	—	Muokattavien näyttöjen screenId:t
`operationVariant`	`"dark_theme" \| "light_theme" \| "make_pretty"`	—	Valinnainen tyylien pikanappi
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Ennalta ladatut liitteet. Aina ladattava `upload-attachment` kautta
`designs`	`DesignRequestData[]`	`[]`	Suunnitteluviitteet (ratkaistu automaattisesti)

Tulos — { fileId, screenIds }. Välitä jokainen screenId get-screen-image komentoon tulosten näyttämiseksi.

`upload-attachment`

Lataa tiedosto käytettäväksi liitteenä create-new-design tai edit-design komennossa. Palauttaa { id, path, type, mimeType } — välitä tämä objekti suoraan attachments-taulukoon. Kaksi tilaa: Tila 1 — Näyttö tunnuksella Välitä screenId ja fileId. Palvelin noutaa näytön tilan tietokannasta ja kääntää sen kuvaksi.

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Näyttöä sisältävä tiedosto (pakollinen)
`screenId`	`uuid`	Käännettävä näyttö

Tila 2 — Ulkoinen tiedosto Välitä tiedoston sisältö suoraan. Binaaritiedostot on koodattava base64-muodossa; teksti-tiedostot (myös lähdekodi) välitetään tavallisina UTF-8-merkkijonoina.

Parametri	Tyyppi	Kuvaus
`fileData`	`string`	Tiedoston sisältö — base64 binaarille, UTF-8-merkkijono tekstille
`fileName`	`string`	Alkuperäinen tiedostonimi
`mimeType`	`"image/jpeg" \| "image/png" \| "image/webp" \| "application/pdf" \| "text/plain" \| "text/javascript"`	MIME-tyyppi. Käytä `text/javascript` `.jsx`, `.tsx`, `.js`, `.ts` tiedostoille

Suurin tiedostokoko: 3 MB. Suurille kuvile etusija image/jpeg yli image/png. Tulos

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

type on "image" kuva/PDF-latauksia varten ja "document" teksti/koodi-tiedostoille.

Keskustelutyökalut

`get-chat-history`

Hae tiedoston keskusteluviestihistoria. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus

Tulos — JSON-objekti, jossa messages-taulukko. Jokaisella viestillä on type ("request" tai "response"), author ("human" tai "ai") ja content_type ("text", "summary" tai "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": []
    }
  ]
}

Suunnittelutyökalut

`get-design-guidelines`

Hae tiedostolle tallennetut suunnitteluohjeet. Syöte

Parametri	Tyyppi	Oletus	Kuvaus
`resourceId`	`uuid`	—	Tiedoston tunnus
`linkedTo`	`"file"`	`"file"`	Resurssin tyyppi

Tulos

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

guidelines on null, jos ohjeet eivät ole asettuja.

`update-design-guidelines`

Aseta tai korvaa tiedoston suunnitteluohjeet. Ohjeet välitetään tavallisena tekstimerkkijonona Googlen design.md-muodossa — älä välitä objektia tai JSON:ää. Palvelin suorittaa pehmeän validoinnin ja voi palauttaa vastauksen Warnings:-osion, jossa luetellaan ongelmat (tuntematon avain, ei-hex värit), jotka hyväksyttiin mutta saatetaan ohittaa tekoälyn toimesta. Pinta näiden käyttäjälle. Syöte

Parametri	Tyyppi	Oletus	Kuvaus
`resourceId`	`uuid`	—	Tiedoston tunnus
`designGuidelines`	`string` (min 1)	—	Ohjeiden raaka teksti. Täytyy olla tavallinen merkkijono — ei JSON-koodattu
`linkedTo`	`"file"`	`"file"`	Resurssin tyyppi

Validointisäännöt

Edessä täytyy avata ja sulkea oikein
Esiosan rivit täytyy olla kelvollista block-style YAML
Markdown-rungon ei saa sisältää kaksoiskappaleita ## osio-otsikosta

Tulos — "Design guidelines updated successfully", valinnaisia seuraa Warnings:-osio.

`delete-design-guidelines`

Poista tiedoston suunnitteluohjeet. Syöte

Parametri	Tyyppi	Oletus	Kuvaus
`resourceId`	`uuid`	—	Tiedoston tunnus
`linkedTo`	`"file"`	`"file"`	Resurssin tyyppi

Tulos — "Design guidelines deleted successfully"

Figma-työkalut

`import-figma`

Tuo Figman kehys Flowstep-tiedostoon muokattaviksi elementeiksi sen kanvaasille. Saman kehyksen uudelleentuominen päivittää sen paikoillaan. Tiedoston organisaatiolla täytyy olla Figma yhdistettynä Flowstepin asetuksissa. Syöte

Parametri	Tyyppi	Kuvaus
`figmaUrl`	`string`	Linkki tiettyyn Figman kehykseen. Figmassa napsauta kehystä hiiren kakkospainikkeella ja valitse Copy link to selection. Linkkiyhteys sivuun tuo kaikki sen ylätason kehykset (rajoitettu 20 kehykseen MCP:ssa).
`fileId`	`uuid`	Flowstep-tiedosto, johon kehys tuodaan

Tulos — { fileId, screenId }. screenId on tuodun näyttöelementin tunnus — välitä se get-screen-image komentoon tuloksen näyttämiseksi. Kun sivun URL tuo useita kehyksiä, screenId on null ja frameCount palautetaan sen sijaan.

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

Laskutustyökalut

`get-plan-details`

Hae nykyisen käyttäjän paketti, tilauksen tila ja jäljellä oleva kiintiö. Ei ota syötettä. Tulos

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

Rajat vaihtelevat paketin mukaan. Kutsu tämä työkalu ennen luontikerran tarkistusta käytettävissä olevan kiintiön tarkistamiseksi.

Aloittaminen

Flowstepin käyttö

Tiimit ja organisaatiot

Vienti ja integraatiot

MCP-palvelin

Laskutus ja tilaukset

Turvallisuus ja tietosuoja

MCP-työkalujen viite

Tiedostotyökalut

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Näyttötyökalut

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Tekoälytyökalut

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Keskustelutyökalut

`get-chat-history`

Suunnittelutyökalut

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Figma-työkalut

`import-figma`

Laskutustyökalut

`get-plan-details`

​Tiedostotyökalut

​list-files

​get-file

​create-file

​update-file

​delete-file

​Näyttötyökalut

​list-screens

​get-screen

​add-screen

​get-screen-image

​Tekoälytyökalut

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

​Keskustelutyökalut

​get-chat-history

​Suunnittelutyökalut

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Figma-työkalut

​import-figma

​Laskutustyökalut

​get-plan-details

Tiedostotyökalut

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Näyttötyökalut

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Tekoälytyökalut

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Keskustelutyökalut

`get-chat-history`

Suunnittelutyökalut

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Figma-työkalut

`import-figma`

Laskutustyökalut

`get-plan-details`