MCP-työkaluviite

Onnistuneen kutsun jälkeen kaikki muut työkalut paitsi get-screen-image palauttavat tuloksensa kahdesti: structuredContent-kenttänä (validoitu työkalun julkaistua tulosskeemaa vastaan) ja samana objektina sarjallistettuna tekstilohkoon { type: "text", text: "<json-string>" }. Jälkimmäinen on tarkoitettu asiakkaille, jotka eivät lue rakenteellista sisältöä. get-screen-image palauttaa vain MCP-kuvalohkon: { type: "image", data: "<base64>", mimeType: "image/png" }. Epäonnistuessa isError: true asetetaan ja tekstilohko sisältää lyhyen virheviestin. Virheet, joihin voit reagoida, kuten nimivirhe poistossa, virheellinen Figma-linkki, virheelliset suunnitteluohjeet, liitteeseen liittyvä ongelma tai generoinnin aikakatkaisu, kertovat, mitä korjata. Muut virheet palauttavat yleisen viestin, kuten Failed to list files.

Hinnoittelu: kolme tekoälysuunnittelutyökalua (ai-design-screens, ai-generate-screen-variant ja ai-edit-screen-variant) käyttävät samaa viestikiintiötä kuin Flowstep-sovellus. Kaikki muut työkalut ovat veloituksettomia. Katso Käyttörajat.

Jokainen työkalu julkaisee myös MCP-merkinnät, jotta asiakkaasi tietää, mitä se tekee. delete-file, delete-screen, delete-design-guidelines, replace-screen-jsx, ai-design-screens ja ai-edit-screen-variant on merkitty tuhoaviksi, koska ne poistavat tai korvaavat olemassa olevaa sisältöä.

Tiedostotyökalut

`list-files`

Listaa Flowstep-tiedostojesi metatiedot. Kutsu tämä ensin tarkistaaksesi, onko olemassa oleva sopiva tiedosto. Se ei palauta näyttösisältöä. Käytä siihen get-screen-image- tai get-screen-jsx-työkalua. Syöte

Parametri	Tyyppi	Oletus	Kuvaus
`orderByCreation`	`boolean`	`true`	Lajittele uusimmat ensin `created_at`-kentän mukaan (`true`) tai `updated_at`-kentän mukaan (`false`). Käytä `false`-arvoa löytääksesi äskettäin muokatut tiedostot
`limit`	`integer` (1–100)	`20`	Palautettavien tiedostojen enimmäismäärä. Täysi sivu voi tarkoittaa, että tiedostoja on enemmän
`offset`	`integer` (≥0)	`0`	Ohitettavien tiedostojen määrä. Seuraava sivu on `offset + limit`

