Référence des outils MCP

En cas de succès, tous les outils sauf get-screen-image renvoient leur résultat deux fois : sous forme de structuredContent (validé par rapport au schéma de sortie publié de l’outil), et sous forme du même objet sérialisé dans un bloc texte, { type: "text", text: "<json-string>" }, pour les clients qui ne lisent pas le contenu structuré. get-screen-image renvoie uniquement un bloc image MCP : { type: "image", data: "<base64>", mimeType: "image/png" }. En cas d’échec, isError: true est défini et le bloc texte contient un bref message d’erreur. Les erreurs sur lesquelles vous pouvez agir (un nom qui ne correspond pas lors d’une suppression, un lien Figma invalide, des consignes de conception invalides, un problème de pièce jointe ou un dépassement de délai de génération) expliquent ce qu’il faut corriger. Les autres échecs renvoient un message générique, comme Failed to list files.

Tarifs : les quatre outils de conception par IA, c’est-à-dire ai-generate-screens, ai-edit-screens, ai-generate-screen-variant et ai-edit-screen-variant, utilisent le même quota de messages que l’application Flowstep. Tous les autres outils sont gratuits. Consultez Limites d’utilisation.

Chaque outil publie également des annotations MCP qui indiquent à votre client ce qu’il fait. delete-file, delete-screen, delete-design-guidelines, replace-screen-jsx, ai-edit-screens et ai-edit-screen-variant sont marqués comme destructifs, car ils suppriment ou écrasent du contenu existant.

Outils de fichiers

`list-files`

Liste les métadonnées de vos fichiers Flowstep. Appelez cet outil en premier pour vérifier qu’un fichier pertinent n’existe pas déjà. Il ne renvoie aucun contenu d’écran : utilisez get-screen-image ou get-screen-jsx pour cela. Entrée

Paramètre	Type	Valeur par défaut	Description
`orderByCreation`	`boolean`	`true`	Trie du plus récent au plus ancien selon `created_at` (`true`) ou selon `updated_at` (`false`). Utilisez `false` pour retrouver les fichiers modifiés récemment
`limit`	`integer` (1–100)	`20`	Nombre maximal de fichiers renvoyés. Une page complète peut signifier que d’autres fichiers existent
`offset`	`integer` (≥0)	`0`	Nombre de fichiers à ignorer. La page suivante correspond à `offset + limit`

Sortie : { files }.

{
  "files": [
    {
      "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",
      "organisation_id": "0b7f3c9e-2d4a-4f1b-9a5e-6c8d7e1f2a3b",
      "shared_with_me": false,
      "owner": true,
      "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
    }
  ]
}

owner : true si vous avez créé le fichier.
shared_with_me : true si le fichier vous a été partagé directement, et pas seulement par l’intermédiaire de votre organisation.
url : ouvre le fichier dans l’éditeur Flowstep.

`get-file`

Obtient les métadonnées d’un fichier. Le contenu du fichier est volontairement omis : utilisez get-screen-image ou get-screen-jsx pour inspecter les écrans, et get-design-guidelines pour récupérer les consignes de conception associées. Si vous avez une invitation en attente pour le fichier, l’appel à get-file l’accepte. Entrée

Paramètre	Type	Description
`id`	`uuid`	ID du fichier

Sortie : { file, user_access_level }.

