Referència d'Eines MCP

Totes les eines retornen una matriu content de blocs de contingut MCP. Les eines de text retornen { type: "text", text: "<json-string>" }. Les eines d’imatge retornen { type: "image", data: "<base64>", mimeType: "image/png" }. En cas d’error, es estableix isError: true i el bloc de text conté el missatge d’error.

Eines de fitxers

`list-files`

Llista els fitxers de Flowstep de l’usuari actual. Entrada

Paràmetre	Tipus	Per defecte	Descripció
`orderByCreation`	`boolean`	`true`	Ordenar per data de creació
`limit`	`integer` (1–100)	`20`	Nombre de fitxers a retornar
`offset`	`integer` (≥0)	`0`	Desplaçament de paginació

Sortida — Matriu JSON d’objectes fitxer.

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

Obté un fitxer individual per ID. El contingut del fitxer s’omet intencionadament — utilitza get-screen o get-screen-image per inspeccionar pantalles, i get-design-guidelines per recuperar les directrius adjuntes. Entrada

Paràmetre	Tipus	Descripció
`id`	`uuid`	ID del fitxer

Sortida — Objecte fitxer JSON.

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

Crea un fitxer de Flowstep nou. Entrada

Paràmetre	Tipus	Descripció
`title`	`string` (mín 1)	Nom del fitxer

Sortida — Objecte fitxer JSON amb l’id del fitxer nou.

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

Utilitza l’id retornat com a fileId en les crides posteriors de l’eina.

`update-file`

Reanomena un fitxer. Entrada

Paràmetre	Tipus	Descripció
`id`	`uuid`	ID del fitxer
`name`	`string` (mín 1)	Nom nou

Sortida — Objecte fitxer actualitzat amb la mateixa forma que 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`

Suprimeix permanentment un fitxer. El name que passes es verifica contra el nom actual del fitxer abans de la supressió — si no coincideix, la supressió s’interromp. Això evita suprimir accidentalment el fitxer equivocat. Entrada

Paràmetre	Tipus	Descripció
`id`	`uuid`	ID del fitxer
`name`	`string`	Nom actual del fitxer — ha de coincidir exactament o la supressió s’interromp

Sortida — "File deleted successfully"

Això és irreversible. Totes les pantalles del fitxer se suprimeixen.

Eines de pantalles

`list-screens`

Llista totes les pantalles generades per a un fitxer. Utilitza els valors de screenId retornats per referir-te a les pantalles en get-screen, get-screen-image, upload-attachment, i com a targets en edit-design, regenerate-design o expand-design. Entrada

Paràmetre	Tipus	Descripció
`fileId`	`uuid`	ID del fitxer

Sortida — Matriu JSON de resum de pantalles.

[
  {
    "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 és el nom de pantalla assignat per l’usuari, o null si sense nom.

`get-screen`

Obté el codi JSX per a una pantalla permetent-te editar o utilitzar el codi fora de Flowstep. Utilitza get-screen-image per a una vista prèvia visual. Entrada

Paràmetre	Tipus	Descripció
`fileId`	`uuid`	ID del fitxer
`screenId`	`uuid`	El `screenId` retornat per `list-screens` o de la matriu `screenIds` retornada per una eina de disseny

Sortida — La pantalla com a codi (JSX). Nota el comentari de la primera línia que és obligatori quan es fa servir l’eina 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`

Afegeix una nova pantalla a un fitxer de Flowstep a partir d’una cadena JSX bruta. Entrada

Paràmetre	Tipus	Descripció
`fileId`	`uuid`	ID del fitxer
`jsxContent`	`string`	JSX a afegir al fitxer com a pantalla
`screenType`	`string`	Obligatori si el tipus de pantalla no està definit com a comentari al principi del JSX

Nota - Un comentari similar al següent HA D’estar present com a primera línia del JSX ja que s’utilitza per afegir la pantalla correctament. screenType, name i screenId són tots opcionals — screenId s’utilitza (internament) si és present (per exemple, quan es passa JSX copiat de la sortida get-screen) però no és obligatori. El nom de la pantalla es pren del camp name del comentari (mostrat com a “Copy of <name>”), o “Untitled” si absència.  Sortida — L’ID de la pantalla nouvinguda.

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

`get-screen-image`

Representa una pantalla a PNG i la retorna com a imatge en línia. Requereix un client que suporti blocs de contingut d’imatge. Entrada

Paràmetre	Tipus	Descripció
`fileId`	`uuid`	ID del fitxer
`screenId`	`uuid`	El `screenId` retornat per `list-screens` o de la matriu `screenIds` retornada per una eina de disseny

Sortida — Bloc de contingut d’imatge MCP (image/png).

Eines d’IA