Tulos: { 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, jos loit tiedoston.
shared_with_me: true, jos tiedosto jaettiin kanssasi suoraan eikä vain organisaatiosi kautta.
url: avaa tiedoston Flowstep-editorissa.

`get-file`

Hae yhden tiedoston metatiedot. Tiedoston sisältöä ei ole tarkoituksella mukana. Tarkista näytöt get-screen-image- tai get-screen-jsx-työkalulla ja hae liitetyt ohjeet get-design-guidelines-työkalulla. Jos sinulla on odottava kutsu tiedostoon, get-file-kutsu hyväksyy sen. Syöte

Parametri	Tyyppi	Kuvaus
`id`	`uuid`	Tiedoston tunnus

Tulos: { 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 tai write.
visibility: private, member tai public.
user_access_level: käyttöoikeutesi tiedostoon, read tai write.

`create-file`

Luo tyhjä Flowstep-tiedosto ilman näyttöjä. Jos haluat luoda tiedoston ja generoida näytöt yhdessä vaiheessa, kutsu sen sijaan ai-design-screens-työkalua ilman fileId:tä. Käytä create-file-työkalua koodi edellä -työnkuluissa, joita seuraa add-screen-jsx. Syöte

Parametri	Tyyppi	Kuvaus
`name`	`string` (min 1)	Uuden tiedoston näyttönimi

Tulos: { file, user_access_level }, samassa muodossa kuin get-file. owner on aina true ja user_access_level aina write. Käytä palautettua file.id-arvoa fileId:nä seuraavissa työkalukutsuissa.

`update-file`

Nimeä tiedosto uudelleen. Syöte

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

Tulos: { file, user_access_level }, samassa muodossa kuin get-file.

`delete-file`

Poista tiedosto pysyvästi. Antamaasi name-arvoa verrataan tiedoston nykyiseen näyttönimeen ennen poistoa. Jos se ei täsmää, poisto keskeytetään. Tämä estää vahingossa väärän tiedoston poistamisen. Agentteja ohjeistetaan vahvistamaan asia ensin kanssasi. Syöte

Parametri	Tyyppi	Kuvaus
`id`	`uuid`	Tiedoston tunnus
`name`	`string`	Tiedoston nykyinen näyttönimi. Täsmättävä, muuten poisto keskeytetään

Tulos: { "deleted": true }

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

Näyttötyökalut

`list-screens`

Listaa tiedoston näytöt piirtojärjestyksessä. Kutsu tämä list-files-työkalun jälkeen nähdäksesi, mitä tiedostossa jo on. Käytä palautettuja screenId-arvoja muiden näyttötyökalujen ja tekoälysuunnittelutyökalujen kanssa. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus

Tulos: { 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: näytön viimeisin generointikehote, tai tyhjä merkkijono, jos sitä ei ole koskaan generoitu (esimerkiksi add-screen-jsx-työkalulla lisätty näyttö).
fidelity: lofi, hifi tai ui.

`get-screen-image`

Renderöi näyttö PNG-muotoon ja palauta se upotettuna kuvana. Vaatii asiakkaan, joka tukee kuvalohkoja. Kutsu sitä kerran jokaiselle screenId:lle, jonka tekoälysuunnittelutyökalu, add-screen-jsx, replace-screen-jsx tai import-figma palauttaa. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus
`screenId`	`uuid`	`screenId` `list-screens`-työkalusta tai suunnittelutyökalun palauttamasta `screenIds`-taulukosta

Tulos: MCP-kuvasisältölohko (image/png). data on PNG-tavujen tavallinen base64-koodaus, ei data-URI. Tälle työkalulle ei ole structuredContent-kenttää.

`get-screen-jsx`

Hae näyttö JSX-muodossa ja sen metatiedot. Voit rakentaa siitä koodipohjassasi tai muokata sitä ja kirjoittaa takaisin replace-screen-jsx-työkalulla. Käytä get-screen-image-työkalua visuaaliseen esikatseluun. Syöte

Parametri	Tyyppi	Oletus	Kuvaus
`fileId`	`uuid`	—	Tiedoston tunnus
`screenId`	`uuid`	—	`screenId` `list-screens`-työkalusta tai suunnittelutyökalun palauttamasta `screenIds`-taulukosta
`includeIds`	`boolean`	`false`	Sisällytä `data-id`-attribuutti elementeille `jsx`-kentässä. Käytä sitä, kun tarvitset elementtien tunnuksia `elementIds`-kenttään välitettäväksi `ai-design-screens`-työkalulle, joko muokattavaksi paikallaan tai visuaaliseksi viitteeksi

Tulos: { 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: pelkkä merkintä. data-id-attribuutit sisältyvät vain, kun includeIds on true.
prompt: viimeisin generointikehote, tai tyhjä merkkijono, jos näyttöä ei ole koskaan generoitu.
fragments: näytölle tallennettu yhteinen rakenne, kuten navigointipalkki, ylätunniste tai logo, { purpose, markup }-objekteina. Tyhjä, jos sellaista ei ole. Välitä ne takaisin replace-screen-jsx-työkalulle säilyttääksesi tai päivittääksesi ne.

Katso Näytön kenttien arvot fidelity-, screenType- ja colorTheme-arvoista.

`add-screen-jsx`

Lisää uusi näyttö tiedostoon itse kirjoitetusta JSX:stä. Tämä on koodi edellä -polku, ja se on veloitukseton. Käytä ai-design-screens-työkalua, kun haluat Flowstepin tekoälyn suunnittelevan näytön. add-screen-jsx luo aina uuden näytön. Jos haluat korvata olemassa olevan, käytä replace-screen-jsx-työkalua. Kuvan lisäämisestä ladattuun kuvaan katso Kuvat JSX:ssä. Kun uusi näyttö perustuu olemassa olevaan, aloita hakemalla get-screen-jsx (ilman includeIds-parametria) arvoille name, fidelity, screenType, colorTheme ja jsx, ja muuta sitten sitä, mikä eroaa. Syöte

Parametri	Tyyppi	Oletus	Kuvaus
`fileId`	`uuid`	—	Tiedoston tunnus
`name`	`string` (1–100 merkkiä)	—	Valinnainen näyttönimi. Jätä pois, jolloin näyttö nimetään automaattisesti `Screen N`
`fidelity`	`string`	`"ui"`	Näytön tarkkuustaso
`screenType`	`string`	—	Pakollinen: laite tai näkymäalue, jota varten näyttö on suunniteltu
`colorTheme`	`string`	`"default"`	Väriteema
`jsx`	`string`	—	Pelkkä JSX-merkintä. Kaikki `data-id`-attribuutit jätetään huomiotta, ja uudelle näytölle luodaan uudet elementtitunnukset

Tulos: { fileId, screenId }. Kutsu get-screen-image screenId:llä nähdäksesi tuloksen.

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

`replace-screen-jsx`

Korvaa olemassa oleva näyttö itse kirjoitetulla JSX:llä. Näyttö säilyttää screenId:nsä ja paikkansa piirtoalustalla, ja sisäkkäiset elementit saavat uudet tunnukset. Tämä on koodi edellä -polku, ja se on veloitukseton. Käytä ai-design-screens- tai ai-edit-screen-variant-työkalua tekoälyn tekemiin muutoksiin ja add-screen-jsx-työkalua uuden näytön luomiseen. Aloita hakemalla get-screen-jsx (ilman includeIds-parametria) ja muuta sitten sitä, mikä eroaa. Kuvan lisäämisestä ladattuun kuvaan katso Kuvat JSX:ssä. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus
`screenId`	`uuid`	Korvattava näyttö
`jsx`	`string`	Pelkkä JSX-merkintä. Kaikki `data-id`-attribuutit jätetään huomiotta
`name`	`string` (1–100 merkkiä)	Valinnainen. Jätä pois säilyttääksesi nykyisen nimen
`fidelity`	`string`	Valinnainen. Jätä pois säilyttääksesi nykyisen tarkkuustason
`screenType`	`string`	Valinnainen. Jätä pois säilyttääksesi nykyisen näyttötyypin
`colorTheme`	`string`	Valinnainen. Jätä pois säilyttääksesi nykyisen väriteeman
`fragments`	`{ purpose, markup }[]`	Valinnainen yhteinen rakenne `get-screen-jsx`-työkalusta. Jätä pois säilyttääksesi nykyiset fragmentit, tai anna `[]` tyhjentääksesi ne

Tulos: { fileId, screenId }. Kutsu get-screen-image screenId:llä nähdäksesi tuloksen.

Tämä korvaa näytön sisällön paikallaan.

`rename-screen`

Nimeä näytön piirtoalustan tunniste uudelleen. Tämä on nimi, joka näkyy list-screens-työkalun tuloksessa ja editorissa. Muutos koskee vain tunnistetta, ei näytön asettelua, kokoa tai sisältöä. Niihin käytä ai-design-screens-työkalua. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus
`screenId`	`uuid`	`list-screens`-työkalun palauttama `screenId`
`name`	`string` (1–100 merkkiä)	Uusi näytön nimi. Alku- ja loppuvälilyönnit poistetaan

Tulos: { screenId, name }.

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

`delete-screen`

Poista näyttö pysyvästi tiedostosta. Antamaasi name-arvoa verrataan näytön nykyiseen näyttönimeen. Jos se ei täsmää, poisto keskeytetään. Agentteja ohjeistetaan vahvistamaan asia ensin kanssasi. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus
`screenId`	`uuid`	Poistettava näyttö
`name`	`string`	Näytön nykyinen näyttönimi. Täsmättävä, muuten poisto keskeytetään

Tulos: { "deleted": true }

Kuvat JSX:ssä

add-screen-jsx ja replace-screen-jsx hyväksyvät kuvia img-elementin src-attribuutissa tai taustana className-kentässä bg-[url(...)]-muodossa. Kirjoita alt-teksti ja mitoita jokainen kuva sen käyttötarkoituksen mukaan. Oman kuvan lisäämiseksi:

Lataa se upload-attachment-työkalulla tilassa A (mimeType + fileName) ja suorita palautettu uploadCommand.
Jos vastauksen type on "image", liitä sen assetUrl sellaisenaan img src-kenttään tai bg-[url(assetUrl)]-kenttään.

Käytä kaikkia muita kuvan URL-osoitteita täsmälleen sellaisina kuin get-screen-jsx ne palautti. Älä laita path-, signedUrl- tai uploadCommand-arvoa src-kenttään.

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

Näytön kenttien arvot

get-screen-jsx palauttaa ja add-screen-jsx sekä replace-screen-jsx hyväksyvät nämä arvot:

Kenttä	Arvot
`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`

Suunnitteluohjeiden työkalut

Suunnitteluohjeet ovat tiedostoon tallennettua DESIGN.md-tekstiä. Kun ne on asetettu, ne lisätään jokaiseen tekoälygenerointiin kyseiselle tiedostolle. Katso Suunnitteluohjeet.

`get-design-guidelines`

Hae tiedostoon liitetyt suunnitteluohjeet. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus

Tulos: { guidelines }.

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

guidelines on null, jos ohjeita ei ole asetettu.

`update-design-guidelines`

Aseta tai korvaa tiedoston suunnitteluohjeet. Anna ohjeet tavallisena merkkijonona Googlen DESIGN.md-muodossa, ei objektina tai JSON:na. Jos luet ohjeet tiedostosta, anna tiedoston teksti. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus
`designGuidelines`	`string` (min 1)	Ohjeiden raakateksti. Oltava tavallinen merkkijono, ei JSON-koodattu

Validointisäännöt

Frontmatterin on avauduttava ja suljettava oikein
Frontmatter-rivien on oltava kelvollista lohkomuotoista YAML:ia
Markdown-rungossa ei saa olla kahta samaa ##-osiotsikkoa

Jos validointi epäonnistuu, kutsu palauttaa virheen, joka alkaa Invalid design guidelines:. Tulos: { updated, warnings? }.

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

warnings listaa pehmeät validointiongelmat (tuntemattomat avaimet, ei-heksadesimaaliset värit). Ne hyväksyttiin, mutta tekoäly saattaa jättää ne huomiotta. Kenttä puuttuu, kun niitä ei ole. Kerro nämä käyttäjälle.

`delete-design-guidelines`

Tyhjennä tiedoston suunnitteluohjeet. Olemattomien ohjeiden poistaminen ei tee mitään. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus

Tulos: { "deleted": true }

Keskustelutyökalut

`get-chat-history`

Hae tiedostoon liittyvä suunnittelukeskustelu. Tämä on tiedoston Flowstep-keskustelu, ei MCP-asiakkaasi keskustelu. Käytä sitä jatkaaksesi aiempaa työtä tiedostossa. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Tiedoston tunnus

Tulos: { messages }. messages on tyhjä, jos tiedostossa ei ole suunnittelukeskustelua. Jokaisella viestillä on type ("request" tai "response"), author ("human" tai "ai") ja content_type. Vastausviestit käyttävät arvoja "text", "summary" tai "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" }]
    }
  ]
}