{
  "file": {
    "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",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "access_level": "private",
    "visibility": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

access_level : private, read ou write.
visibility : private, member ou public.
user_access_level : votre accès au fichier, soit read soit write.

`create-file`

Crée un fichier Flowstep vierge, sans écran. Pour créer un fichier et générer des écrans en une seule étape, appelez plutôt ai-generate-screens sans fileId. Utilisez create-file pour les workflows axés sur le code, suivi de add-screen-jsx. Entrée

Paramètre	Type	Description
`name`	`string` (min 1)	Nom affiché du nouveau fichier

Sortie : { file, user_access_level }, dans la même forme que get-file. owner vaut toujours true et user_access_level vaut toujours write. Utilisez le file.id renvoyé comme fileId dans les appels d’outils suivants.

`update-file`

Renomme un fichier. Entrée

Paramètre	Type	Description
`id`	`uuid`	ID du fichier
`name`	`string` (min 1)	Nouveau nom affiché

Sortie : { file, user_access_level }, dans la même forme que get-file.

`delete-file`

Supprime définitivement un fichier. Le name que vous transmettez est comparé au nom affiché actuel du fichier avant la suppression ; s’il ne correspond pas, la suppression est annulée. Cela évite de supprimer le mauvais fichier par erreur. Les agents sont instruits de vous demander confirmation au préalable. Entrée

Paramètre	Type	Description
`id`	`uuid`	ID du fichier
`name`	`string`	Nom affiché actuel du fichier : doit correspondre, sinon la suppression est annulée

Sortie : { "deleted": true }

Cette action est irréversible. Tous les écrans du fichier sont supprimés.

Outils d’écrans

`list-screens`

Liste les écrans d’un fichier, dans l’ordre du canevas. Appelez cet outil après list-files pour voir ce qui se trouve déjà dans un fichier. Utilisez les valeurs screenId renvoyées avec les autres outils d’écrans et les outils de conception par IA. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier

Sortie : { screens }.

{
  "screens": [
    {
      "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
      "name": "Mobile login screen",
      "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
      "fidelity": "ui"
    }
  ]
}

prompt : le dernier prompt de génération de l’écran, ou une chaîne vide s’il n’a jamais été généré (par exemple, un écran ajouté avec add-screen-jsx).
fidelity : lofi, hifi ou ui.

`get-screen-image`

Affiche un écran au format PNG et le renvoie sous forme d’image en ligne. Nécessite un client qui prend en charge les blocs de contenu image. Appelez-le une fois pour chaque screenId renvoyé par un outil de conception par IA, add-screen-jsx, replace-screen-jsx ou import-figma. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier
`screenId`	`uuid`	Un `screenId` issu de `list-screens` ou du tableau `screenIds` renvoyé par un outil de conception

Sortie : bloc de contenu image MCP (image/png). data est du base64 standard des octets PNG, et non une URI de données. Cet outil ne renvoie aucun structuredContent.

`get-screen-jsx`

Obtient un écran sous forme de JSX, ainsi que ses métadonnées, afin que vous puissiez développer à partir de celui-ci dans votre base de code, ou le modifier et le réintégrer avec replace-screen-jsx. Utilisez get-screen-image pour un aperçu visuel. Entrée

Paramètre	Type	Valeur par défaut	Description
`fileId`	`uuid`	—	ID du fichier
`screenId`	`uuid`	—	Un `screenId` issu de `list-screens` ou du tableau `screenIds` renvoyé par un outil de conception
`includeIds`	`boolean`	`false`	Inclut un attribut `data-id` sur les éléments de `jsx`. À utiliser lorsque vous avez besoin d’identifiants d’éléments à transmettre comme `elementIds` à `ai-generate-screens` (référence visuelle) ou à `ai-edit-screens` (périmètre de modification)

Sortie : { fileId, screenId, name, prompt, fidelity, screenType, colorTheme, jsx, fragments }.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0",
  "name": "World clock",
  "prompt": "A world clock screen with a city search and alert button",
  "fidelity": "ui",
  "screenType": "iphone-x-vertical",
  "colorTheme": "blue",
  "jsx": "<div className=\"bg-white text-zinc-950 w-full h-fit\">\n  <div className=\"flex p-6 flex-col gap-6\">\n    …\n  </div>\n</div>",
  "fragments": []
}

jsx : balisage uniquement. Les attributs data-id ne sont inclus que lorsque includeIds vaut true.
prompt : le dernier prompt de génération, ou une chaîne vide si l’écran n’a jamais été généré.
fragments : éléments communs stockés sur l’écran, comme une barre de navigation, un en-tête ou un logo, sous forme d’objets { purpose, markup }. Vide s’il n’y en a pas. Transmettez-les à replace-screen-jsx pour les conserver ou les mettre à jour.

Consultez Valeurs des champs d’écran pour les valeurs de fidelity, screenType et colorTheme.

`add-screen-jsx`

Ajoute un nouvel écran à un fichier à partir de JSX que vous avez écrit. C’est la voie axée sur le code, et elle est gratuite. Utilisez ai-generate-screens si vous voulez que l’IA de Flowstep conçoive l’écran. add-screen-jsx crée toujours un nouvel écran : pour écraser un écran existant, utilisez replace-screen-jsx. Si le nouvel écran est basé sur un écran existant, partez de get-screen-jsx (sans includeIds) pour name, fidelity, screenType, colorTheme et jsx, puis modifiez ce qui doit changer. Entrée

Paramètre	Type	Valeur par défaut	Description
`fileId`	`uuid`	—	ID du fichier
`name`	`string` (1–100 caractères)	—	Nom affiché facultatif. Omettez-le pour que l’écran soit nommé automatiquement « Screen N »
`fidelity`	`string`	`"ui"`	Fidélité de l’écran
`screenType`	`string`	—	Obligatoire : l’appareil ou la fenêtre pour lesquels l’écran est conçu
`colorTheme`	`string`	`"default"`	Thème de couleurs
`jsx`	`string`	—	Balisage JSX uniquement. Les attributs `data-id` éventuels sont ignorés : le nouvel écran reçoit de nouveaux identifiants d’éléments

Sortie : { fileId, screenId }. Appelez get-screen-image avec le screenId pour voir le résultat.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf"
}

