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

# Inicio rápido de MCP

> Conecta Flowstep a tu editor de IA y ejecuta tu primera llamada a herramienta.

## Requisitos previos

* Una cuenta de Flowstep ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Requiere Cursor v0.43+**

    ## Paso 1 — Agregar el servidor

    Crea o edita `~/.cursor/mcp.json` (global) o `.cursor/mcp.json` en la raíz de tu proyecto:

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    Reinicia Cursor después de guardar.

    ## Paso 2 — Autenticar

    Abre el panel MCP de Cursor (Configuración → MCP) y haz clic en **Connect** junto a Flowstep. Cursor abre tu navegador en el inicio de sesión de OAuth de Flowstep. Inicia sesión con tus credenciales de Flowstep (correo electrónico/contraseña o Google). El navegador redirige y Cursor almacena el token automáticamente.

    <Note>
      Necesitas una cuenta de Flowstep antes de autenticarte. Si no tienes una, regístrate primero en [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## Paso 3 — Ejecutar una llamada a herramienta

    En un chat de Cursor, pregunta:

    > "List my Flowstep files"

    Cursor llama a `list-files` y devuelve tu lista de archivos. Si la respuesta está vacía, crea un archivo primero:

    > "Create a new Flowstep file called 'Dashboard'"

    ## Paso 4 — Generar una pantalla

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Cursor llama a `create-new-design` (que crea el archivo y genera las pantallas en un paso), y luego a `get-screen-image`. Verás el diseño renderizado en línea en el chat.
  </Tab>

  <Tab title="Claude Code">
    **Requiere Claude Code CLI**

    ## Paso 1 — Agregar el servidor

    Crea `.mcp.json` en la raíz de tu proyecto (alcance del proyecto) o `~/.claude/mcp.json` (global):

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      El campo `"type": "http"` es obligatorio para servidores HTTP de Claude Code. Cursor no lo necesita.
    </Note>

    ## Paso 2 — Autenticar

    Ejecuta cualquier herramienta de Flowstep desde un chat de Claude Code. En el primer uso, Claude Code abre tu navegador en el inicio de sesión de OAuth de Flowstep. Inicia sesión con tus credenciales de Flowstep (correo electrónico/contraseña o Google). El navegador redirige y el token se almacena automáticamente.

    <Note>
      Necesitas una cuenta de Flowstep antes de autenticarte. Si no tienes una, regístrate primero en [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## Paso 3 — Ejecutar una llamada a herramienta

    En un chat de Claude Code, pregunta:

    > "List my Flowstep files"

    Claude Code llama a `list-files` y devuelve tu lista de archivos. Si la respuesta está vacía, crea un archivo primero:

    > "Create a new Flowstep file called 'Dashboard'"

    ## Paso 4 — Generar una pantalla

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Claude Code llama a `create-new-design` (que crea el archivo y genera las pantallas en un paso), y luego a `get-screen-image`. Verás el diseño renderizado en línea en el chat.
  </Tab>
</Tabs>

## Pasos siguientes

* [Referencia de herramientas](/es/mcp/tools) — documentación completa de entrada/salida para las 20 herramientas
* [Ejemplos](/es/mcp/examples) — flujos de trabajo de múltiples pasos
* [Otros clientes](/es/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai