Référence des outils MCP

En cas de réussite, chaque outil sauf get-screen-image renvoie son 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 de texte, { type: "text", text: "<json-string>" }, pour les clients qui ne lisent pas le contenu structuré. get-screen-image ne renvoie qu’un bloc d’image MCP : { type: "image", data: "<base64>", mimeType: "image/png" }. En cas d’échec, isError: true est défini et le bloc de texte contient un bref message d’erreur. Les erreurs sur lesquelles vous pouvez agir (une incohérence de nom lors d’une suppression, un lien Figma invalide, des directives de conception non valides, un problème de pièce jointe ou un délai de génération dépassé) expliquent quoi corriger. Les autres échecs renvoient un message générique, tel que Failed to list files.

Tarification : les trois outils de conception IA (ai-design-screens, ai-generate-screen-variant et ai-edit-screen-variant) utilisent la même allocation de messages que l’application Flowstep. Tous les autres outils sont gratuits. Consultez Limites d’utilisation.

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

Outils de fichiers

`list-files`

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

Paramètre	Type	Par défaut	Description
`orderByCreation`	`boolean`	`true`	Trier du plus récent au plus ancien selon `created_at` (`true`) ou selon `updated_at` (`false`). Utilisez `false` pour trouver les fichiers modifiés récemment
`limit`	`integer` (1–100)	`20`	Nombre maximal de fichiers renvoyés. Une page pleine peut signifier qu’il existe d’autres fichiers
`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 a été partagé directement avec vous, et non seulement par l’intermédiaire de votre organisation.
url : ouvre le fichier dans l’éditeur Flowstep.

`get-file`

Obtenez les métadonnées d’un seul 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 directives associées. Si vous avez une invitation en attente pour le fichier, appeler 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 ou write.

`create-file`

Créez 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-design-screens sans fileId. Utilisez create-file pour les flux de travail « code d’abord », suivi de add-screen-jsx. Entrée

Paramètre	Type	Description
`name`	`string` (min 1)	Nom d’affichage 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`

Renommez un fichier. Entrée

Paramètre	Type	Description
`id`	`uuid`	ID du fichier
`name`	`string` (min 1)	Nouveau nom d’affichage

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

`delete-file`

Supprimez définitivement un fichier. Le name que vous transmettez est comparé au nom d’affichage 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 d’affichage actuel du fichier. Il 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`

Listez les écrans d’un fichier, dans l’ordre du canevas. Appelez cet outil après list-files pour voir ce qu’un fichier contient déjà. Utilisez les valeurs screenId renvoyées avec les autres outils d’écrans et avec les outils de conception 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`

Rendez un écran en PNG et renvoyez-le 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 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` provenant 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`

Obtenez un écran en JSX, ainsi que ses métadonnées, pour pouvoir bâtir à partir de celui-ci dans votre base de code, ou le modifier et le réécrire avec replace-screen-jsx. Utilisez plutôt get-screen-image pour un aperçu visuel. Entrée

Paramètre	Type	Par défaut	Description
`fileId`	`uuid`	—	ID du fichier
`screenId`	`uuid`	—	Un `screenId` provenant 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`. Utilisez-le lorsque vous avez besoin des identifiants d’éléments à transmettre comme `elementIds` à `ai-design-screens`, pour les modifier sur place ou comme référence visuelle

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 seulement. 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 aucun. 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`

Ajoutez un nouvel écran à un fichier à partir de JSX que vous avez écrit. C’est le chemin « code d’abord », et il est gratuit. Utilisez ai-design-screens lorsque vous voulez que l’IA de Flowstep conçoive l’écran. add-screen-jsx crée toujours un nouvel écran : pour en écraser un existant, utilisez replace-screen-jsx. Pour afficher une image que vous avez téléversée, consultez Images dans le JSX. Lorsque 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 être différent. Entrée

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

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

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

`replace-screen-jsx`

