> ## Documentation Index > Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt > Use this file to discover all available pages before exploring further. # Referència d'Eines MCP > Esquema d'entrada, format de sortida i exemples de totes les 20 eines MCP de Flowstep. Totes les eines retornen una matriu `content` de blocs de contingut MCP. Les eines de text retornen `{ type: "text", text: "" }`. Les eines d'imatge retornen `{ type: "image", data: "", 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. ```json theme={"system"} [ { "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. ```json theme={"system"} { "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. ```json theme={"system"} { "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`. ```json theme={"system"} { "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. ```json theme={"system"} [ { "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`. ```json theme={"system"}
World Clock
Search cities...
...
; ``` *** ### `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 \"), o "Untitled" si absència. `` **Sortida** — L'ID de la pantalla nouvinguda. ```json theme={"system"} { "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. ```json theme={"system"} { "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** ```json theme={"system"} { "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"`). ```json theme={"system"} { "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** ```json theme={"system"} { "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. ```json theme={"system"} { "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** ```json theme={"system"} { "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.