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

> Verbinden Sie Flowstep mit claude.ai über einen benutzerdefinierten MCP-Connector.

claude.ai unterstützt benutzerdefinierte MCP-Konnektoren über das Integrations-Panel.

## Connector hinzufügen

<Steps>
  <Step title="Integrations öffnen">
    Gehen Sie zu **claude.ai → Settings → Integrations**.
  </Step>

  <Step title="Benutzerdefinierten Connector hinzufügen">
    Klicken Sie auf **Add More** (oder **Custom Connector**) und geben Sie dann ein:

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

  <Step title="Authentifizieren">
    claude.ai leitet Ihren Browser zu `https://api.flowstep.ai/oauth/authorize` um. Melden Sie sich mit Ihrem Flowstep-Konto an (E-Mail/Passwort oder Google SSO). Die Seite leitet Sie automatisch zurück zu claude.ai.
  </Step>

  <Step title="Connector aktivieren">
    Gehen Sie zurück zu Integrations und bestätigen Sie, dass der Flowstep-Connector als verbunden angezeigt wird. Schalten Sie ihn für die Unterhaltungen ein, in denen Sie ihn verwenden möchten.
  </Step>
</Steps>

<Note>
  Sie benötigen ein vorhandenes Flowstep-Konto für die Authentifizierung. Wenn Sie noch nicht über eines verfügen, erstellen Sie eines unter [app.flowstep.ai](https://app.flowstep.ai) und kehren Sie dann hierher zurück, um die Connector-Einrichtung abzuschließen.
</Note>

## Verbindung überprüfen

In einer claude.ai-Konversation mit aktiviertem Flowstep-Connector:

```
List my Flowstep files
```

## Verwendung

Beschreiben Sie nach der Verbindung, was Sie möchten, in natürlicher Sprache:

```
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 ruft die Flowstep-Tools nacheinander auf und zeigt die gerenderten Bilder inline an.