Écrasez 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 le chemin « code d’abord », et il est gratuit. Utilisez ai-design-screens ou ai-edit-screen-variant pour des modifications par IA, et add-screen-jsx pour créer plutôt un nouvel écran. Partez de get-screen-jsx (sans includeIds), puis modifiez ce qui doit être différent. Pour afficher une image que vous avez téléversée, consultez Images dans le JSX. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier
`screenId`	`uuid`	L’écran à écraser
`jsx`	`string`	Balisage JSX seulement. Les attributs `data-id` 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 }[]`	Éléments communs facultatifs provenant de `get-screen-jsx`. Omettez-le pour conserver les fragments actuels, ou transmettez `[]` pour les effacer

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

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

`rename-screen`

Renommez l’étiquette d’un écran sur le canevas, c’est-à-dire le nom affiché par list-screens et dans l’éditeur. Cela ne change que l’étiquette, et non la mise en page, la taille ni le contenu de l’écran. Utilisez ai-design-screens pour ces modifications. 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 de début et de fin sont supprimés

Sortie : { screenId, name }.

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

`delete-screen`

Supprimez définitivement un écran d’un fichier. Le name que vous transmettez est comparé au nom d’affichage 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 d’affichage actuel de l’écran. Il doit correspondre, sinon la suppression est annulée

Sortie : { "deleted": true }

Images dans le JSX

add-screen-jsx et replace-screen-jsx acceptent des images dans un src d’img, ou en arrière-plan dans className avec bg-[url(...)]. Rédigez un texte alt et dimensionnez chaque image selon son usage. Pour placer une image qui vous appartient :

Téléversez-la avec upload-attachment en mode A (mimeType + fileName), puis exécutez la uploadCommand renvoyée.
Si le type de la réponse vaut "image", collez son assetUrl exactement tel quel dans img src ou dans bg-[url(assetUrl)].

Laissez toutes les autres URL d’image exactement telles que get-screen-jsx les a renvoyées. Ne placez pas path, signedUrl ni uploadCommand dans src.

<img src="ASSET_URL" alt="Team photo" className="w-full h-48 object-cover rounded-lg" />

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 directives de conception

Les directives 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 par IA pour ce fichier. Consultez Directives de conception.

`get-design-guidelines`

Obtenez les directives 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 directive n’a été définie.

`update-design-guidelines`

Définissez ou remplacez les directives de conception d’un fichier. Transmettez les directives sous forme de chaîne de caractères simple, selon le format DESIGN.md de Google, et non sous forme d’objet ni de JSON. Si vous lisez à partir d’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 directives. Doit être une chaîne simple, et non encodée en JSON

Règles de validation

Le bloc frontmatter doit être correctement ouvert et fermé
Les lignes du frontmatter doivent être du YAML en style bloc valide
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 énumère les problèmes de validation souples (clés inconnues, couleurs non hexadécimales) qui ont été acceptés, mais que l’IA pourrait ignorer. Il est omis lorsqu’il n’y en a aucun. Signalez-les à l’utilisateur.

`delete-design-guidelines`

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

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

Sortie : { "deleted": true }

Outils de clavardage

`get-chat-history`

Obtenez la conversation de conception associée à un fichier, c’est-à-dire le clavardage Flowstep du fichier, et non la conversation de votre client MCP. Utilisez cet outil 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 si vous n’avez aucune conversation de conception sur le fichier. Chaque message a 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`

Téléversez un fichier de référence à utiliser comme pièce jointe dans ai-design-screens, ou une image à placer dans votre propre JSX avec add-screen-jsx ou replace-screen-jsx. Les outils ai-generate-screen-variant et ai-edit-screen-variant n’acceptent pas de pièces jointes. Le contenu des fichiers ne transite jamais par le modèle, et le serveur ne récupère jamais d’URL à votre place. Pour référencer une page Web, incluez plutôt son URL dans le message de ai-design-screens. Il existe deux modes : utilisez-en exactement un, et ne les combinez pas. Mode A : fichiers et images (mimeType + fileName) Un flux obligatoire en trois étapes pour toute image, tout PDF ou tout fichier texte volumineux :

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

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "assetUrl": "https://…",
  "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 dans signedUrl n’autorise que ce téléversement unique. Si vous sautez cette étape, le stockage reste vide et l’outil de conception échoue à sa vérification préalable.
Transmettez uniquement { id, path, type } dans le tableau attachments de ai-design-screens, et non signedUrl, uploadCommand ni nextStep. Pour placer une image dans votre propre JSX à la place, mettez assetUrl dans le img src ou le bg-[url(...)] du JSX que vous transmettez à add-screen-jsx ou replace-screen-jsx. Consultez Images dans le JSX.

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

Paramètre	Type	Description
`mimeType`	enum	Type MIME du fichier. L’une de ces valeurs : `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éversez du texte déjà présent dans le contexte, sans commande shell. La réponse est prête à être utilisée directement :

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

Paramètre	Type	Description
`text`	`string` (max 64 000 caractères)	Contenu textuel brut. Fichiers texte seulement : ne l’utilisez pas pour des images ni des PDF. Plus de 64 000 caractères? Utilisez plutôt le mode A
`mimeType`	enum	L’une de ces valeurs : `text/markdown`, `text/plain`, `text/javascript`

Transmettez le { id, path, type } obtenu dans le tableau attachments de ai-design-screens. La taille maximale d’un fichier est de 3 Mo pour les deux modes, et les PDF sont limités à 100 pages. Sortie : { id, path, assetUrl, type, mimeType, signedUrl?, uploadCommand?, nextStep? }.

type : "image" pour les fichiers image et "document" pour les PDF et les fichiers texte.
assetUrl : l’URL du fichier téléversé, renvoyée dans les deux modes. Utilisez-la dans le JSX pour add-screen-jsx ou replace-screen-jsx uniquement lorsque type vaut "image", et seulement après l’exécution de la uploadCommand du mode A.
signedUrl, uploadCommand, nextStep : présents uniquement en mode A. Ne les transmettez pas aux outils de conception.

Outils Figma

`import-figma`

Importez 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 propriétaire 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`