`replace-screen-jsx`

Écrase un écran existant avec du JSX que vous avez écrit. L’écran conserve son screenId et sa position sur le canevas ; les éléments imbriqués reçoivent de nouveaux identifiants. C’est la voie axée sur le code, et elle est gratuite. Utilisez ai-edit-screens ou ai-edit-screen-variant pour des modifications par IA, et add-screen-jsx pour créer un nouvel écran à la place. Partez de get-screen-jsx (sans includeIds), puis modifiez ce qui doit changer. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier
`screenId`	`uuid`	L’écran à écraser
`jsx`	`string`	Balisage JSX uniquement. Les attributs `data-id` éventuels sont ignorés
`name`	`string` (1–100 caractères)	Facultatif. Omettez-le pour conserver le nom actuel
`fidelity`	`string`	Facultatif. Omettez-le pour conserver la fidélité actuelle
`screenType`	`string`	Facultatif. Omettez-le pour conserver le type d’écran actuel
`colorTheme`	`string`	Facultatif. Omettez-le pour conserver le thème de couleurs actuel
`fragments`	`{ purpose, markup }[]`	Facultatif. Éléments communs provenant de `get-screen-jsx`. Omettez-le pour conserver les fragments actuels, ou transmettez `[]` pour les supprimer

Sortie : { fileId, screenId }. Appelez get-screen-image avec le screenId pour voir le résultat.

Cette action remplace le contenu de l’écran sur place.

`rename-screen`

Renomme l’étiquette d’un écran sur le canevas, c’est-à-dire le nom affiché par list-screens et dans l’éditeur. Cette action modifie uniquement l’étiquette, et non la mise en page, la taille ou le contenu de l’écran. Pour ces modifications, utilisez ai-edit-screens. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier
`screenId`	`uuid`	Le `screenId` renvoyé par `list-screens`
`name`	`string` (1–100 caractères)	Nouveau nom d’écran. Les espaces en début et en fin sont supprimés

Sortie : { screenId, name }.

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe", "name": "Checkout — empty cart" }

`delete-screen`

Supprime définitivement un écran d’un fichier. Le name que vous transmettez est comparé au nom affiché actuel de l’écran ; s’il ne correspond pas, la suppression est annulée. Les agents sont instruits de vous demander confirmation au préalable. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier
`screenId`	`uuid`	L’écran à supprimer
`name`	`string`	Nom affiché actuel de l’écran : doit correspondre, sinon la suppression est annulée

Sortie : { "deleted": true }

Valeurs des champs d’écran

get-screen-jsx renvoie, et add-screen-jsx et replace-screen-jsx acceptent, ces valeurs :

Champ	Valeurs
`fidelity`	`lofi`, `hifi`, `ui`
`screenType`	`web`, `desktop`, `desktop-large`, `desktop-medium`, `desktop-small`, `tablet`, `ipad-tablet-horizontal`, `ipad-tablet-vertical`, `android-tablet-horizontal`, `android-tablet-vertical`, `mobile_ios`, `mobile_android`, `iphone-vertical`, `iphone-horizontal`, `iphone-x-vertical`, `iphone-x-horizontal`, `android-vertical`, `android-horizontal`, `android-small-vertical`, `android-small-horizontal`
`colorTheme`	`default`, `defaultDark`, `blue`, `blueDark`, `ice`, `iceDark`, `grayscale`, `grayscaleDark`, `green`, `greenDark`, `orange`, `orangeDark`, `red`, `redDark`, `rose`, `roseDark`, `violet`, `violetDark`, `yellow`, `yellowDark`

