Démarrage rapide MCP

Conditions préalables

Un compte Flowstep (app.flowstep.ai)

Cursor
Claude Code

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 :

{
  "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 (Connecter) à côté de Flowstep. Cursor ouvre votre navigateur sur la page de connexion OAuth Flowstep. Connectez-vous avec vos identifiants Flowstep (email/mot de passe ou Google). Le navigateur vous redirige et Cursor stocke le jeton automatiquement.

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.

Étape 3 — Exécuter un appel d’outil

Dans un chat Cursor, demandez :

« Lister mes fichiers Flowstep »

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

« Créer un nouveau fichier Flowstep appelé ‘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.

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) :

{
  "mcpServers": {
    "flowstep": {
      "type": "http",
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

Le champ "type": "http" est requis pour les serveurs HTTP Claude Code. Cursor n’en a pas besoin.

É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 (email/mot de passe ou Google). Le navigateur vous redirige et le jeton est stocké automatiquement.

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.

Étape 3 — Exécuter un appel d’outil

Dans un chat Claude Code, demandez :

« Lister mes fichiers Flowstep »

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

« Créer un nouveau fichier Flowstep appelé ‘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.

Prochaines étapes

Référence des outils — documentation complète des entrées/sorties pour tous les 19 outils
Exemples — flux de travail multi-étapes
Autres clients — Windsurf, Claude Desktop, claude.ai

​Conditions préalables

​Étape 1 — Ajouter le serveur

​Étape 2 — S’authentifier

​Étape 3 — Exécuter un appel d’outil

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

​Étape 1 — Ajouter le serveur

​Étape 2 — S’authentifier

​Étape 3 — Exécuter un appel d’outil

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

​Prochaines étapes

Conditions préalables

Étape 1 — Ajouter le serveur

Étape 2 — S’authentifier

Étape 3 — Exécuter un appel d’outil

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

Étape 1 — Ajouter le serveur

Étape 2 — S’authentifier

Étape 3 — Exécuter un appel d’outil

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

Prochaines étapes