https://api.flowstep.ai/mcp (transport HTTP en flux continu). Vous n’avez aucun processus local à lancer ni aucune clé d’API à gérer : les clients se connectent avec votre compte Flowstep via OAuth.
Ce que vous pouvez faire
Le serveur expose 23 outils répartis en huit catégories :
Les quatre outils de conception par IA utilisent le même quota de messages que l’application Flowstep. Tous les autres outils sont gratuits. Consultez Limites d’utilisation.
Cas d’utilisation courants
Générer des écrans à partir d’un prompt : appelezai-generate-screens avec une description. Si vous omettez fileId, Flowstep crée le fichier et les écrans en une seule étape. Appelez get-screen-image pour chaque screenId renvoyé afin d’afficher le résultat en ligne.
Visualiser un composant React : importez votre source .jsx ou .tsx avec upload-attachment (mimeType: text/javascript), puis transmettez la pièce jointe renvoyée à ai-generate-screens avec un message décrivant l’écran. Flowstep lit le code source et génère une conception correspondante.
Itérer sur une conception : appelez ai-edit-screens avec un ou plusieurs screenId (ou des identifiants d’éléments individuels) et des instructions libres pour les modifier sur place. Utilisez ai-edit-screen-variant pour appliquer un préréglage, comme un thème sombre ou une autre mise en page, à un écran entier.
Développer un flux : appelez ai-generate-screen-variant pour ajouter l’écran suivant, un état d’erreur ou vide, ou une version web, tablette ou mobile d’un écran existant.
Travailler d’abord par le code : lisez n’importe quel écran sous forme de JSX avec get-screen-jsx, puis réintégrez votre propre JSX avec add-screen-jsx (nouvel écran) ou replace-screen-jsx (remplacement d’un écran existant). Ces outils sont gratuits.
Garder des résultats conformes à votre charte : utilisez update-design-guidelines pour stocker vos couleurs, typographies et règles de composants sur un fichier, sous forme de texte DESIGN.md. Les générations IA basées sur ce fichier les respectent. Relisez-les avec get-design-guidelines, ou supprimez-les avec delete-design-guidelines.
Importer depuis Figma : appelez import-figma avec un lien de cadre Figma et un fileId pour placer le cadre sur le canevas sous forme d’éléments modifiables. L’organisation du fichier doit d’abord avoir Figma connecté.
Vérifier votre quota : appelez get-plan-details pour voir votre forfait, votre utilisation et vos messages restants avant un lot de générations.
Point de terminaison
2026-07-28 du protocole MCP, annoncée à l’adresse https://api.flowstep.ai/.well-known/mcp.json. Les clients utilisant le protocole précédent 2025-11-25 se connectent au même point de terminaison.
Étapes suivantes
Démarrage rapide
Connectez un client et effectuez votre premier appel d’outil.
Authentification
Fonctionnement de la connexion OAuth 2.1 PKCE et de l’approbation.
Outils
Référence complète des entrées et sorties des 23 outils.
Exemples
Workflows de bout en bout pour les tâches courantes.