Obtenez le forfait Flowstep de votre organisation, l’état de son abonnement, son utilisation et son quota restant. Cet outil n’exige aucune entrée : l’organisation est déterminée à partir de l’utilisateur connecté. Utilisez-le pour vérifier votre allocation avant d’appeler les outils de conception 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 la page Tarifs et Limites d’utilisation.

Outils de conception IA

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

Outil	Utilisation
`ai-design-screens`	Générer de nouveaux écrans, modifier des écrans existants sur place, ou les deux, à partir d’une description libre
`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 trois outils 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 directives DESIGN.md du fichier ont été mises à jour automatiquement pendant ce tour. Sinon, il vaut null.

`ai-design-screens`

Générez un ou plusieurs nouveaux écrans, modifiez des écrans existants sur place, ou les deux en un seul appel, à partir d’une description textuelle : nouveaux parcours, thèmes, texte, mise en page ou modifications coordonnées sur plusieurs écrans. C’est le même agent de conception que le clavardage de l’éditeur Flowstep : il décide, à partir de votre message et de vos elementIds, ce qu’il faut construire et ce qu’il faut modifier. Omettez fileId pour démarrer un nouveau fichier ; transmettez fileId pour travailler dans un fichier existant. Si la demande pourrait s’appliquer à un fichier que vous possédez déjà, votre agent doit d’abord consulter list-files et list-screens. Pour une étape suivante, un état d’erreur ou vide, ou une variante de plateforme d’un écran, utilisez ai-generate-screen-variant. Pour un préréglage de modification ou de refonte d’un écran, utilisez ai-edit-screen-variant. Si vous avez déjà du JSX, utilisez plutôt add-screen-jsx ou replace-screen-jsx. Entrée

Paramètre	Type	Par défaut	Description
`fileId`	`uuid`	—	Fichier cible. Omettez-le pour créer un nouveau fichier. Obligatoire lorsque `elementIds` est défini
`message`	`string`	—	Description des écrans à générer et/ou des modifications à apporter. Lorsque vous transmettez `elementIds`, précisez si les éléments doivent être modifiés ou utilisés comme référence. Incluez ici les URL de pages Web que vous voulez que Flowstep référence
`elementIds`	`uuid[]`	`[]`	`screenId` facultatifs provenant de `list-screens` et/ou `data-id` d’éléments provenant de `get-screen-jsx` (avec `includeIds`), comme une sélection dans l’éditeur. Ils peuvent être modifiés sur place ou servir de référence visuelle pour de nouveaux écrans. Un `screenId` cible l’écran entier
`attachments`	`{ id, path, type }[]` (max 5)	`[]`	Fichiers provenant de `upload-attachment` : images, PDF, ou fichiers de code et de texte. N’intégrez pas le contenu des fichiers dans le message

Exemple : modifier un écran et en ajouter un autre dans un seul appel :

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "message": "Switch this sign-in screen to dark mode, then add a matching forgot-password screen.",
  "elementIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"]
}

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

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

status : "generated" lorsque des écrans ont été construits ou modifiés. "chat" lorsque Flowstep a répondu sans rien construire ; reply contient alors sa réponse, et screenIds est vide. Si votre demande est ambiguë, votre agent doit vous demander de la préciser, puis rappeler l’outil.
screenIds : chaque écran construit ou modifié pendant l’appel, y compris les écrans modifiés sur place. Si l’appel expire après la construction de certains écrans, il renvoie ces écrans au lieu d’une erreur.

Les écrans que vous demandez de modifier sont écrasés sur place.

`ai-generate-screen-variant`

Ajoutez un nouvel écran dérivé d’exactement un écran existant : l’étape suivante du flux, 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-design-screens avec un fileId. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	Fichier cible
`screenId`	`uuid`	L’écran existant à partir duquel dériver le nouvel écran
`operationVariant`	enum	Obligatoire : comment le nouvel écran se rapporte à 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`

Modifiez sur place exactement un écran existant à l’aide d’un préréglage : thématisez-le ou soignez-le, essayez une mise en page ou un style visuel différent, ou refaites-le entièrement. Pour des instructions libres ou une modification précise d’éléments individuels, utilisez ai-design-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 en thème sombre
`light_theme`	Modification	Passer l’écran en thème clair
`make_pretty`	Modification	Soigner la conception visuelle de l’écran
`different_layout`	Refonte	Essayer une mise en page différente
`different_style`	Refonte	Essayer un style visuel différent
`from_scratch`	Refonte	Refaire l’écran entièrement

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

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

Outils renommés

Les noms d’outils ont changé en septembre et octobre 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`
`ai-generate-screens`	`ai-design-screens`
`ai-edit-screens`	`ai-design-screens`
`create-new-design`	`ai-design-screens`
`edit-design` (instructions libres)	`ai-design-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 IA acceptent elementIds (ou un seul screenId pour les outils de variante) 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 directives 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

​Images dans le JSX

​Valeurs des champs d’écran

​Outils de directives de conception

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Outils de clavardage

​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 IA

​ai-design-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`

Images dans le JSX

Valeurs des champs d’écran

Outils de directives de conception

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Outils de clavardage

`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 IA

`ai-design-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

Outils renommés