Outils de consignes de conception

Les consignes de conception sont du texte DESIGN.md stocké sur un fichier. Lorsqu’elles sont définies, elles sont injectées dans chaque génération IA de ce fichier. Consultez Consignes de conception.

`get-design-guidelines`

Obtient les consignes de conception associées à un fichier. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier

Sortie : { guidelines }.

{
  "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter"
}

guidelines vaut null si aucune consigne n’a été définie.

`update-design-guidelines`

Définit ou remplace les consignes de conception d’un fichier. Transmettez les consignes sous forme de chaîne de texte brut, au format DESIGN.md de Google, et non sous forme d’objet ou de JSON. Si vous lisez les consignes depuis un fichier, transmettez le texte de ce fichier. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier
`designGuidelines`	`string` (min 1)	Texte brut des consignes. Doit être une chaîne simple, et non encodée en JSON

Règles de validation

Le frontmatter doit être correctement ouvert et fermé
Les lignes du frontmatter doivent être du YAML valide au format bloc
Le corps Markdown ne doit pas contenir de titres de section ## en double

Si la validation échoue, l’appel renvoie une erreur qui commence par Invalid design guidelines:. Sortie : { updated, warnings? }.

{ "updated": true, "warnings": ["…"] }

warnings liste les problèmes de validation non bloquants (clés inconnues, couleurs non hexadécimales) qui ont été acceptés mais que l’IA risque d’ignorer. Il est omis lorsqu’il n’y en a aucun. Signalez-les à l’utilisateur.

`delete-design-guidelines`

Supprime les consignes de conception d’un fichier. Supprimer des consignes inexistantes ne produit aucun effet. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier

Sortie : { "deleted": true }

Outils de chat

`get-chat-history`

Obtient la conversation de conception associée à un fichier, c’est-à-dire le chat Flowstep du fichier, et non la conversation de votre client MCP. Utilisez-le pour reprendre un travail antérieur sur le fichier. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier

Sortie : { messages }. messages est vide lorsque vous n’avez aucune conversation de conception sur le fichier. Chaque message possède un type ("request" ou "response"), un author ("human" ou "ai") et un content_type. Les messages de réponse utilisent "text", "summary" ou "followup".

{
  "messages": [
    {
      "id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "type": "request",
      "status": "success",
      "content": "Generate a simple mobile login screen with email and password fields",
      "author": "human",
      "content_type": "text",
      "sequence": 1,
      "targets": [],
      "attachments": []
    },
    {
      "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
      "type": "response",
      "status": "success",
      "content": "Generated a mobile login screen with email and password input fields, a sign in button, and a 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" }]
    }
  ]
}

Outils de pièces jointes

`upload-attachment`

Importe un fichier de référence à utiliser comme pièce jointe dans ai-generate-screens ou ai-edit-screens (ai-generate-screen-variant et ai-edit-screen-variant n’acceptent pas de pièces jointes). Les octets du fichier ne transitent jamais par le modèle, et le serveur ne récupère jamais d’URL en votre nom. Pour référencer une page web, incluez plutôt son URL dans le message de l’outil de conception. Il existe deux modes : utilisez-en un seul, et ne les combinez pas. Mode A : fichiers et images (mimeType + fileName) Un processus obligatoire en trois étapes pour toute image, tout PDF ou tout fichier texte volumineux :

Appelez upload-attachment avec uniquement mimeType et fileName (par exemple image/png et dog.png). La réponse est un téléversement préparé, et non un fichier stocké :

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "type": "image",
  "mimeType": "image/png",
  "signedUrl": "https://…",
  "uploadCommand": "curl -sS -f -X PUT '…' -H 'Content-Type: image/png' -H 'x-metadata: …' --data-binary @LOCAL_FILE_PATH",
  "nextStep": "…"
}

