Démarrage rapide MCP

Prérequis

Un compte Flowstep (app.flowstep.ai)

Vous utilisez Claude sur claude.ai ou Claude Desktop ? Flowstep figure parmi les connecteurs référencés dans le répertoire de Claude. Ajoutez-le en un clic depuis claude.ai/directory/flowstep. Consultez claude.ai.

Cursor
Claude Code

Nécessite Cursor v0.43+

Étape 1 : ajouter le serveur

Cliquez sur Add Flowstep to Cursor pour l’installer en un clic, ou 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 avoir enregistré le fichier.

Étape 2 : s’authentifier

Ouvrez le panneau MCP de Cursor (Settings → MCP) et cliquez sur Connect à côté de Flowstep. Cursor ouvre votre navigateur sur la page de connexion Flowstep. Connectez-vous avec vos identifiants Flowstep (e-mail et mot de passe, ou Google), puis cliquez sur Allow sur l’écran de consentement. Le navigateur vous redirige vers Cursor, qui enregistre 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 : effectuer un appel d’outil

Dans une conversation Cursor, demandez :

« List my Flowstep files »

Cursor appelle list-files et renvoie la liste de vos 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

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Cursor appelle ai-design-screens (qui crée un nouveau fichier et génère les écrans en une seule étape), puis get-screen-image. La conception générée s’affiche en ligne dans la conversation.

Nécessite la CLI Claude Code

Étape 1 : ajouter le serveur

Exécutez cette commande dans votre projet :

claude mcp add --transport http flowstep https://api.flowstep.ai/mcp

Pour partager le serveur avec votre équipe, ajoutez-le plutôt au fichier .mcp.json à la racine de votre projet :

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

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

Étape 2 : s’authentifier

Exécutez n’importe quel outil Flowstep depuis une conversation Claude Code. Lors de la première utilisation, Claude Code ouvre votre navigateur sur la page de connexion Flowstep. Connectez-vous avec vos identifiants Flowstep (e-mail et mot de passe, ou Google), puis cliquez sur Allow sur l’écran de consentement. Le navigateur vous redirige vers Claude Code, qui enregistre le jeton automatiquement. Tapez /mcp dans Claude Code pour vérifier que Flowstep est connecté.

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 : effectuer un appel d’outil

Dans une conversation Claude Code, demandez :

« List my Flowstep files »

Claude Code appelle list-files et renvoie la liste de vos 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

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Claude Code appelle ai-design-screens (qui crée un nouveau fichier et génère les écrans en une seule étape), puis get-screen-image. La conception générée s’affiche en ligne dans la conversation.

ai-design-screens et les autres outils de conception IA utilisent votre quota de messages Flowstep. Lister, lire et afficher des écrans est gratuit. Consultez Limites d’utilisation.

Étapes suivantes

Référence des outils : documentation complète des entrées et sorties des 22 outils
Exemples : workflows en plusieurs étapes
Autres clients : Windsurf, Codex, Claude Desktop, claude.ai

Premiers pas

Utiliser Flowstep

Équipes et organisations

Export et intégrations

Serveur MCP

Facturation et forfaits

Sécurité et confidentialité

Démarrage rapide MCP

Prérequis

Étape 1 : ajouter le serveur

Étape 2 : s’authentifier

Étape 3 : effectuer un appel d’outil

Étape 4 : générer un écran

Étape 1 : ajouter le serveur

Étape 2 : s’authentifier

Étape 3 : effectuer un appel d’outil

Étape 4 : générer un écran

Étapes suivantes

​Prérequis

​Étape 1 : ajouter le serveur

​Étape 2 : s’authentifier

​Étape 3 : effectuer un appel d’outil

​Étape 4 : générer un écran

​Étape 1 : ajouter le serveur

​Étape 2 : s’authentifier

​Étape 3 : effectuer un appel d’outil

​Étape 4 : générer un écran

​Étapes suivantes

Prérequis

Étape 1 : ajouter le serveur

Étape 2 : s’authentifier

Étape 3 : effectuer un appel d’outil

Étape 4 : générer un écran

Étape 1 : ajouter le serveur

Étape 2 : s’authentifier

Étape 3 : effectuer un appel d’outil

Étape 4 : générer un écran

Étapes suivantes