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

# Flowstep MCP — claude.ai

> Conecta Flowstep a claude.ai usando un conector MCP personalizado.

Claude.ai admite conectores MCP personalizados a través del panel de Integraciones.

## Agrega el conector

<Steps>
  <Step title="Abre Integraciones">
    Ve a **claude.ai → Settings → Integrations**.
  </Step>

  <Step title="Agrega un conector personalizado">
    Haz clic en **Add More** (o **Custom Connector**), luego ingresa:

    ```
    https://api.flowstep.ai/mcp
    ```
  </Step>

  <Step title="Autentica">
    Claude.ai redirige tu navegador a `https://api.flowstep.ai/oauth/authorize`. Inicia sesión con tu cuenta de Flowstep (email/contraseña o Google SSO). La página se redirige automáticamente a claude.ai.
  </Step>

  <Step title="Habilita el conector">
    De vuelta en Integraciones, confirma que el conector de Flowstep aparece como conectado. Actívalo en las conversaciones donde desees usarlo.
  </Step>
</Steps>

<Note>
  Necesitas una cuenta de Flowstep existente para autenticarte. Si no tienes una, crea una en [app.flowstep.ai](https://app.flowstep.ai) primero, luego regresa aquí para completar la configuración del conector.
</Note>

## Verifica la conexión

En una conversación de claude.ai con el conector de Flowstep habilitado:

```
List my Flowstep files
```

## Uso

Una vez conectado, describe lo que deseas en lenguaje natural:

```
Create a Flowstep file called "Checkout flow" and generate a three-step checkout screen
for an e-commerce app: cart review, address entry, and payment. Show me each screen.
```

Claude llamará las herramientas de Flowstep en secuencia y mostrará las imágenes renderizadas en línea.