> ## 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 — Windsurf

> Connecta Flowstep a Windsurf mitjançant el transport Streamable HTTP de MCP.

## Configuració

Edita `~/.codeium/windsurf/mcp_config.json`:

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

Reinicia Windsurf després de desar el fitxer.

## Autenticació

En el primer ús, Windsurf obre el navegador a la pàgina d'inici de sessió OAuth de Flowstep. Inicia sessió amb les teves credencials de Flowstep (correu electrònic i contrasenya o Google SSO), fes clic a **Allow** a la pantalla de consentiment i Windsurf desa el token.

<Note>
  Necessites un compte de Flowstep abans de connectar-te. Crea'n un a [app.flowstep.ai](https://app.flowstep.ai).
</Note>

## Verifica la connexió

Obre el panell de MCP a Windsurf i confirma que Flowstep apareix a la llista. En un xat de Cascade:

```
List my Flowstep files
```

## Exemple d'ús

```
Create a Flowstep file called "Empty states", then generate a mobile empty-state screen
for a task list app with an illustration placeholder and a call-to-action button.
Show me the rendered result.
```

Cascade cridarà `create-file` → `ai-generate-screens` → `get-screen-image` en seqüència.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.