> ## 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. # Referencia de herramientas MCP > Esquema de entrada, forma de salida y ejemplos para las 20 herramientas MCP de Flowstep. Todas las herramientas devuelven una matriz `content` de bloques de contenido MCP. Las herramientas de texto devuelven `{ type: "text", text: "" }`. Las herramientas de imagen devuelven `{ type: "image", data: "", mimeType: "image/png" }`. En caso de fallo, `isError: true` se establece y el bloque de texto contiene el mensaje de error. *** ## Herramientas de archivo ### `list-files` Enumera los archivos de Flowstep para el usuario actual. **Entrada** | Parámetro | Tipo | Predeterminado | Descripción | | ----------------- | ----------------- | -------------- | ----------------------------- | | `orderByCreation` | `boolean` | `true` | Ordenar por fecha de creación | | `limit` | `integer` (1–100) | `20` | Número de archivos a devolver | | `offset` | `integer` (≥0) | `0` | Desplazamiento de paginación | **Salida** — Matriz JSON de objetos de archivo. ```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én un único archivo por ID. El contenido del archivo se omite intencionalmente — usa `get-screen` o `get-screen-image` para inspeccionar pantallas, y `get-design-guidelines` para recuperar las directrices adjuntas. **Entrada** | Parámetro | Tipo | Descripción | | --------- | ------ | -------------- | | `id` | `uuid` | ID del archivo | **Salida** — Objeto de archivo 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 nuevo archivo de Flowstep. **Entrada** | Parámetro | Tipo | Descripción | | --------- | ---------------- | ------------------ | | `title` | `string` (min 1) | Nombre del archivo | **Salida** — Objeto de archivo JSON con el `id` del nuevo archivo. ```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" } ``` Usa el `id` devuelto como `fileId` en llamadas de herramientas posteriores. *** ### `update-file` Cambia el nombre de un archivo. **Entrada** | Parámetro | Tipo | Descripción | | --------- | ---------------- | -------------- | | `id` | `uuid` | ID del archivo | | `name` | `string` (min 1) | Nuevo nombre | **Salida** — Objeto de archivo actualizado con la misma 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` Elimina permanentemente un archivo. El `name` que pasas se verifica contra el nombre real del archivo antes de la eliminación — si no coincide, la eliminación se cancela. Esto evita eliminar accidentalmente el archivo incorrecto. **Entrada** | Parámetro | Tipo | Descripción | | --------- | -------- | ---------------------------------------------------------------------------------- | | `id` | `uuid` | ID del archivo | | `name` | `string` | Nombre actual del archivo — debe coincidir exactamente o la eliminación se cancela | **Salida** — `"File deleted successfully"` Esto es irreversible. Se eliminan todas las pantallas en el archivo. *** ## Herramientas de pantalla ### `list-screens` Enumera todas las pantallas generadas para un archivo. Usa los valores de `screenId` devueltos para hacer referencia a las pantallas en `get-screen`, `get-screen-image`, `upload-attachment`, y como `targets` en `edit-design`, `regenerate-design`, o `expand-design`. **Entrada** | Parámetro | Tipo | Descripción | | --------- | ------ | -------------- | | `fileId` | `uuid` | ID del archivo | **Salida** — Matriz JSON de resúmenes de pantalla. ```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` es el nombre de pantalla asignado por el usuario, o `null` si no tiene nombre. *** ### `get-screen` Obtén el código JSX de una pantalla para que puedas editar o usar el código fuera de Flowstep. Usa `get-screen-image` para una vista previa visual en su lugar. **Entrada** | Parámetro | Tipo | Descripción | | ---------- | ------ | -------------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | ID del archivo | | `screenId` | `uuid` | El `screenId` devuelto por `list-screens` o del array `screenIds` devuelto por una herramienta de diseño | **Salida** — La pantalla como código (JSX). Nota el comentario de la primera línea que se requiere al usar la herramienta `add-screen`. ```json theme={"system"}
World Clock
Search cities...
...
; ``` *** ### `add-screen` Añade una nueva pantalla a un archivo de Flowstep desde una cadena JSX sin procesar. **Entrada** | Parámetro | Tipo | Descripción | | ------------ | -------- | --------------------------------------------------------------------------------- | | `fileId` | `uuid` | ID del archivo | | `jsxContent` | `string` | JSX a añadir al archivo como una pantalla | | `screenType` | `string` | Se requiere si el tipo de pantalla no se define como comentario al inicio del JSX | **Nota** - Un comentario similar al de abajo DEBE estar presente como la primera línea del JSX ya que se usa para añadir la pantalla correctamente. `screenType`, `name`, y `screenId` son todos opcionales — `screenId` se usa (internamente) si está presente (por ejemplo, al pasar JSX copiado de la salida de `get-screen`) pero no es obligatorio. El nombre de pantalla se toma del campo `name` del comentario (mostrado como "Copy of \"), u "Untitled" si está ausente. `` **Salida** — El Id de la pantalla recién añadida. ```json theme={"system"} { "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" } ``` *** ### `get-screen-image` Renderiza una pantalla a PNG y devuélvela como una imagen en línea. Requiere un cliente que admita bloques de contenido de imagen. **Entrada** | Parámetro | Tipo | Descripción | | ---------- | ------ | -------------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | ID del archivo | | `screenId` | `uuid` | El `screenId` devuelto por `list-screens` o del array `screenIds` devuelto por una herramienta de diseño | **Salida** — Bloque de contenido de imagen MCP (`image/png`). *** ## Herramientas de IA `regenerate-design`, `expand-design`, y `edit-design` requieren contexto de diseño que solo está presente en las pantallas generadas originalmente con un array `designs`. Las pantallas generadas sin contexto de diseño devolverán un error. Solución alternativa: usa `upload-attachment` para renderizar la pantalla como una imagen, luego llama a `create-new-design` con la imagen en `attachments` y un mensaje describiendo los cambios deseados. ### `create-new-design` Genera uno o más diseños de pantalla desde un prompt de texto. Omite `fileId` para crear un nuevo archivo automáticamente. Se bloquea hasta que la generación se complete o agote el tiempo de espera (180 segundos). **Entrada** | Parámetro | Tipo | Predeterminado | Descripción | | ------------- | --------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | — | Archivo de destino — omite para crear un nuevo archivo automáticamente | | `message` | `string` | — | Prompt describiendo las pantallas a generar | | `attachments` | `AttachmentRequestData[]` (max 5) | `[]` | Archivos adjuntos precargados — imágenes, PDFs o archivos de código. Siempre sube a través de `upload-attachment` primero; no incluyas el contenido del archivo en el mensaje | | `designs` | `DesignRequestData[]` | `[]` | Referencias de diseño | **Salida** — `{ fileId, screenIds }`. Pasa cada `screenId` a `get-screen-image` para ver los resultados. ```json theme={"system"} { "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "screenIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"] } ``` *** ### `regenerate-design` Rehace pantallas existentes desde cero o con una variación de estilo. Requiere al menos un `screenId` en `targets`. Se bloquea hasta que la generación se complete o agote el tiempo de espera (180 segundos). **Entrada** | Parámetro | Tipo | Predeterminado | Descripción | | ------------------ | ----------------------------------------------------------- | -------------- | ------------------------------------------------- | | `fileId` | `uuid` | — | Archivo de destino | | `message` | `string` | — | Texto del prompt | | `targets` | `uuid[]` (min 1) | — | screenIds de pantallas a regenerar | | `operationVariant` | `"different_layout" \| "different_style" \| "from_scratch"` | — | Variante de estilo opcional | | `designs` | `DesignRequestData[]` | `[]` | Referencias de diseño (resueltas automáticamente) | **Salida** — `{ fileId, screenIds }`. Pasa cada `screenId` a `get-screen-image` para ver los resultados. *** ### `expand-design` Añade pantallas de seguimiento a un diseño existente. Requiere al menos un `screenId` en `targets` y un `operationVariant` obligatorio. Se bloquea hasta que la generación se complete o agote el tiempo de espera (180 segundos). **Entrada** | Parámetro | Tipo | Predeterminado | Descripción | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | --------------------------------------------------------- | | `fileId` | `uuid` | — | Archivo de destino | | `message` | `string` | — | Texto del prompt | | `targets` | `uuid[]` (min 1) | — | screenIds de pantallas desde las que expandir | | `operationVariant` | `"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"` | — | **Requerido** — tipo de pantalla de seguimiento a generar | | `designs` | `DesignRequestData[]` | `[]` | Referencias de diseño (resueltas automáticamente) | **Salida** — `{ fileId, screenIds }`. Pasa cada `screenId` a `get-screen-image` para ver los resultados. *** ### `edit-design` Modifica pantallas existentes a través de un prompt. Requiere al menos un `screenId` en `targets`. Se bloquea hasta que la generación se complete o agote el tiempo de espera (180 segundos). **Entrada** | Parámetro | Tipo | Predeterminado | Descripción | | ------------------ | ------------------------------------------------ | -------------- | ----------------------------------------------------------------------------------- | | `fileId` | `uuid` | — | Archivo de destino | | `message` | `string` | — | Instrucciones describiendo las ediciones a aplicar | | `targets` | `uuid[]` (min 1) | — | screenIds de pantallas a editar | | `operationVariant` | `"dark_theme" \| "light_theme" \| "make_pretty"` | — | Atajo de estilo opcional | | `attachments` | `AttachmentRequestData[]` (max 5) | `[]` | Archivos adjuntos precargados. Siempre sube a través de `upload-attachment` primero | | `designs` | `DesignRequestData[]` | `[]` | Referencias de diseño (resueltas automáticamente) | **Salida** — `{ fileId, screenIds }`. Pasa cada `screenId` a `get-screen-image` para ver los resultados. *** ### `upload-attachment` Sube un archivo para usarlo como un archivo adjunto en `create-new-design` o `edit-design`. Devuelve `{ id, path, type, mimeType }` — pasa este objeto directamente al array `attachments`. Dos modos: **Modo 1 — Pantalla por ID** Pasa `screenId` y `fileId`. El servidor obtiene el estado de la pantalla de la base de datos y la renderiza como una imagen. | Parámetro | Tipo | Descripción | | ---------- | ------ | -------------------------------------------- | | `fileId` | `uuid` | Archivo que contiene la pantalla (requerido) | | `screenId` | `uuid` | Pantalla a renderizar | **Modo 2 — Archivo externo** Pasa el contenido del archivo directamente. Los archivos binarios deben codificarse en base64; los archivos de texto (incluido el código fuente) se pasan como cadenas UTF-8 simples. | Parámetro | Tipo | Descripción | | ---------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | | `fileData` | `string` | Contenido del archivo — base64 para binario, cadena UTF-8 para texto | | `fileName` | `string` | Nombre de archivo original | | `mimeType` | `"image/jpeg" \| "image/png" \| "image/webp" \| "application/pdf" \| "text/plain" \| "text/javascript"` | Tipo MIME. Usa `text/javascript` para archivos `.jsx`, `.tsx`, `.js`, `.ts` | Tamaño máximo de archivo: **3 MB**. Para imágenes grandes, prefiere `image/jpeg` sobre `image/png`. **Salida** ```json theme={"system"} { "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890", "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890", "type": "image", "mimeType": "image/jpeg" } ``` `type` es `"image"` para cargas de imagen/PDF y `"document"` para archivos de texto/código. *** ## Herramientas de chat ### `get-chat-history` Obtén el historial de mensajes de chat de un archivo. **Entrada** | Parámetro | Tipo | Descripción | | --------- | ------ | -------------- | | `fileId` | `uuid` | ID del archivo | **Salida** — Objeto JSON con un array `messages`. Cada mensaje tiene un `type` (`"request"` o `"response"`), `author` (`"human"` o `"ai"`), y `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": [] } ] } ``` *** ## Herramientas de diseño ### `get-design-guidelines` Obtén las directrices de diseño almacenadas para un archivo. **Entrada** | Parámetro | Tipo | Predeterminado | Descripción | | ------------ | -------- | -------------- | --------------- | | `resourceId` | `uuid` | — | ID del archivo | | `linkedTo` | `"file"` | `"file"` | Tipo de recurso | **Salida** ```json theme={"system"} { "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter", "linkedTo": "file" } ``` `guidelines` es `null` si no se han establecido directrices. *** ### `update-design-guidelines` Establece o reemplaza las directrices de diseño para un archivo. Las directrices se pasan como una cadena de texto plano en el formato `design.md` de Google — no pases un objeto o JSON. El servidor realiza una validación suave y puede devolver una sección `Warnings:` en la respuesta enumerando problemas (claves desconocidas, colores no hexadecimales) que fueron aceptados pero pueden ser ignorados por la IA. Presenta estos al usuario. **Entrada** | Parámetro | Tipo | Predeterminado | Descripción | | ------------------ | ---------------- | -------------- | ------------------------------------------------------------------------------------------------------ | | `resourceId` | `uuid` | — | ID del archivo | | `designGuidelines` | `string` (min 1) | — | Contenido de texto sin procesar de las directrices. Debe ser una cadena simple — no codificada en JSON | | `linkedTo` | `"file"` | `"file"` | Tipo de recurso | **Reglas de validación** * El frontmatter debe abrirse y cerrarse correctamente * Las líneas del frontmatter deben ser YAML de estilo de bloque válido * El cuerpo de Markdown no debe contener encabezados de sección `##` duplicados **Salida** — `"Design guidelines updated successfully"`, opcionalmente seguido por una sección `Warnings:`. *** ### `delete-design-guidelines` Borra las directrices de diseño para un archivo. **Entrada** | Parámetro | Tipo | Predeterminado | Descripción | | ------------ | -------- | -------------- | --------------- | | `resourceId` | `uuid` | — | ID del archivo | | `linkedTo` | `"file"` | `"file"` | Tipo de recurso | **Salida** — `"Design guidelines deleted successfully"` *** ## Herramientas de Figma ### `import-figma` Importa un frame de Figma a un archivo de Flowstep como elementos editables en su lienzo. Reimportar el mismo frame lo actualiza en su lugar. La organización del archivo debe tener Figma conectado en la configuración de Flowstep. **Entrada** | Parámetro | Tipo | Descripción | | ---------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `figmaUrl` | `string` | Enlace a un frame de Figma específico. En Figma, haz clic derecho en el frame y elige **Copy link to selection**. Un enlace a una página importa todos los frames de nivel superior en esa página (limitado a 20 frames sobre MCP). | | `fileId` | `uuid` | El archivo de Flowstep al que se importará el frame | **Salida** — `{ fileId, screenId }`. `screenId` es el id del elemento de pantalla importado — pásalo a `get-screen-image` para ver el resultado. Cuando una URL de página importa múltiples frames, `screenId` es `null` y `frameCount` se devuelve en su lugar. ```json theme={"system"} { "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" } ``` *** ## Herramientas de facturación ### `get-plan-details` Obtén el plan del usuario actual, el estado de la suscripción y la cuota restante. No toma entrada. **Salida** ```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 } } } ``` Los límites varían según el plan. Llama a esta herramienta antes de un lote de generaciones para verificar la cuota disponible.