> ## 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. # Référence des outils MCP > Schéma d'entrée, forme de sortie et exemples pour tous les 20 outils MCP Flowstep. Tous les outils retournent un tableau `content` de blocs de contenu MCP. Les outils texte retournent `{ type: "text", text: "" }`. Les outils image retournent `{ type: "image", data: "", mimeType: "image/png" }`. En cas d'erreur, `isError: true` est défini et le bloc texte contient le message d'erreur. *** ## Outils de fichier ### `list-files` Lister les fichiers Flowstep de l'utilisateur actuel. **Entrée** | Paramètre | Type | Par défaut | Description | | ----------------- | ----------------- | ---------- | ------------------------------ | | `orderByCreation` | `boolean` | `true` | Ordre par date de création | | `limit` | `integer` (1–100) | `20` | Nombre de fichiers à retourner | | `offset` | `integer` (≥0) | `0` | Décalage de pagination | **Sortie** — Tableau JSON d'objets fichier. ```json theme={"system"} [ { "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "name": "Dashboard redesign", "created_at": "2026-04-30T15:02:13.120152+00:00", "updated_at": "2026-04-30T15:02:13.120152+00:00", "owner": true, "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0" } ] ``` *** ### `get-file` Récupérer un seul fichier par ID. Le contenu du fichier est intentionnellement omis — utilisez `get-screen` ou `get-screen-image` pour inspecter les écrans, et `get-design-guidelines` pour récupérer les consignes attachées. **Entrée** | Paramètre | Type | Description | | --------- | ------ | ------------- | | `id` | `uuid` | ID du fichier | **Sortie** — Objet fichier JSON. ```json theme={"system"} { "file": { "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "name": "Dashboard redesign", "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d", "created_at": "2026-04-30T15:02:13.120152+00:00", "updated_at": "2026-04-30T15:02:13.120152+00:00", "access_level": "private", "owner": true, "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0" }, "user_access_level": "write" } ``` *** ### `create-file` Créer un nouveau fichier Flowstep. **Entrée** | Paramètre | Type | Description | | --------- | ---------------- | -------------- | | `title` | `string` (min 1) | Nom du fichier | **Sortie** — Objet fichier JSON avec l'`id` du nouveau fichier. ```json theme={"system"} { "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "name": "Dashboard redesign", "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d", "created_at": "2026-04-30T15:02:13.120152+00:00", "updated_at": "2026-04-30T15:02:13.120152+00:00", "access_level": "private", "user_access_level": "write", "owner": true, "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0" } ``` Utilisez l'`id` retourné comme `fileId` dans les appels d'outil suivants. *** ### `update-file` Renommer un fichier. **Entrée** | Paramètre | Type | Description | | --------- | ---------------- | ------------- | | `id` | `uuid` | ID du fichier | | `name` | `string` (min 1) | Nouveau nom | **Sortie** — Objet fichier mis à jour de la même forme que `get-file`. ```json theme={"system"} { "file": { "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "name": "Dashboard redesign (v2)", "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d", "created_at": "2026-04-30T15:02:13.120152+00:00", "updated_at": "2026-04-30T15:02:13.120152+00:00", "access_level": "private", "owner": true, "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0" }, "user_access_level": "write" } ``` *** ### `delete-file` Supprimer définitivement un fichier. Le `name` que vous transmettez est vérifié par rapport au nom réel du fichier avant la suppression — s'il ne correspond pas, la suppression est interrompue. Cela empêche la suppression accidentelle d'un mauvais fichier. **Entrée** | Paramètre | Type | Description | | --------- | -------- | --------------------------------------------------------------------------------------- | | `id` | `uuid` | ID du fichier | | `name` | `string` | Nom actuel du fichier — doit correspondre exactement ou la suppression sera interrompue | **Sortie** — `"File deleted successfully"` C'est irréversible. Tous les écrans du fichier sont supprimés. *** ## Outils d'écran ### `list-screens` Lister tous les écrans générés pour un fichier. Utilisez les valeurs `screenId` retournées pour référencer les écrans dans `get-screen`, `get-screen-image`, `upload-attachment`, et comme `targets` dans `edit-design`, `regenerate-design`, ou `expand-design`. **Entrée** | Paramètre | Type | Description | | --------- | ------ | ------------- | | `fileId` | `uuid` | ID du fichier | **Sortie** — Tableau JSON de résumés d'écran. ```json theme={"system"} [ { "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe", "name": "Mobile login screen", "fidelity": "ui", "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button", "createdAt": "2026-04-30T15:02:37.444139+00:00" } ] ``` `name` est le nom d'écran assigné par l'utilisateur, ou `null` s'il n'est pas nommé. *** ### `get-screen` Récupérer le code JSX d'un écran pour vous permettre de modifier ou d'utiliser le code en dehors de Flowstep. Utilisez `get-screen-image` pour un aperçu visuel à la place. **Entrée** | Paramètre | Type | Description | | ---------- | ------ | ------------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | ID du fichier | | `screenId` | `uuid` | Le `screenId` retourné par `list-screens` ou du tableau `screenIds` retourné par un outil de conception | **Sortie** — L'écran en tant que code (JSX). Notez le commentaire de la première ligne qui est requis lors de l'utilisation de l'outil `add-screen`. ```json theme={"system"}
World Clock
Search cities...
...
; ``` *** ### `add-screen` Ajouter un nouvel écran à un fichier Flowstep à partir d'une chaîne JSX brute. **Entrée** | Paramètre | Type | Description | | ------------ | -------- | ---------------------------------------------------------------------------- | | `fileId` | `uuid` | ID du fichier | | `jsxContent` | `string` | JSX à ajouter au fichier en tant qu'écran | | `screenType` | `string` | Requis si le type d'écran n'est pas défini comme commentaire au début du JSX | **Note** - Un commentaire similaire à celui ci-dessous DOIT être présent comme première ligne du JSX car il est utilisé pour ajouter l'écran correctement. `screenType`, `name`, et `screenId` sont tous optionnels — `screenId` est utilisé (en interne) s'il est présent (par ex. lors de la transmission du JSX copié de la sortie `get-screen`) mais n'est pas obligatoire. Le nom de l'écran est extrait du champ `name` du commentaire (affiché comme « Copy of \ »), ou « Untitled » s'il est absent. `` **Sortie** — L'ID du nouvel écran ajouté. ```json theme={"system"} { "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" } ``` *** ### `get-screen-image` Rendre un écran au PNG et le retourner en tant qu'image intégrée. Nécessite un client qui prend en charge les blocs de contenu image. **Entrée** | Paramètre | Type | Description | | ---------- | ------ | ------------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | ID du fichier | | `screenId` | `uuid` | Le `screenId` retourné par `list-screens` ou du tableau `screenIds` retourné par un outil de conception | **Sortie** — Bloc de contenu image MCP (`image/png`). *** ## Outils IA `regenerate-design`, `expand-design`, et `edit-design` nécessitent un contexte de conception qui n'existe que sur les écrans générés à l'origine avec un tableau `designs`. Les écrans générés sans contexte de conception retourneront une erreur. Solution de contournement : utilisez `upload-attachment` pour rendre l'écran en tant qu'image, puis appelez `create-new-design` avec l'image dans `attachments` et un message décrivant les modifications souhaitées. ### `create-new-design` Générer une ou plusieurs conceptions d'écran à partir d'un prompt texte. Omettez `fileId` pour créer automatiquement un nouveau fichier. Bloque jusqu'à la fin de la génération ou jusqu'à expiration du délai (180 secondes). **Entrée** | Paramètre | Type | Par défaut | Description | | ------------- | --------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `fileId` | `uuid` | — | Fichier cible — omettez pour créer automatiquement un nouveau fichier | | `message` | `string` | — | Prompt décrivant les écrans à générer | | `attachments` | `AttachmentRequestData[]` (max 5) | `[]` | Pièces jointes pré-téléchargées — images, PDF ou fichiers de code. Téléchargez toujours via `upload-attachment` d'abord ; n'insérez pas le contenu du fichier dans le message | | `designs` | `DesignRequestData[]` | `[]` | Références de conception | **Sortie** — `{ fileId, screenIds }`. Transmettez chaque `screenId` à `get-screen-image` pour voir les résultats. ```json theme={"system"} { "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "screenIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"] } ``` *** ### `regenerate-design` Refaire les écrans existants à partir de zéro ou avec une variation de style. Nécessite au moins un `screenId` dans `targets`. Bloque jusqu'à la fin de la génération ou jusqu'à expiration du délai (180 secondes). **Entrée** | Paramètre | Type | Par défaut | Description | | ------------------ | ----------------------------------------------------------- | ---------- | --------------------------------------------------- | | `fileId` | `uuid` | — | Fichier cible | | `message` | `string` | — | Texte du prompt | | `targets` | `uuid[]` (min 1) | — | screenIds des écrans à régénérer | | `operationVariant` | `"different_layout" \| "different_style" \| "from_scratch"` | — | Variante de style optionnelle | | `designs` | `DesignRequestData[]` | `[]` | Références de conception (résolues automatiquement) | **Sortie** — `{ fileId, screenIds }`. Transmettez chaque `screenId` à `get-screen-image` pour voir les résultats. *** ### `expand-design` Ajouter des écrans de suivi à une conception existante. Nécessite au moins un `screenId` dans `targets` et un `operationVariant` obligatoire. Bloque jusqu'à la fin de la génération ou jusqu'à expiration du délai (180 secondes). **Entrée** | Paramètre | Type | Par défaut | Description | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | --------------------------------------------------- | | `fileId` | `uuid` | — | Fichier cible | | `message` | `string` | — | Texte du prompt | | `targets` | `uuid[]` (min 1) | — | screenIds des écrans à partir desquels développer | | `operationVariant` | `"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"` | — | **Requis** — type d'écran de suivi à générer | | `designs` | `DesignRequestData[]` | `[]` | Références de conception (résolues automatiquement) | **Sortie** — `{ fileId, screenIds }`. Transmettez chaque `screenId` à `get-screen-image` pour voir les résultats. *** ### `edit-design` Modifier les écrans existants via un prompt. Nécessite au moins un `screenId` dans `targets`. Bloque jusqu'à la fin de la génération ou jusqu'à expiration du délai (180 secondes). **Entrée** | Paramètre | Type | Par défaut | Description | | ------------------ | ------------------------------------------------ | ---------- | ------------------------------------------------------------------------------------- | | `fileId` | `uuid` | — | Fichier cible | | `message` | `string` | — | Instructions décrivant les modifications à appliquer | | `targets` | `uuid[]` (min 1) | — | screenIds des écrans à modifier | | `operationVariant` | `"dark_theme" \| "light_theme" \| "make_pretty"` | — | Raccourci de style optionnel | | `attachments` | `AttachmentRequestData[]` (max 5) | `[]` | Pièces jointes pré-téléchargées. Téléchargez toujours via `upload-attachment` d'abord | | `designs` | `DesignRequestData[]` | `[]` | Références de conception (résolues automatiquement) | **Sortie** — `{ fileId, screenIds }`. Transmettez chaque `screenId` à `get-screen-image` pour voir les résultats. *** ### `upload-attachment` Télécharger un fichier à utiliser comme pièce jointe dans `create-new-design` ou `edit-design`. Retourne `{ id, path, type, mimeType }` — transmettez cet objet directement dans le tableau `attachments`. Deux modes : **Mode 1 — Écran par ID** Transmettez `screenId` et `fileId`. Le serveur récupère l'état de l'écran de la base de données et le rend en tant qu'image. | Paramètre | Type | Description | | ---------- | ------ | --------------------------------------- | | `fileId` | `uuid` | Fichier contenant l'écran (obligatoire) | | `screenId` | `uuid` | Écran à rendre | **Mode 2 — Fichier externe** Transmettez le contenu du fichier directement. Les fichiers binaires doivent être codés en base64 ; les fichiers texte (y compris le code source) sont transmis en tant que chaînes UTF-8 simples. | Paramètre | Type | Description | | ---------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | | `fileData` | `string` | Contenu du fichier — base64 pour binaire, chaîne UTF-8 pour texte | | `fileName` | `string` | Nom de fichier d'origine | | `mimeType` | `"image/jpeg" \| "image/png" \| "image/webp" \| "application/pdf" \| "text/plain" \| "text/javascript"` | Type MIME. Utilisez `text/javascript` pour les fichiers `.jsx`, `.tsx`, `.js`, `.ts` | Taille de fichier maximale : **3 MB**. Pour les grandes images, préférez `image/jpeg` à `image/png`. **Sortie** ```json theme={"system"} { "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890", "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890", "type": "image", "mimeType": "image/jpeg" } ``` `type` est `"image"` pour les téléchargements image/PDF et `"document"` pour les fichiers texte/code. *** ## Outils de chat ### `get-chat-history` Récupérer l'historique des messages de chat pour un fichier. **Entrée** | Paramètre | Type | Description | | --------- | ------ | ------------- | | `fileId` | `uuid` | ID du fichier | **Sortie** — Objet JSON avec un tableau `messages`. Chaque message possède un `type` (`"request"` ou `"response"`), un `author` (`"human"` ou `"ai"`), et un `content_type` (`"text"`, `"summary"`, ou `"followup"`). ```json theme={"system"} { "messages": [ { "id": "453f593d-2380-425b-ba29-127db08d6a8e", "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b", "type": "request", "status": "success", "content": "Generate a simple mobile login screen with email and password fields", "author": "human", "content_type": "text", "sequence": 1, "request_message_id": null, "targets": [], "attachments": [] }, { "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf", "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b", "type": "response", "status": "success", "content": "Generated a mobile login screen with email and password input fields, sign in button, remember me checkbox, forgot password link, social login options (Apple/Google), and sign up link.", "author": "ai", "content_type": "summary", "sequence": 7, "request_message_id": "453f593d-2380-425b-ba29-127db08d6a8e", "targets": [{ "target_id": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" }], "attachments": [] } ] } ``` *** ## Outils de conception ### `get-design-guidelines` Récupérer les consignes de conception stockées pour un fichier. **Entrée** | Paramètre | Type | Par défaut | Description | | ------------ | -------- | ---------- | ----------------- | | `resourceId` | `uuid` | — | ID du fichier | | `linkedTo` | `"file"` | `"file"` | Type de ressource | **Sortie** ```json theme={"system"} { "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter", "linkedTo": "file" } ``` `guidelines` est `null` si aucune consigne n'a été définie. *** ### `update-design-guidelines` Définir ou remplacer les consignes de conception pour un fichier. Les consignes sont transmises en tant que chaîne texte simple au format `design.md` de Google — ne transmettez pas un objet ou JSON. Le serveur effectue une validation souple et peut retourner une section `Warnings:` dans la réponse listant les problèmes (clés inconnues, couleurs non-hex) qui ont été acceptés mais peuvent être ignorés par l'IA. Présentez-les à l'utilisateur. **Entrée** | Paramètre | Type | Par défaut | Description | | ------------------ | ---------------- | ---------- | --------------------------------------------------------------------------------- | | `resourceId` | `uuid` | — | ID du fichier | | `designGuidelines` | `string` (min 1) | — | Contenu texte brut des consignes. Doit être une chaîne simple — non codée en JSON | | `linkedTo` | `"file"` | `"file"` | Type de ressource | **Règles de validation** * L'en-tête doit être ouvert et fermé correctement * Les lignes d'en-tête doivent être du YAML valide en style bloc * Le corps Markdown ne doit pas contenir de titres de section `##` dupliqués **Sortie** — `"Design guidelines updated successfully"`, optionnellement suivi d'une section `Warnings:`. *** ### `delete-design-guidelines` Effacer les consignes de conception pour un fichier. **Entrée** | Paramètre | Type | Par défaut | Description | | ------------ | -------- | ---------- | ----------------- | | `resourceId` | `uuid` | — | ID du fichier | | `linkedTo` | `"file"` | `"file"` | Type de ressource | **Sortie** — `"Design guidelines deleted successfully"` *** ## Outils Figma ### `import-figma` Importer un écran Figma dans un fichier Flowstep comme éléments modifiables sur son canevas. Réimporter le même écran le met à jour sur place. L'organisation du fichier doit avoir Figma connecté dans les paramètres Flowstep. **Entrée** | Paramètre | Type | Description | | ---------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `figmaUrl` | `string` | Lien vers un écran Figma spécifique. Dans Figma, cliquez avec le bouton droit sur l'écran et choisissez **Copy link to selection**. Un lien vers une page importe tous les écrans de haut niveau de cette page (limité à 20 écrans via MCP). | | `fileId` | `uuid` | Le fichier Flowstep dans lequel importer l'écran | **Sortie** — `{ fileId, screenId }`. `screenId` est l'id de l'élément écran importé — transmettez-le à `get-screen-image` pour voir le résultat. Lorsqu'une URL de page importe plusieurs écrans, `screenId` est `null` et `frameCount` est retourné à la place. ```json theme={"system"} { "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" } ``` *** ## Outils de facturation ### `get-plan-details` Récupérer le forfait actuel de l'utilisateur, l'état de l'abonnement et le quota restant. Ne prend aucune entrée. **Sortie** ```json theme={"system"} { "plan": { "name": "Starter", "code": "starter", "type": "paid" }, "subscription": { "isPaid": true, "isTrial": false, "startDate": "2025-01-01T00:00:00Z", "endDate": null, "trialDaysRemaining": null }, "limits": { "messages": { "daily": { "max": 50, "warn": 40 }, "monthly": { "max": 500, "warn": 400 }, "unlimited": false } }, "usage": { "messages": { "daily": 12, "monthly": 87 } }, "remaining": { "messages": { "daily": 38, "monthly": 413 } } } ``` Les limites varient selon le forfait. Appelez cet outil avant un lot de générations pour vérifier le quota disponible.