> ## 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.

# Servidor MCP de Flowstep

> Usa Flowstep como servidor MCP para generar, inspeccionar y gestionar diseños de UI directamente desde Cursor, Claude Code o cualquier cliente compatible con MCP.

Flowstep expone sus herramientas de diseño a través del [Model Context Protocol](https://modelcontextprotocol.io/), permitiendo que tu asistente de IA cree e itere sobre pantallas de UI sin salir de tu editor.

El servidor está hospedado en `https://api.flowstep.ai/mcp` (transporte HTTP transmisible). No hay ningún proceso local que ejecutar.

## Qué puedes hacer

El servidor expone 20 herramientas en siete categorías:

| Categoría             | Herramientas                                                                                  |
| --------------------- | --------------------------------------------------------------------------------------------- |
| **Archivos**          | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Pantallas**         | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **Generación con IA** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Chat**              | `get-chat-history`                                                                            |
| **Diseño**            | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**             | `import-figma`                                                                                |
| **Facturación**       | `get-plan-details`                                                                            |

## Casos de uso comunes

**Generar pantallas a partir de un prompt** — llama a `create-new-design` con una descripción. Flowstep crea el archivo y las pantallas en un paso. Llama a `get-screen-image` con los `screenIds` devueltos para ver el resultado en línea.

**Visualizar un componente React** — carga tu archivo `.jsx` o `.tsx` mediante `upload-attachment` (utiliza `mimeType: text/javascript`), y luego pasa el archivo adjunto devuelto a `create-new-design` con un mensaje que describa el componente. Flowstep lee el código fuente y genera una pantalla de diseño coincidente.

**Iterar sobre un diseño** — llama a `edit-design` con un `screenId` objetivo e instrucciones para modificarlo, o `regenerate-design` para rehacer una pantalla desde cero.

**Mantener directrices de diseño** — llama a `get-design-guidelines` para recuperar tus reglas de estilo actuales (colores, tipografía, espaciado, tono), y luego usa `update-design-guidelines` para mantenerlas sincronizadas a medida que tu diseño evoluciona. Pasar directrices coherentes a `create-new-design` o `edit-design` asegura que todas las pantallas generadas mantengan la marca. Usa `delete-design-guidelines` para restablecerlas completamente.

**Importar desde Figma** — llama a `import-figma` con un enlace de frame de Figma y un `fileId` para traer el frame a un archivo de Flowstep como elementos editables. La organización del archivo debe tener Figma conectado primero.

**Auditar cuota** — llama a `get-plan-details` para ver el uso restante diario y mensual antes de iniciar un lote de generaciones.

## Endpoint

```
https://api.flowstep.ai/mcp
```

Transporte: HTTP transmisible. Modelo de sesión: stateless (cada solicitud es independiente, sin ID de sesión).

## Pasos siguientes

<CardGroup cols={2}>
  <Card title="Inicio rápido" icon="bolt" href="/es/mcp/quickstart">
    Primera llamada a herramienta en menos de 5 minutos con Cursor.
  </Card>

  <Card title="Autenticación" icon="lock" href="/es/mcp/authentication">
    Cómo funciona OAuth 2.1 PKCE y cómo se emiten los tokens.
  </Card>

  <Card title="Herramientas" icon="wrench" href="/es/mcp/tools">
    Referencia completa de entrada/salida para las 20 herramientas.
  </Card>

  <Card title="Ejemplos" icon="code" href="/es/mcp/examples">
    Flujos de trabajo de extremo a extremo para tareas comunes.
  </Card>
</CardGroup>