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

# Démarrage rapide MCP

> Connectez Flowstep à votre éditeur IA et exécutez votre premier appel d'outil.

## Conditions préalables

* Un compte Flowstep ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Nécessite Cursor v0.43+**

    ## Étape 1 — Ajouter le serveur

    Créez ou modifiez `~/.cursor/mcp.json` (global) ou `.cursor/mcp.json` dans la racine de votre projet :

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

    Redémarrez Cursor après l'enregistrement.

    ## Étape 2 — S'authentifier

    Ouvrez le panneau MCP de Cursor (Paramètres → MCP) et cliquez sur **Connect** à côté de Flowstep. Cursor ouvre votre navigateur sur la page de connexion OAuth Flowstep. Connectez-vous avec vos identifiants Flowstep (courriel/mot de passe ou Google). Le navigateur vous redirige et Cursor stocke le jeton automatiquement.

    <Note>
      Vous avez besoin d'un compte Flowstep avant de vous authentifier. Si vous n'en avez pas, inscrivez-vous d'abord sur [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## Étape 3 — Exécuter un appel d'outil

    Dans un chat Cursor, demandez :

    > "List my Flowstep files"

    Cursor appelle `list-files` et retourne votre liste de fichiers. Si la réponse est vide, créez d'abord un fichier :

    > "Create a new Flowstep file called 'Dashboard'"

    ## Étape 4 — Générer un écran

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Cursor appelle `create-new-design` (qui crée le fichier et génère les écrans en une seule étape), puis `get-screen-image`. Vous verrez le design rendu en ligne dans le chat.
  </Tab>

  <Tab title="Claude Code">
    **Nécessite Claude Code CLI**

    ## Étape 1 — Ajouter le serveur

    Créez `.mcp.json` dans la racine de votre projet (portée du projet) ou `~/.claude/mcp.json` (global) :

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      Le champ `"type": "http"` est requis pour les serveurs HTTP Claude Code. Cursor n'en a pas besoin.
    </Note>

    ## Étape 2 — S'authentifier

    Exécutez n'importe quel outil Flowstep à partir d'un chat Claude Code. À la première utilisation, Claude Code ouvre votre navigateur sur la page de connexion OAuth Flowstep. Connectez-vous avec vos identifiants Flowstep (courriel/mot de passe ou Google). Le navigateur vous redirige et le jeton est stocké automatiquement.

    <Note>
      Vous avez besoin d'un compte Flowstep avant de vous authentifier. Si vous n'en avez pas, inscrivez-vous d'abord sur [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## Étape 3 — Exécuter un appel d'outil

    Dans un chat Claude Code, demandez :

    > "List my Flowstep files"

    Claude Code appelle `list-files` et retourne votre liste de fichiers. Si la réponse est vide, créez d'abord un fichier :

    > "Create a new Flowstep file called 'Dashboard'"

    ## Étape 4 — Générer un écran

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Claude Code appelle `create-new-design` (qui crée le fichier et génère les écrans en une seule étape), puis `get-screen-image`. Vous verrez le design rendu en ligne dans le chat.
  </Tab>
</Tabs>

## Prochaines étapes

* [Référence des outils](/fr-CA/mcp/tools) — documentation complète des entrées/sorties pour les 20 outils
* [Exemples](/fr-CA/mcp/examples) — flux de travail multi-étapes
* [Autres clients](/fr-CA/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai