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

> Connectez Flowstep à claude.ai à l'aide d'un connecteur MCP personnalisé.

Claude.ai prend en charge les connecteurs MCP personnalisés via le panneau **Integrations** (Intégrations).

## Ajoutez le connecteur

<Steps>
  <Step title="Ouvrir Intégrations">
    Allez à **claude.ai → Settings → Integrations** (Paramètres → Intégrations).
  </Step>

  <Step title="Ajouter un connecteur personnalisé">
    Cliquez sur **Add More** (Ajouter plus) ou **Custom Connector** (Connecteur personnalisé), puis entrez :

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

  <Step title="S'authentifier">
    Claude.ai redirige votre navigateur vers `https://api.flowstep.ai/oauth/authorize`. Connectez-vous avec votre compte Flowstep (e-mail/mot de passe ou Google SSO). La page vous redirige automatiquement vers claude.ai.
  </Step>

  <Step title="Activer le connecteur">
    Retour dans Intégrations, confirmez que le connecteur Flowstep s'affiche comme connecté. Activez-le pour les conversations où vous voulez l'utiliser.
  </Step>
</Steps>

<Note>
  Vous avez besoin d'un compte Flowstep existant pour vous authentifier. Si vous n'en avez pas, créez-en un à [app.flowstep.ai](https://app.flowstep.ai) en premier, puis revenez ici pour terminer la configuration du connecteur.
</Note>

## Vérifiez la connexion

Dans une conversation claude.ai avec le connecteur Flowstep activé :

```
List my Flowstep files
```

## Utilisation

Une fois connecté, décrivez ce que vous voulez en langage naturel :

```
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 appellera les outils Flowstep en séquence et affichera les images rendues en ligne.