https://api.flowstep.ai/mcp (transport Streamable HTTP). Il n’y a aucun processus local à exécuter ni de clé API à gérer : les clients se connectent avec votre compte Flowstep via OAuth.
Ce que vous pouvez faire
Le serveur expose 22 outils répartis en huit catégories :
Les trois outils de conception IA utilisent la même allocation 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’une requête : appelezai-design-screens avec une description. Omettez fileId et Flowstep crée le fichier et les écrans en une seule étape. Appelez get-screen-image pour chaque screenId renvoyé afin de voir le résultat en ligne.
Visualiser un composant React : téléversez votre source .jsx ou .tsx avec upload-attachment (mimeType: text/javascript), puis transmettez la pièce jointe renvoyée à ai-design-screens avec un message décrivant l’écran. Flowstep lit la source et génère une conception correspondante.
Modifier une conception : appelez ai-design-screens avec un ou plusieurs screenId (ou des identifiants d’éléments individuels) dans elementIds et des instructions libres pour les modifier sur place. Le même appel peut aussi ajouter de nouveaux écrans, de sorte qu’une seule requête peut modifier un écran et en construire un autre. Utilisez ai-edit-screen-variant pour appliquer un préréglage, comme un thème sombre ou une mise en page différente, à un écran entier.
Étendre 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 en code : lisez n’importe quel écran en JSX avec get-screen-jsx, puis réécrivez votre propre JSX avec add-screen-jsx (nouvel écran) ou replace-screen-jsx (remplacement d’un écran existant). Pour utiliser vos propres images, téléversez-les avec upload-attachment et placez le assetUrl renvoyé dans votre JSX. Ces outils sont gratuits.
Préserver la cohérence avec votre marque : utilisez update-design-guidelines pour stocker vos couleurs, votre typographie et vos règles de composants sur un fichier, sous forme de texte DESIGN.md. Les générations par IA basées sur ce fichier les respectent. Relisez-les avec get-design-guidelines, ou effacez-les avec delete-design-guidelines.
Importer depuis Figma : appelez import-figma avec le lien d’un cadre Figma et un fileId pour apporter le cadre sur le canevas sous forme d’éléments modifiables. L’organisation propriétaire du fichier doit d’abord avoir Figma connecté.
Vérifier votre allocation : 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, qu’il annonce à https://api.flowstep.ai/.well-known/mcp.json. Les clients qui utilisent l’ancien protocole 2025-11-25 se connectent au même point de terminaison.
Étapes suivantes
Démarrage rapide
Connectez un client et exécutez 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 22 outils.
Exemples
Flux de travail de bout en bout pour les tâches courantes.