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

> Connetti Flowstep a OpenAI Codex utilizzando il trasporto HTTP MCP Streamable.

## Configurazione

Aggiungi il server con la CLI di Codex:

```bash theme={"system"}
codex mcp add flowstep --url https://api.flowstep.ai/mcp
```

Oppure modifica il file di configurazione direttamente. Utilizza il file globale per abilitarlo ovunque, oppure il file di progetto (solo progetti attendibili) per mantenerlo limitato all'ambito.

<Tabs>
  <Tab title="Globale (~/.codex/config.toml)">
    ```toml theme={"system"}
    [mcp_servers.flowstep]
    url = "https://api.flowstep.ai/mcp"
    ```
  </Tab>

  <Tab title="Progetto (.codex/config.toml)">
    ```toml theme={"system"}
    [mcp_servers.flowstep]
    url = "https://api.flowstep.ai/mcp"
    ```
  </Tab>
</Tabs>

Codex sceglie automaticamente il trasporto HTTP Streamable quando viene impostato un `url` — non è necessario alcun campo di trasporto.

## Autenticazione

Esegui:

```bash theme={"system"}
codex mcp login flowstep
```

Codex apre il tuo browser su `https://api.flowstep.ai/oauth/authorize`. Accedi con le tue credenziali Flowstep (email/password o Google SSO). Codex acquisisce il callback e memorizza il token.

<Note>
  È necessario un account Flowstep prima di connettersi. Crea uno su [app.flowstep.ai](https://app.flowstep.ai).
</Note>

## Verifica la connessione

```bash theme={"system"}
codex mcp list
```

Il server dovrebbe apparire con il suo stato OAuth. All'interno di una sessione Codex, digita `/mcp` per visualizzare i server connessi, quindi chiedi:

```
List my Flowstep files
```

Se la chiamata dello strumento ha successo, la connessione sta funzionando.

## Esempio di utilizzo

```
Create a Flowstep file called "Checkout flow", generate a mobile payment screen
with a card form and an order summary, then show me the rendered image.
```

Codex chiamerà `create-new-design` → `get-screen-image` e visualizzerà il risultato.