Remplacez LOCAL_FILE_PATH dans uploadCommand par le chemin absolu de votre fichier, puis exécutez cette commande exacte dans votre shell. Elle doit se terminer avec le code 0. Le jeton de signedUrl n’autorise que ce téléversement unique. Ignorer cette étape laisse le stockage vide, et l’outil de conception échoue à sa vérification préalable.
Transmettez uniquement { id, path, type } dans le tableau attachments de l’outil de conception, et non signedUrl, uploadCommand ou nextStep.

Pour joindre un fichier distant, téléchargez-le d’abord vers un chemin local (par exemple avec curl), puis suivez les mêmes trois étapes. Ne transmettez jamais d’URL à upload-attachment.

Paramètre	Type	Description
`mimeType`	enum	Type MIME du fichier. Une valeur parmi `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`. Utilisez `text/javascript` pour les fichiers `.jsx`, `.tsx`, `.js` et `.ts`
`fileName`	`string` (min 1)	Nom de fichier d’origine avec son extension, par exemple `cat.png` ou `design.md`

Mode B : texte court (text + mimeType) Téléverse un texte déjà présent dans le contexte, sans commande shell. La réponse est directement utilisable :

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "type": "document",
  "mimeType": "text/plain"
}

Paramètre	Type	Description
`text`	`string` (max 64 000 caractères)	Contenu texte brut. Fichiers texte uniquement : ne l’utilisez pas pour les images ou les PDF. Plus de 64 000 caractères ? Utilisez le mode A
`mimeType`	enum	Une valeur parmi `text/markdown`, `text/plain`, `text/javascript`

Transmettez le { id, path, type } obtenu dans le tableau attachments de ai-generate-screens ou ai-edit-screens. La taille maximale d’un fichier est de 3 Mo dans les deux modes, et les PDF sont limités à 100 pages. type vaut "image" pour les fichiers image et "document" pour les PDF et les fichiers texte.

Outils Figma

`import-figma`

Importe un cadre Figma dans un fichier Flowstep sous forme d’éléments modifiables sur son canevas. Chaque importation ajoute un nouvel écran : importer deux fois le même cadre vous donne deux écrans. Supprimez donc l’ancien avec delete-screen si vous vouliez le remplacer. L’organisation du fichier doit avoir Figma connecté dans les paramètres de Flowstep. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	Le fichier Flowstep dans lequel importer le cadre. Ce n’est pas la clé de fichier Figma présente dans `figmaUrl`
`figmaUrl`	`string`	Lien vers un cadre Figma précis, avec un `node-id`. Dans Figma, faites un clic droit sur le cadre et choisissez Copy/Paste as → Copy link to selection. Un lien vers une page importe tous les cadres de premier niveau de cette page (limité à 20 cadres via MCP)

Sortie : { fileId, screenId, frameCount? }. screenId est l’écran importé : transmettez-le à get-screen-image pour voir le résultat. Lorsqu’une URL de page importe plusieurs cadres, screenId vaut null et frameCount est renvoyé à la place : appelez alors list-screens, puis get-screen-image pour chaque nouvel écran.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe"
}

Outils de forfait et de facturation

`get-plan-details`

Obtient le forfait Flowstep de votre organisation, son statut d’abonnement, son utilisation et son quota restant. Ne prend aucune entrée : l’organisation est déterminée à partir de l’utilisateur connecté. Utilisez-le pour vérifier votre quota avant d’appeler les outils de conception par IA. Sortie : { plan, subscription, limits, usage, remaining }.

Champ	Description
`plan`	`{ name, code, type }`. `type` vaut `"free"` ou `"paid"`
`subscription`	`{ isPaid, isTrial, startDate, endDate, trialDaysRemaining }`
`limits`	Limites par fonctionnalité, indexées par fonctionnalité (par exemple `messages`). Chacune comporte des objets facultatifs `daily` et `monthly` avec les valeurs `max` et `warn`, ainsi qu’un indicateur `unlimited`
`usage`	Utilisation par fonctionnalité jusqu’à présent, sous la forme `{ daily, monthly }`
`remaining`	Quota restant par fonctionnalité, sous la forme `{ daily, monthly }`. Omis pour les fonctionnalités illimitées

Les limites varient selon le forfait. Consultez Tarifs et Limites d’utilisation.

Outils de conception par IA