Liitetyökalut

`upload-attachment`

Lataa viitetiedosto käytettäväksi liitteenä ai-design-screens-työkalussa tai kuva, jonka haluat sijoittaa omaan JSX:ääsi add-screen-jsx- tai replace-screen-jsx-työkalulla. ai-generate-screen-variant ja ai-edit-screen-variant eivät ota liitteitä. Tiedostojen tavuja ei välitetä mallin kautta, eikä palvelin koskaan hae URL-osoitteita puolestasi. Jos haluat viitata verkkosivuun, sisällytä sen URL ai-design-screens-työkalun message-kenttään. Tiloja on kaksi. Käytä täsmälleen yhtä, älä yhdistele niitä. Tila A: tiedostot ja kuvat (mimeType + fileName) Pakollinen kolmivaiheinen kulku kaikille kuville, PDF-tiedostoille tai suuremmille tekstitiedostoille:

Kutsu upload-attachment vain parametreilla mimeType ja fileName (esimerkiksi image/png ja dog.png). Vastaus on valmisteltu lataus, ei tallennettu tiedosto:

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

Korvaa uploadCommand-kentän LOCAL_FILE_PATH tiedostosi absoluuttisella polulla ja suorita täsmälleen tämä komento terminaalissasi. Sen on päättyttävä koodilla 0. signedUrl-kentän tunnus valtuuttaa vain tämän yhden latauksen. Tämän vaiheen ohittaminen jättää tallennustilan tyhjäksi, ja suunnittelutyökalu epäonnistuu esitarkistuksessaan.
Välitä vain { id, path, type } ai-design-screens-työkalun attachments-taulukkoon. Älä välitä signedUrl-, uploadCommand- tai nextStep-kenttiä. Jos haluat sijoittaa kuvan omaan JSX:ääsi, aseta assetUrl add-screen-jsx- tai replace-screen-jsx-työkalulle annetun JSX:n img src- tai bg-[url(...)]-kenttään. Katso Kuvat JSX:ssä.

