Guide de démarrage 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 à 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 (Settings → MCP) et cliquez sur Connect à côté de Flowstep. Cursor ouvre votre navigateur à la page de connexion Flowstep OAuth. Connectez-vous avec vos identifiants Flowstep (e-mail/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 à app.flowstep.ai.

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

Nécessite Claude Code CLI

Étape 1 — Ajouter le serveur

Créez .mcp.json à la racine de votre projet (limité au projet) ou ~/.claude/mcp.json (global) :

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

Le champ "type": "http" est obligatoire 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 à la page de connexion Flowstep OAuth. Connectez-vous avec vos identifiants Flowstep (e-mail/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 à app.flowstep.ai.

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

Prochaines étapes

Référence des outils — documentation d’entrée/sortie complète pour 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