regenerate-design, expand-design i edit-design requereixen context de disseny que només està present en pantalles generades originalment amb una matriu designs. Les pantalles generades sense context de disseny retornaran un error. Solució alternativa: utilitza upload-attachment per representar la pantalla com a imatge, aleshores crida create-new-design amb la imatge en attachments i un missatge que descrigui els canvis desitjats.

`create-new-design`

Genera una o més dissenys de pantalla a partir d’un prompt de text. Omet fileId per crear un fitxer nou automàticament. Es bloqueja fins que la generació es completa o expira (180 segons). Entrada

Paràmetre	Tipus	Per defecte	Descripció
`fileId`	`uuid`	—	Fitxer objectiu — omet per crear un fitxer nou automàticament
`message`	`string`	—	Prompt que descriu les pantalles a generar
`attachments`	`AttachmentRequestData[]` (màx 5)	`[]`	Adjunts pré-carregats — imatges, PDFs o fitxers de codi. Sempre carrega a través de `upload-attachment` primer; no incrusti contingut de fitxer en el missatge
`designs`	`DesignRequestData[]`	`[]`	Referències de disseny

Sortida — { fileId, screenIds }. Passa cada screenId a get-screen-image per veure els resultats.

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

`regenerate-design`

Refes pantalles existents des de zero o amb una variació d’estil. Requereix almenys un screenId a targets. Es bloqueja fins que la generació es completa o expira (180 segons). Entrada

Paràmetre	Tipus	Per defecte	Descripció
`fileId`	`uuid`	—	Fitxer objectiu
`message`	`string`	—	Text del prompt
`targets`	`uuid[]` (mín 1)	—	screenIds de les pantalles a regenerar
`operationVariant`	`"different_layout" \| "different_style" \| "from_scratch"`	—	Variant d’estil opcional
`designs`	`DesignRequestData[]`	`[]`	Referències de disseny (resoltes automàticament)

Sortida — { fileId, screenIds }. Passa cada screenId a get-screen-image per veure els resultats.

`expand-design`

Afegeix pantalles de continuació a un disseny existent. Requereix almenys un screenId a targets i un operationVariant obligatori. Es bloqueja fins que la generació es completa o expira (180 segons). Entrada

Paràmetre	Tipus	Per defecte	Descripció
`fileId`	`uuid`	—	Fitxer objectiu
`message`	`string`	—	Text del prompt
`targets`	`uuid[]` (mín 1)	—	screenIds de les pantalles de les quals expandir
`operationVariant`	`"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"`	—	Obligatori — tipus de pantalla de continuació a generar
`designs`	`DesignRequestData[]`	`[]`	Referències de disseny (resoltes automàticament)

Sortida — { fileId, screenIds }. Passa cada screenId a get-screen-image per veure els resultats.

`edit-design`

Modifica les pantalles existents a través d’un prompt. Requereix almenys un screenId a targets. Es bloqueja fins que la generació es completa o expira (180 segons). Entrada

Paràmetre	Tipus	Per defecte	Descripció
`fileId`	`uuid`	—	Fitxer objectiu
`message`	`string`	—	Instruccions que descriuen les edicions a aplicar
`targets`	`uuid[]` (mín 1)	—	screenIds de les pantalles a editar
`operationVariant`	`"dark_theme" \| "light_theme" \| "make_pretty"`	—	Accés directe d’estil opcional
`attachments`	`AttachmentRequestData[]` (màx 5)	`[]`	Adjunts pré-carregats. Sempre carrega a través de `upload-attachment` primer
`designs`	`DesignRequestData[]`	`[]`	Referències de disseny (resoltes automàticament)

Sortida — { fileId, screenIds }. Passa cada screenId a get-screen-image per veure els resultats.

`upload-attachment`

Carrega un fitxer per utilitzar-lo com a adjunt en create-new-design o edit-design. Retorna { id, path, type, mimeType } — passa aquest objecte directament a la matriu attachments. Dos modes: Mode 1 — Pantalla per ID Passa screenId i fileId. El servidor obté l’estat de la pantalla de la base de dades i la representa com a imatge.

Paràmetre	Tipus	Descripció
`fileId`	`uuid`	Fitxer que conté la pantalla (obligatori)
`screenId`	`uuid`	Pantalla a representar

Mode 2 — Fitxer extern Passa el contingut del fitxer directament. Els fitxers binaris han de codificar-se en base64; els fitxers de text (inclòs codi font) es passen com a cadenes UTF-8 simples.

Paràmetre	Tipus	Descripció
`fileData`	`string`	Contingut del fitxer — base64 per a binari, cadena UTF-8 per a text
`fileName`	`string`	Nom de fitxer original
`mimeType`	`"image/jpeg" \| "image/png" \| "image/webp" \| "application/pdf" \| "text/plain" \| "text/javascript"`	Tipus MIME. Utilitza `text/javascript` per a fitxers `.jsx`, `.tsx`, `.js`, `.ts`