Ces quatre outils conçoivent à partir d’une description ou d’un préréglage. Ils n’acceptent jamais de JSX et ne le réutilisent jamais. Chaque appel utilise le même quota de messages que l’application Flowstep, et l’appel attend la fin de la génération ou le dépassement de délai (180 secondes).

Outil	Utilisation
`ai-generate-screens`	Générer un ou plusieurs nouveaux écrans à partir d’une description
`ai-edit-screens`	Modifier sur place un ou plusieurs écrans existants à partir d’instructions libres
`ai-generate-screen-variant`	Ajouter une étape suivante, un état d’erreur ou vide, ou une variante de plateforme d’un écran existant
`ai-edit-screen-variant`	Appliquer un préréglage de modification ou de refonte à un écran existant entier

Les quatre renvoient { status, fileId, screenIds, designGuidelinesUpdated }. Appelez get-screen-image une fois pour chaque screenId afin de voir le résultat.

designGuidelinesUpdated : un bref résumé de la modification lorsque les consignes DESIGN.md du fichier ont été mises à jour automatiquement pendant ce tour ; sinon null.

`ai-generate-screens`

Génère un ou plusieurs nouveaux écrans à partir d’une description textuelle. Omettez fileId pour créer automatiquement un nouveau fichier ; transmettez fileId pour ajouter des écrans à un fichier existant. Cet outil crée toujours de nouveaux écrans : il ne modifie jamais les écrans existants sur place. Entrée

Paramètre	Type	Valeur par défaut	Description
`fileId`	`uuid`	—	Fichier cible. Omettez-le pour créer automatiquement un nouveau fichier. Obligatoire lorsque `elementIds` est défini
`message`	`string`	—	Description des écrans à générer. Incluez ici les URL de pages web que vous voulez que Flowstep prenne en compte
`elementIds`	`uuid[]`	`[]`	Références visuelles facultatives : `screenId` issus de `list-screens` et/ou `data-id` d’éléments issus de `get-screen-jsx` (avec `includeIds`). Elles servent uniquement d’inspiration de style et de mise en page ; elles ne sont pas modifiées, et leur JSX n’est pas réutilisé
`attachments`	`{ id, path, type }[]` (max 5)	`[]`	Fichiers issus de `upload-attachment` : images, PDF, ou fichiers de code et de texte. N’intégrez pas le contenu des fichiers dans le `message`

Sortie : { status, fileId, screenIds, designGuidelinesUpdated, reply? }.

{
  "status": "generated",
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"],
  "designGuidelinesUpdated": null
}

status : "generated" lorsque des écrans ont été créés. "chat" lorsque Flowstep a répondu sans créer d’écran ; dans ce cas, reply contient sa réponse et screenIds est vide. Si votre demande est ambiguë, votre agent doit vous demander des précisions et rappeler l’outil.

`ai-edit-screens`

Modifie sur place un ou plusieurs écrans existants à partir d’une instruction textuelle : thème, texte, mise en page ou modifications coordonnées sur plusieurs écrans. Vous pouvez cibler des écrans entiers ou des éléments individuels à l’intérieur de ceux-ci. Pour une modification prédéfinie d’un écran entier, ai-edit-screen-variant est plus simple. Entrée

Paramètre	Type	Valeur par défaut	Description
`fileId`	`uuid`	—	Fichier cible
`message`	`string`	—	Instructions décrivant les modifications à apporter. Incluez ici les URL de pages web que vous voulez que Flowstep prenne en compte
`elementIds`	`uuid[]` (min 1)	—	Ce qui doit être modifié : `screenId` issus de `list-screens` et/ou `data-id` d’éléments issus de `get-screen-jsx` (avec `includeIds`). Un `screenId` modifie l’écran entier
`attachments`	`{ id, path, type }[]` (max 5)	`[]`	Fichiers issus de `upload-attachment`

Sortie : { status, fileId, screenIds, designGuidelinesUpdated, reply? }, avec le même comportement de status et reply que ai-generate-screens.

Cette action remplace le contenu des écrans ciblés sur place.

`ai-generate-screen-variant`