Jos haluat liittää etätiedoston, lataa se ensin paikallisesti (esimerkiksi curl-komennolla) ja noudata sitten samoja kolmea vaihetta. Älä koskaan anna URL-osoitetta upload-attachment-työkalulle.

Parametri	Tyyppi	Kuvaus
`mimeType`	enum	Tiedoston MIME-tyyppi. Yksi seuraavista: `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`. Käytä `text/javascript`-tyyppiä `.jsx`-, `.tsx`-, `.js`- ja `.ts`-tiedostoille
`fileName`	`string` (min 1)	Alkuperäinen tiedostonimi tunnisteineen, esimerkiksi `cat.png` tai `design.md`

Tila B: lyhyt teksti (text + mimeType) Lataa teksti, joka on jo kontekstissa. Komentoriviä ei tarvita. Vastaus on valmis käytettäväksi suoraan:

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

Parametri	Tyyppi	Kuvaus
`text`	`string` (enintään 64 000 merkkiä)	Raakateksti. Vain tekstitiedostot, älä käytä kuville tai PDF-tiedostoille. Yli 64 000 merkkiä pitkä? Käytä tilaa A
`mimeType`	enum	Yksi seuraavista: `text/markdown`, `text/plain`, `text/javascript`

Välitä tuloksena saatu { id, path, type } ai-design-screens-työkalun attachments-taulukkoon. Suurin sallittu tiedostokoko on 3 MB molemmissa tiloissa, ja PDF-tiedostot on rajoitettu 100 sivuun. Tulos: { id, path, assetUrl, type, mimeType, signedUrl?, uploadCommand?, nextStep? }.

