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 — "Archivo eliminado correctamente"

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 — "Directrices de diseño actualizadas correctamente", 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 — "Directrices de diseño eliminadas correctamente"

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.

​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 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 facturación

`get-plan-details`