Ajoute un nouvel écran dérivé d’exactement un écran existant : l’étape suivante du parcours, un état d’erreur ou vide, ou une version pour une autre plateforme. L’écran d’origine reste inchangé. Pour ajouter un écran qui n’est pas une variante d’un écran existant (par exemple, un écran de paramètres), utilisez ai-generate-screens avec un fileId. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	Fichier cible
`screenId`	`uuid`	L’écran existant à partir duquel dériver
`operationVariant`	enum	Obligatoire : la relation entre le nouvel écran et l’écran existant

`operationVariant`	Ajoute
`next_screen`	L’écran suivant du parcours utilisateur
`error_state`	Un état d’erreur de l’écran
`empty_state`	Un état vide de l’écran
`web_version`	Une version web
`mobile_version`	Une version mobile
`tablet_version`	Une version tablette
`mobile_ios_version`	Une version iOS
`mobile_android_version`	Une version Android

Sortie : { status, fileId, screenIds, designGuidelinesUpdated }. status vaut toujours "generated".

`ai-edit-screen-variant`

Modifie sur place exactement un écran existant à l’aide d’un préréglage : appliquer un thème ou un rendu plus soigné, essayer une autre mise en page ou un autre style visuel, ou le refondre entièrement. Pour des instructions libres ou une modification précise d’éléments individuels, utilisez ai-edit-screens. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	Fichier cible
`screenId`	`uuid`	L’écran existant à modifier
`operationVariant`	enum	Obligatoire : le préréglage de modification ou de refonte à appliquer

`operationVariant`	Type	Effet
`dark_theme`	Modification	Passer l’écran à un thème sombre
`light_theme`	Modification	Passer l’écran à un thème clair
`make_pretty`	Modification	Soigner le rendu visuel de l’écran
`different_layout`	Refonte	Essayer une autre mise en page
`different_style`	Refonte	Essayer un autre style visuel
`from_scratch`	Refonte	Refondre l’écran entièrement

Sortie : { status, fileId, screenIds, designGuidelinesUpdated }. status vaut toujours "generated".

Cette action remplace le contenu de l’écran sur place.

Outils renommés

Les noms de certains outils ont changé en septembre 2026. Si vos prompts, scripts ou instructions d’agent utilisent les anciens noms, mettez-les à jour :

Ancien nom	Nouveau nom
`get-screen`	`get-screen-jsx`
`add-screen`	`add-screen-jsx`
`replace-screen`	`replace-screen-jsx`
`create-new-design`	`ai-generate-screens`
`edit-design` (instructions libres)	`ai-edit-screens`
`edit-design` (avec un préréglage `operationVariant`)	`ai-edit-screen-variant`
`regenerate-design`	`ai-edit-screen-variant`
`expand-design`	`ai-generate-screen-variant`

Les entrées ont aussi changé : les outils de conception par IA acceptent elementIds (ou un screenId unique pour les outils de variantes) au lieu de targets ; add-screen-jsx accepte jsx et des champs de métadonnées explicites au lieu de jsxContent avec un commentaire de métadonnées ; create-file accepte name au lieu de title ; et les outils de consignes de conception acceptent fileId au lieu de resourceId et linkedTo.

​Outils de fichiers

​list-files

​get-file

​create-file

​update-file

​delete-file

​Outils d’écrans

​list-screens

​get-screen-image

​get-screen-jsx

​add-screen-jsx

​replace-screen-jsx

​rename-screen

​delete-screen

​Valeurs des champs d’écran

​Outils de consignes de conception

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Outils de chat

​get-chat-history

​Outils de pièces jointes

​upload-attachment

​Outils Figma

​import-figma

​Outils de forfait et de facturation

​get-plan-details

​Outils de conception par IA

​ai-generate-screens

​ai-edit-screens

​ai-generate-screen-variant

​ai-edit-screen-variant

​Outils renommés

Outils de fichiers

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Outils d’écrans

`list-screens`

`get-screen-image`

`get-screen-jsx`

`add-screen-jsx`

`replace-screen-jsx`

`rename-screen`

`delete-screen`

Valeurs des champs d’écran

Outils de consignes de conception

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Outils de chat

`get-chat-history`

Outils de pièces jointes

`upload-attachment`

Outils Figma

`import-figma`

Outils de forfait et de facturation

`get-plan-details`

Outils de conception par IA

`ai-generate-screens`

`ai-edit-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

Outils renommés