type: "image" kuville ja "document" PDF-tiedostoille ja tekstitiedostoille.
assetUrl: ladatun tiedoston URL, joka palautetaan molemmissa tiloissa. Käytä sitä JSX:ssä add-screen-jsx- tai replace-screen-jsx-työkalulle vain, kun type on "image", ja vasta kun tilan A uploadCommand on suoritettu.
signedUrl, uploadCommand, nextStep: asetetaan vain tilassa A. Älä välitä niitä suunnittelutyökaluille.

Figma-työkalut

`import-figma`

Tuo Figma-kehys Flowstep-tiedostoon muokattavina elementteinä sen piirtoalustalle. Jokainen tuonti lisää uuden näytön. Saman kehyksen tuominen kahdesti antaa kaksi näyttöä, joten poista vanha delete-screen-työkalulla, jos aiot korvata sen. Tiedoston organisaatiossa on oltava Figma yhdistettynä Flowstep-asetuksissa. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Flowstep-tiedosto, johon kehys tuodaan. Tämä ei ole Figma-tiedoston avain `figmaUrl`-kentässä
`figmaUrl`	`string`	Linkki tiettyyn Figma-kehykseen, jossa on `node-id`. Napsauta Figmassa kehystä hiiren oikealla painikkeella ja valitse Copy/Paste as → Copy link to selection. Sivun linkki tuo kaikki sivun ylimmän tason kehykset (MCP:n kautta enintään 20 kehystä)

