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 trois outils de conception par IA, c’est-à-dire ai-design-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-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`

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-design-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-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 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-design-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. Pour afficher une image que vous avez importée, consultez Images dans le 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-design-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. Pour afficher une image que vous avez importé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 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-design-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 }

Images dans le JSX

add-screen-jsx et replace-screen-jsx acceptent des images dans un src de 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 :

Importez-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 tel qu’il est renvoyé dans img src ou bg-[url(assetUrl)].

Laissez toutes les autres URL d’images exactement telles que get-screen-jsx les a renvoyées. N’insérez jamais path, signedUrl ou 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 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-design-screens, ou une image à placer dans votre propre JSX avec add-screen-jsx ou replace-screen-jsx. 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 ai-design-screens. 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",
  "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 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 ai-design-screens, et non signedUrl, uploadCommand ou nextStep. Pour placer une image dans votre propre JSX, transmettez plutôt assetUrl dans le img src ou le bg-[url(...)] du JSX que vous envoyez à 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 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",
  "assetUrl": "https://…",
  "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-design-screens. La taille maximale d’un fichier est de 3 Mo dans 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 de 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`

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 les Tarifs et les Limites d’utilisation.

Outils de conception par IA

Ces trois 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-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 seul écran existant
`ai-edit-screen-variant`	Appliquer un préréglage de modification ou de refonte à un écran existant entier

Les trois 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-design-screens`

Génère un ou plusieurs nouveaux écrans, modifie des écrans existants sur place, ou fait les deux en un seul appel, à partir d’une description textuelle : nouveaux parcours, thème, texte, mise en page ou modifications coordonnées sur plusieurs écrans. C’est le même agent de conception que le chat de l’éditeur Flowstep : il décide, à partir de votre message et de vos elementIds, ce qu’il faut créer et ce qu’il faut modifier. Omettez fileId pour commencer 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 vérifier avec 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 disposez déjà de JSX, utilisez plutôt add-screen-jsx ou replace-screen-jsx. Entrée

Paramètre	Type	Valeur 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`, indiquez si ces é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 prenne en compte
`elementIds`	`uuid[]`	`[]`	`screenId` facultatifs issus de `list-screens` et/ou `data-id` d’éléments issus 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 issus 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é créés ou modifiés. "chat" lorsque Flowstep a répondu sans créer d’écran : reply contient alors sa réponse et screenIds est vide. Si votre demande est ambiguë, votre agent doit vous demander des précisions et rappeler l’outil.
screenIds : chaque écran créé ou modifié pendant l’appel, y compris les écrans modifiés sur place. Si l’appel dépasse le délai après la création 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`

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-design-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-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 à 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 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 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

​Images dans le JSX

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

`ai-generate-screen-variant`

`ai-edit-screen-variant`

Outils renommés