> ## Documentation Index > Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt > Use this file to discover all available pages before exploring further. # Serveur MCP Flowstep > Utilisez Flowstep comme serveur MCP pour générer, inspecter et gérer les designs d'interface utilisateur directement depuis Cursor, Claude Code ou tout client compatible MCP. Flowstep expose ses outils de conception via le [Model Context Protocol](https://modelcontextprotocol.io/), permettant à votre assistant IA de créer et d'itérer sur des écrans d'interface utilisateur sans quitter votre éditeur. Le serveur est hébergé à `https://api.flowstep.ai/mcp` (transport HTTP Streamable). Aucun processus local à exécuter. ## Ce que vous pouvez faire Le serveur expose 20 outils répartis en sept catégories : | Catégorie | Outils | | --------------------- | --------------------------------------------------------------------------------------------- | | **Fichiers** | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file` | | **Écrans** | `list-screens`, `get-screen`, `get-screen-image`, `add-screen` | | **Génération par IA** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` | | **Chat** | `get-chat-history` | | **Conception** | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines` | | **Figma** | `import-figma` | | **Facturation** | `get-plan-details` | ## Cas d'usage courants **Générer des écrans à partir d'un prompt** — appelez `create-new-design` avec une description. Flowstep crée le fichier et les écrans en une seule étape. Appelez `get-screen-image` avec les `screenIds` renvoyés pour voir le résultat en ligne. **Visualiser un composant React** — téléchargez votre fichier `.jsx` ou `.tsx` via `upload-attachment` (utilisez `mimeType: text/javascript`), puis transmettez la pièce jointe renvoyée à `create-new-design` avec un message décrivant le composant. Flowstep lit la source et génère un écran de conception correspondant. **Itérer sur une conception** — appelez `edit-design` avec un `screenId` cible et des instructions pour le modifier, ou `regenerate-design` pour refaire un écran de zéro. **Maintenir les directives de conception** — appelez `get-design-guidelines` pour récupérer vos règles de style actuelles (couleurs, typographie, espacement, ton), puis utilisez `update-design-guidelines` pour les maintenir à jour au fur et à mesure que votre conception évolue. Transmettre des directives cohérentes à `create-new-design` ou `edit-design` garantit que chaque écran généré reste conforme à votre marque. Utilisez `delete-design-guidelines` pour les réinitialiser entièrement. **Importer depuis Figma** — appelez `import-figma` avec un lien de cadre Figma et un `fileId` pour apporter le cadre dans un fichier Flowstep comme éléments modifiables. L'organisation du fichier doit d'abord avoir Figma connecté. **Auditer le quota** — appelez `get-plan-details` pour voir l'utilisation quotidienne et mensuelle restante avant de lancer un lot de générations. ## Point d'accès ``` https://api.flowstep.ai/mcp ``` Transport : HTTP Streamable. Modèle de session : sans état (chaque requête est indépendante, aucun ID de session). ## Prochaines étapes Premier appel d'outil en moins de 5 minutes avec Cursor. Comment OAuth 2.1 PKCE fonctionne et comment les jetons sont émis. Référence complète des entrées/sorties pour les 20 outils. Flux de travail de bout en bout pour les tâches courantes.