Tulos: { fileId, screenId, frameCount? }. screenId on tuotu näyttö, ja sen voi antaa get-screen-image-työkalulle tuloksen näkemiseksi. Kun sivun URL tuo useita kehyksiä, screenId on null ja sen sijaan palautetaan frameCount. Kutsu tällöin list-screens ja sen jälkeen get-screen-image jokaiselle uudelle näytölle.

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

Paketti- ja laskutustyökalut

`get-plan-details`

Hae organisaatiosi Flowstep-paketti, tilauksen tila, käyttö ja jäljellä oleva kiintiö. Työkalu ei ota syötettä. Organisaatio selvitetään kirjautuneesta käyttäjästä. Käytä sitä tarkistaaksesi kiintiösi ennen tekoälysuunnittelutyökalujen kutsumista. Tulos: { plan, subscription, limits, usage, remaining }.

Kenttä	Kuvaus
`plan`	`{ name, code, type }`. `type` on `"free"` tai `"paid"`
`subscription`	`{ isPaid, isTrial, startDate, endDate, trialDaysRemaining }`
`limits`	Ominaisuuskohtaiset rajat, avaimena ominaisuus (esimerkiksi `messages`). Jokaisessa on valinnaiset `daily`- ja `monthly`-objektit, joissa on `max`- ja `warn`-arvot, sekä `unlimited`-lippu
`usage`	Ominaisuuskohtainen käyttö tähän mennessä, muodossa `{ daily, monthly }`
`remaining`	Ominaisuuskohtainen jäljellä oleva kiintiö, muodossa `{ daily, monthly }`. Jätetään pois rajoittamattomista ominaisuuksista

Rajat vaihtelevat paketeittain. Katso Hinnoittelu ja Käyttörajat.

Tekoälysuunnittelutyökalut

Nämä kolme työkalua suunnittelevat kuvauksen tai esiasetuksen perusteella. Ne eivät koskaan ota vastaan tai käytä uudelleen JSX:ää. Jokainen kutsu käyttää samaa viestikiintiötä kuin Flowstep-sovellus. Kutsu odottaa, kunnes generointi valmistuu tai aikakatkaisu tapahtuu (180 sekuntia).

Työkalu	Käyttö
`ai-design-screens`	Luo uusia näyttöjä, muokkaa olemassa olevia paikallaan tai molempia kerralla vapaamuotoisesta kuvauksesta
`ai-generate-screen-variant`	Lisää yhden olemassa olevan näytön seuraava vaihe, virhe- tai tyhjä tila, tai alustakohtainen muunnelma
`ai-edit-screen-variant`	Käytä muokkaus- tai uudelleensuunnitteluesiasetusta yhteen olemassa olevaan kokonaiseen näyttöön

Kaikki kolme palauttavat { status, fileId, screenIds, designGuidelinesUpdated }. Kutsu get-screen-image kerran jokaiselle screenId:lle nähdäksesi tuloksen.

designGuidelinesUpdated: lyhyt yhteenveto muutoksesta, kun tiedoston DESIGN.md-ohjeita päivitettiin automaattisesti tämän vuoron aikana. Muuten null.

`ai-design-screens`

