Referencia de herramientas MCP

Todas las herramientas devuelven una matriz content de bloques de contenido MCP. Las herramientas de texto devuelven { type: "text", text: "<json-string>" }. Las herramientas de imagen devuelven { type: "image", data: "<base64>", 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.

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

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

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

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

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

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

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 <name>”), u “Untitled” si está ausente.  Salida — El Id de la pantalla recién añadida.

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

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

{
  "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").

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

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

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

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

Primeros pasos

Uso de Flowstep

Equipos y organizaciones

Exportación e integraciones

Servidor MCP

Facturación y planes

Seguridad y privacidad

Referencia de herramientas MCP

Herramientas de archivo

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Herramientas de pantalla

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Herramientas de IA

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Herramientas de chat

`get-chat-history`

Herramientas de diseño

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Herramientas de Figma

`import-figma`

Herramientas de facturación

`get-plan-details`

​Herramientas de archivo

​list-files

​get-file

​create-file

​update-file

​delete-file

​Herramientas de pantalla

​list-screens

​get-screen

​add-screen

​get-screen-image

​Herramientas de IA

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

​Herramientas de chat

​get-chat-history

​Herramientas de diseño

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Herramientas de Figma

​import-figma

​Herramientas de facturación

​get-plan-details

Herramientas de archivo

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Herramientas de pantalla

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Herramientas de IA

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Herramientas de chat

`get-chat-history`

Herramientas de diseño

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Herramientas de Figma

`import-figma`

Herramientas de facturación

`get-plan-details`