Mida màxima del fitxer: 3 MB. Per a imatges grans, prefereix image/jpeg sobre image/png. Sortida

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

type és "image" per a carregues d’imatge/PDF i "document" per a fitxers de text/codi.

Eines de xat

`get-chat-history`

Obté l’historial de missatges de xat per a un fitxer. Entrada

Paràmetre	Tipus	Descripció
`fileId`	`uuid`	ID del fitxer

Sortida — Objecte JSON amb una matriu messages. Cada missatge té un type ("request" o "response"), author ("human" o "ai") i content_type ("text", "summary" o "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": []
    }
  ]
}

Eines de disseny

`get-design-guidelines`

Obté les directrius de disseny emmagatzemades per a un fitxer. Entrada

Paràmetre	Tipus	Per defecte	Descripció
`resourceId`	`uuid`	—	ID del fitxer
`linkedTo`	`"file"`	`"file"`	Tipus de recurs

Sortida

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

guidelines és null si no s’han establert directrius.

`update-design-guidelines`

Estableix o reemplaça les directrius de disseny per a un fitxer. Les directrius es passen com a una cadena de text simple en el format design.md de Google — no passes un objecte o JSON. El servidor realitza validació suau i pot retornar una secció Warnings: a la resposta que enumera problemes (claus desconegudes, colors no-hex) que es van acceptar però que el AI pot ignorar. Mostra-les a l’usuari. Entrada

Paràmetre	Tipus	Per defecte	Descripció
`resourceId`	`uuid`	—	ID del fitxer
`designGuidelines`	`string` (mín 1)	—	Contingut de text brut de les directrius. Ha de ser una cadena simple — no codificada en JSON
`linkedTo`	`"file"`	`"file"`	Tipus de recurs

Regles de validació

Frontmatter s’ha d’obrir i tancar correctament
Les línies de frontmatter han de ser YAML vàlid d’estil de bloc
El cos Markdown no ha de contenir encapçalaments de secció ## duplicats

Sortida — "Design guidelines updated successfully", opcionalment seguit d’una secció Warnings:.

`delete-design-guidelines`

Esborra les directrius de disseny per a un fitxer. Entrada

Paràmetre	Tipus	Per defecte	Descripció
`resourceId`	`uuid`	—	ID del fitxer
`linkedTo`	`"file"`	`"file"`	Tipus de recurs

Sortida — "Design guidelines deleted successfully"

Eines de Figma

`import-figma`

Importa un marc de Figma a un fitxer de Flowstep com a elements editables al seu llenç. Reimportar el mateix marc l’actualitza in situ. L’organització del fitxer ha de tenir Figma connectada a la configuració de Flowstep. Entrada

Paràmetre	Tipus	Descripció
`figmaUrl`	`string`	Enllaç a un marc específic de Figma. A Figma, fes clic dret al marc i trieu Copy link to selection. Un enllaç a una pàgina importa tots els marcs de nivell superior en aquesta pàgina (limitat a 20 marcs sobre MCP).
`fileId`	`uuid`	El fitxer de Flowstep a on importar el marc

Sortida — { fileId, screenId }. screenId és l’id de l’element de pantalla importat — passa-ho a get-screen-image per veure el resultat. Quan una URL de pàgina importa múltiples marcs, screenId és null i frameCount es retorna en lloc.

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

Eines de facturació

`get-plan-details`

Obté el pla actual de l’usuari, estat de subscripció i quota restant. No pren entrada. Sortida

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

Els límits varien segons el pla. Crida aquesta eina abans d’una tanda de generacions per verificar la quota disponible.

Primers passos

Ús de Flowstep

Equips i organitzacions

Exportació i integracions

Servidor MCP

Facturació i plans

Seguretat i privadesa

Referència d'Eines MCP

Eines de fitxers

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Eines de pantalles

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Eines d’IA

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Eines de xat

`get-chat-history`

Eines de disseny

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Eines de Figma

`import-figma`

Eines de facturació

`get-plan-details`

​Eines de fitxers

​list-files

​get-file

​create-file

​update-file

​delete-file

​Eines de pantalles

​list-screens

​get-screen

​add-screen

​get-screen-image

​Eines d’IA

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

​Eines de xat

​get-chat-history

​Eines de disseny

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Eines de Figma

​import-figma

​Eines de facturació

​get-plan-details

Eines de fitxers

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Eines de pantalles

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Eines d’IA

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Eines de xat

`get-chat-history`

Eines de disseny

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Eines de Figma

`import-figma`

Eines de facturació

`get-plan-details`