Luo yksi tai useampi uusi näyttö, muokkaa olemassa olevia näyttöjä paikallaan tai molempia yhdessä kutsussa tekstikuvauksesta. Kyse voi olla uusista käyttäjävirroista, teemoituksesta, tekstistä, asettelusta tai koordinoiduista muutoksista useissa näytöissä. Tämä on sama suunnitteluagentti kuin Flowstep-editorin keskustelussa. Se päättää message-kentän ja elementIds-kentän perusteella, mitä rakentaa ja mitä muuttaa. Jätä fileId pois aloittaaksesi uuden tiedoston. Anna fileId, jos haluat työskennellä olemassa olevassa tiedostossa. Jos pyyntö voisi koskea tiedostoa, jonka sinulla jo on, agenttisi tarkistaa ensin list-files- ja list-screens-työkalut. Yhden näytön seuraavaa vaihetta, virhe- tai tyhjää tilaa taikka alustakohtaista muunnelmaa varten käytä ai-generate-screen-variant-työkalua. Yhden näytön esiasetusmuokkausta tai uudelleensuunnittelua varten käytä ai-edit-screen-variant-työkalua. Jos sinulla on jo JSX, käytä add-screen-jsx- tai replace-screen-jsx-työkalua. Syöte

Parametri	Tyyppi	Oletus	Kuvaus
`fileId`	`uuid`	—	Kohdetiedosto. Jätä pois luodaksesi uuden tiedoston. Pakollinen, kun `elementIds` on asetettu
`message`	`string`	—	Kuvaus luotavista näytöistä ja/tai tehtävistä muutoksista. Kun annat `elementIds`-kentän, kerro, muokataanko niitä vai käytetäänkö visuaalisena viitteenä. Sisällytä tähän kaikki verkkosivujen URL-osoitteet, joihin haluat Flowsteppin viittaavan
`elementIds`	`uuid[]`	`[]`	Valinnaiset `screenId`:t `list-screens`-työkalusta ja/tai elementtien `data-id`:t `get-screen-jsx`-työkalusta (`includeIds`-parametrilla). Ne toimivat kuin valinta editorissa. Niitä voi muokata paikallaan tai käyttää visuaalisena viitteenä uusille näytöille. `screenId` kohdistuu koko näyttöön
`attachments`	`{ id, path, type }[]` (enintään 5)	`[]`	Tiedostot `upload-attachment`-työkalusta: kuvia, PDF-tiedostoja tai koodi- ja tekstitiedostoja. Älä upota tiedostojen sisältöä viestiin

Esimerkki: muokkaa yhtä näyttöä ja lisää toinen yhdellä kutsulla:

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

