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

> Verbinden Sie Flowstep mit OpenAI Codex über den Streamable HTTP MCP-Transport.

## Konfiguration

Fügen Sie den Server mit der Codex CLI hinzu:

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

Oder bearbeiten Sie die Konfigurationsdatei direkt. Verwenden Sie die globale Datei, um sie überall zu aktivieren, oder die Projektdatei (nur vertraute Projekte), um sie einzugrenzen.

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

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

Codex wählt den Streamable HTTP-Transport automatisch aus, wenn eine `url` gesetzt ist — kein Transport-Feld erforderlich.

## Authentifizierung

Führen Sie Folgendes aus:

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

Codex öffnet Ihren Browser unter `https://api.flowstep.ai/oauth/authorize`. Melden Sie sich mit Ihren Flowstep-Anmeldedaten (E-Mail/Passwort oder Google SSO) an. Codex erfasst den Callback und speichert das Token.

<Note>
  Sie benötigen ein Flowstep-Konto, bevor Sie eine Verbindung herstellen. Erstellen Sie eines unter [app.flowstep.ai](https://app.flowstep.ai).
</Note>

## Verbindung überprüfen

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

Der Server sollte mit seinem OAuth-Status angezeigt werden. Geben Sie in einer Codex-Sitzung `/mcp` ein, um verbundene Server anzuzeigen, und fragen Sie dann:

```
List my Flowstep files
```

Wenn der Tool-Aufruf erfolgreich ist, funktioniert die Verbindung.

## Verwendungsbeispiel

```
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 ruft `create-new-design` → `get-screen-image` auf und zeigt das Ergebnis an.