Tulos: { 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", kun näytöt on rakennettu tai muutettu. "chat", kun Flowstep vastasi rakentamatta mitään. Tällöin reply sisältää vastauksen ja screenIds on tyhjä. Jos toimeksiantosi on epäselvä, agenttisi pyytää sinulta tarkennusta ja kutsuu työkalua uudelleen.
screenIds: kaikki kutsun aikana rakennetut tai muutetut näytöt, mukaan lukien paikallaan muokatut näytöt. Jos kutsu aikakatkaistaan sen jälkeen, kun joitain näyttöjä on jo rakennettu, se palauttaa nämä näytöt virheen sijaan.

Näytöt, jotka pyydät muokkaamaan, korvataan paikallaan.

`ai-generate-screen-variant`

Lisää uusi näyttö, joka on johdettu täsmälleen yhdestä olemassa olevasta näytöstä. Se voi olla käyttäjävirran seuraava vaihe, virhe- tai tyhjä tila, tai versio toiselle alustalle. Alkuperäinen näyttö jää ennalleen. Jos haluat lisätä näytön, joka ei ole olemassa olevan näytön muunnelma, esimerkiksi asetusnäytön, käytä ai-design-screens-työkalua fileId:n kanssa. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Kohdetiedosto
`screenId`	`uuid`	Olemassa oleva näyttö, josta johdetaan
`operationVariant`	enum	Pakollinen: miten uusi näyttö liittyy olemassa olevaan

`operationVariant`	Lisää
`next_screen`	Seuraava näyttö käyttäjävirrassa
`error_state`	Näytön virhetila
`empty_state`	Näytön tyhjä tila
`web_version`	Verkkoversio
`mobile_version`	Mobiiliversio
`tablet_version`	Tablettiversio
`mobile_ios_version`	iOS-versio
`mobile_android_version`	Android-versio

Tulos: { status, fileId, screenIds, designGuidelinesUpdated }. status on aina "generated".

`ai-edit-screen-variant`

Muuta täsmälleen yhtä olemassa olevaa näyttöä paikallaan esiasetuksella. Voit teemoittaa tai viimeistellä sen, kokeilla eri asettelua tai visuaalista tyyliä, tai suunnitella sen uudelleen alusta alkaen. Vapaamuotoisia ohjeita tai tarkkaa muokkausta yksittäisiin elementteihin varten käytä ai-design-screens-työkalua. Syöte

Parametri	Tyyppi	Kuvaus
`fileId`	`uuid`	Kohdetiedosto
`screenId`	`uuid`	Olemassa oleva muutettava näyttö
`operationVariant`	enum	Pakollinen: käytettävä muokkaus- tai uudelleensuunnitteluesiasetus

`operationVariant`	Tyyppi	Vaikutus
`dark_theme`	Muokkaus	Vaihda näyttö tummaan teemaan
`light_theme`	Muokkaus	Vaihda näyttö vaaleaan teemaan
`make_pretty`	Muokkaus	Viimeistele näytön visuaalinen suunnittelu
`different_layout`	Uudelleensuunnittelu	Kokeile erilaista asettelua
`different_style`	Uudelleensuunnittelu	Kokeile erilaista visuaalista tyyliä
`from_scratch`	Uudelleensuunnittelu	Suunnittele näyttö uudelleen alusta alkaen

Tulos: { status, fileId, screenIds, designGuidelinesUpdated }. status on aina "generated".

Tämä korvaa näytön sisällön paikallaan.

Uudelleen nimetyt työkalut

Työkalujen nimet muuttuivat syys- ja lokakuussa 2026. Jos sinulla on kehotteita, skriptejä tai agenttiohjeita, jotka käyttävät vanhoja nimiä, päivitä ne:

Vanha nimi	Uusi nimi
`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` (vapaamuotoiset ohjeet)	`ai-design-screens`
`edit-design` (`operationVariant`-esiasetuksella)	`ai-edit-screen-variant`
`regenerate-design`	`ai-edit-screen-variant`
`expand-design`	`ai-generate-screen-variant`

Syötteet muuttuivat myös. Tekoälysuunnittelutyökalut ottavat elementIds-kentän (tai yksittäisen screenId:n muunnelmatyökaluissa) targets-kentän sijaan. add-screen-jsx ottaa jsx- ja eksplisiittiset metatietokentät jsxContent-kentän ja metatietokommentin sijaan. create-file ottaa name-kentän title-kentän sijaan. Suunnitteluohjeiden työkalut ottavat fileId:n resourceId- ja linkedTo-kenttien sijaan.

​Tiedostotyökalut

​list-files

​get-file

​create-file

​update-file

​delete-file

​Näyttötyökalut

​list-screens

​get-screen-image

​get-screen-jsx

​add-screen-jsx

​replace-screen-jsx

​rename-screen

​delete-screen

​Kuvat JSX:ssä

​Näytön kenttien arvot

​Suunnitteluohjeiden työkalut

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Keskustelutyökalut

​get-chat-history

​Liitetyökalut

​upload-attachment

​Figma-työkalut

​import-figma

​Paketti- ja laskutustyökalut

​get-plan-details

​Tekoälysuunnittelutyökalut

​ai-design-screens

​ai-generate-screen-variant

​ai-edit-screen-variant

​Uudelleen nimetyt työkalut

Tiedostotyökalut

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Näyttötyökalut

`list-screens`

`get-screen-image`

`get-screen-jsx`

`add-screen-jsx`

`replace-screen-jsx`

`rename-screen`

`delete-screen`

Kuvat JSX:ssä

Näytön kenttien arvot

Suunnitteluohjeiden työkalut

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Keskustelutyökalut

`get-chat-history`

Liitetyökalut

`upload-attachment`

Figma-työkalut

`import-figma`

Paketti- ja laskutustyökalut

`get-plan-details`

Tekoälysuunnittelutyökalut

`ai-design-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

Uudelleen nimetyt työkalut