Référence des outils MCP

Tous les outils retournent un tableau content de blocs de contenu MCP. Les outils texte retournent { type: "text", text: "<json-string>" }. Les outils image retournent { type: "image", data: "<base64>", mimeType: "image/png" }. En cas d’échec, isError: true est défini et le bloc texte contient le message d’erreur.

Outils fichier

`list-files`

Lister les fichiers Flowstep de l’utilisateur actuel. Entrée

Paramètre	Type	Défaut	Description
`orderByCreation`	`boolean`	`true`	Trier par date de création
`limit`	`integer` (1–100)	`20`	Nombre de fichiers à retourner
`offset`	`integer` (≥0)	`0`	Décalage de pagination

Sortie — Tableau JSON d’objets fichier.

[
  {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  }
]

`get-file`

Obtenir un fichier unique par ID. Le contenu du fichier est intentionnellement omis — utilisez get-screen ou get-screen-image pour inspecter les écrans et get-design-guidelines pour récupérer les directives jointes. Entrée

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

Sortie — Objet fichier JSON.

{
  "file": {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "access_level": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

`create-file`

Créer un nouveau fichier Flowstep. Entrée

Paramètre	Type	Description
`title`	`string` (min 1)	Nom du fichier

Sortie — Objet fichier JSON avec l’id du nouveau fichier.

{
  "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "name": "Dashboard redesign",
  "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
  "created_at": "2026-04-30T15:02:13.120152+00:00",
  "updated_at": "2026-04-30T15:02:13.120152+00:00",
  "access_level": "private",
  "user_access_level": "write",
  "owner": true,
  "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
}

Utilisez l’id retourné comme fileId dans les appels d’outils ultérieurs.

`update-file`

Renommer un fichier. Entrée

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

Sortie — Objet fichier mis à jour avec la même forme que get-file.

{
  "file": {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign (v2)",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "access_level": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

`delete-file`

Supprimer définitivement un fichier. Le name que vous transmettez est vérifié par rapport au nom réel du fichier avant la suppression — s’il ne correspond pas, la suppression est abandonnée. Cela empêche la suppression accidentelle du mauvais fichier. Entrée

Paramètre	Type	Description
`id`	`uuid`	ID du fichier
`name`	`string`	Nom actuel du fichier — doit correspondre exactement ou la suppression est annulée

Sortie — "File deleted successfully"

C’est irréversible. Tous les écrans du fichier sont supprimés.

Outils écran

`list-screens`

Lister tous les écrans générés pour un fichier. Utilisez les valeurs screenId retournées pour référencer les écrans dans get-screen, get-screen-image et comme targets dans edit-design, regenerate-design ou expand-design. Entrée

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

Sortie — Tableau JSON de résumés d’écran.

[
  {
    "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
    "name": "Mobile login screen",
    "fidelity": "ui",
    "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
    "createdAt": "2026-04-30T15:02:37.444139+00:00"
  }
]

name est le nom d’écran assigné par l’utilisateur, ou null s’il n’est pas nommé.

`get-screen`

Obtenir le code JSX pour un écran permettant de modifier ou d’utiliser le code en dehors de Flowstep. Utilisez get-screen-image pour un aperçu visuel à la place. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier
`screenId`	`uuid`	Le `screenId` retourné par `list-screens` ou des IDs de sous-élément retournés par un outil de conception

Sortie — L’écran en tant que code (JSX). Notez le commentaire de première ligne qui est requis lors de l’utilisation de l’outil add-screen.

<!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" screenId: "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0" -->
<div className="bg-white text-zinc-950 w-full h-fit">
  <div className="flex p-6 flex-col gap-6">
    <div className="flex pt-4 justify-between items-center">
      <ArrowLeft className="size-5 text-[#71717b]" />
      <span className="font-semibold text-zinc-950 text-lg leading-7">
        World Clock
      </span>
      <Plus className="size-5 text-[#2b7fff]" />
    </div>
    <div className="rounded-xl bg-zinc-100 flex p-2 items-center gap-2">
      <Search className="size-4 text-[#71717b] ml-2" />
      <span className="text-[#71717b] text-sm leading-5">Search cities...</span>
    </div>
...
    <div className="flex pt-2 pb-4 justify-center items-center gap-4">
      <Button variant="outline" className="rounded-full px-6 gap-2">
        <Clock className="size-4" />
        <span>Compare</span>
      </Button>
      <Button className="rounded-full bg-[#2b7fff] text-blue-50 px-6 gap-2">
        <Bell className="size-4" />
        <span>Set Alert</span>
      </Button>
    </div>
  </div>
</div>;

`add-screen`

Ajoute un nouvel écran à un fichier Flowstep à partir d’une chaîne JSX brute. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier
`jsxContent`	`string`	JSX à ajouter au fichier en tant qu’écran
`screenType`	`string`	Requis si le type d’écran n’est pas défini en commentaire au début du JSX

Note - Un commentaire similaire à celui ci-dessous DOIT être présent en tant que première ligne du JSX car il est utilisé pour ajouter l’écran correctement. screenType, name et screenId sont tous optionnels — screenId est utilisé (en interne) s’il est présent (par exemple lors de la transmission du JSX copié à partir de la sortie get-screen) mais n’est pas obligatoire. Le nom de l’écran est extrait du champ name du commentaire (affiché comme « Copy of <name> »), ou « Untitled » s’il est absent.  Sortie — L’ID du nouvel écran ajouté.

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" }

`get-screen-image`

Rendre un écran à PNG et le retourner en tant qu’image en ligne. Nécessite un client qui prend en charge les blocs de contenu image. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier
`screenId`	`uuid`	Le `screenId` retourné par `list-screens` ou des IDs de sous-élément retournés par un outil de conception

Sortie — Bloc de contenu image MCP (image/png).

Outils IA

regenerate-design, expand-design et edit-design nécessitent un contexte de conception qui n’est présent que sur les écrans générés à l’origine avec un tableau designs. Les écrans générés sans contexte de conception retourneront une erreur.

`create-new-design`

Générer un ou plusieurs designs d’écran à partir d’un prompt textuel. Omettez fileId pour créer automatiquement un nouveau fichier. Blocs jusqu’à ce que la génération se termine ou expire (180 secondes). Entrée

Paramètre	Type	Défaut	Description
`fileId`	`uuid`	—	Fichier cible — omettez pour créer automatiquement un nouveau fichier. Requis lorsque `targets` est défini
`message`	`string`	—	Prompt décrivant les écrans à générer
`targets`	`uuid[]`	`[]`	Références visuelles optionnelles — `screenId`s de `list-screens` et/ou IDs de sous-élément de `get-screen`. Les écrans référencés sont utilisés uniquement comme inspiration visuelle ; ils ne sont pas modifiés sur place
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Pièces jointes pré-téléchargées — images, PDF ou fichiers de code. Toujours télécharger via `upload-attachment` d’abord ; ne pas intégrer le contenu du fichier dans le message
`designs`	`DesignRequestData[]`	`[]`	Références de conception

Sortie — { fileId, screenIds, designGuidelinesUpdated }. Transmettez chaque screenId à get-screen-image pour afficher les résultats. designGuidelinesUpdated signale si les directives de conception du fichier ont été modifiées dans le cadre de cette génération.

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

`regenerate-design`

Refaire les écrans existants de zéro ou avec une variation de style. Nécessite au moins un screenId dans targets. Blocs jusqu’à ce que la génération se termine ou expire (180 secondes). Entrée

Paramètre	Type	Défaut	Description
`fileId`	`uuid`	—	Fichier cible
`message`	`string`	—	Texte du prompt
`targets`	`uuid[]` (min 1)	—	screenIds des écrans à régénérer
`operationVariant`	`"different_layout" \| "different_style" \| "from_scratch"`	—	Requis — comment refaire l’écran : `different_layout` (garder le style et le contenu, modifier la mise en page), `different_style` (garder la mise en page et le contenu, modifier les couleurs et le traitement visuel), ou `from_scratch` (nouvelle mise en page, style et contenu pour le même objectif)
`designs`	`DesignRequestData[]`	`[]`	Références de conception (résolues automatiquement)

Sortie — { fileId, screenIds, designGuidelinesUpdated }. Transmettez chaque screenId à get-screen-image pour afficher les résultats.

`expand-design`

Ajouter des écrans de suivi à un design existant. Nécessite au moins un screenId dans targets et un operationVariant obligatoire. Blocs jusqu’à ce que la génération se termine ou expire (180 secondes). Entrée

Paramètre	Type	Défaut	Description
`fileId`	`uuid`	—	Fichier cible
`message`	`string`	—	Texte du prompt
`targets`	`uuid[]` (min 1)	—	screenIds des écrans à développer
`operationVariant`	`"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"`	—	Requis — type d’écran de suivi à générer
`designs`	`DesignRequestData[]`	`[]`	Références de conception (résolues automatiquement)

Sortie — { fileId, screenIds, designGuidelinesUpdated }. Transmettez chaque screenId à get-screen-image pour afficher les résultats.

`edit-design`

Modifier les écrans existants via un prompt. Nécessite au moins un screenId dans targets. Blocs jusqu’à ce que la génération se termine ou expire (180 secondes). Entrée

Paramètre	Type	Défaut	Description
`fileId`	`uuid`	—	Fichier cible
`message`	`string`	—	Instructions décrivant les modifications à appliquer
`targets`	`uuid[]` (min 1)	—	screenIds des écrans à modifier
`operationVariant`	`"dark_theme" \| "light_theme" \| "make_pretty"`	—	Raccourci de style optionnel
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Pièces jointes pré-téléchargées. Toujours télécharger via `upload-attachment` d’abord
`designs`	`DesignRequestData[]`	`[]`	Références de conception (résolues automatiquement)

Sortie — { fileId, screenIds, designGuidelinesUpdated }. Transmettez chaque screenId à get-screen-image pour afficher les résultats.

`upload-attachment`

Télécharger un fichier à utiliser comme pièce jointe dans create-new-design ou edit-design (pas regenerate-design ou expand-design). Les octets du fichier ne passent jamais par le modèle, et le serveur ne récupère jamais les URL en votre nom. Il y a deux modes — utilisez exactement un seul, et ne les combinez pas. Mode A — fichiers et images (mimeType + fileName) Un flux en trois étapes requis pour tout fichier image, PDF ou texte plus volumineux :

Appelez upload-attachment avec uniquement mimeType et fileName (par exemple image/png et dog.png). La réponse est un téléchargement préparé, pas 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 et exécutez cette commande exacte dans votre shell — elle doit quitter 0. Le jeton dans signedUrl autorise uniquement ce seul téléchargement. 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 — pas signedUrl, uploadCommand ou nextStep.

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

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

Mode B — texte court (text + mimeType) Télécharger du texte déjà en contexte — aucune commande shell nécessaire. La réponse est prête à être utilisée directement :

{
  "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 chars)	Contenu de texte brut. Fichiers texte uniquement — ne pas utiliser pour les images ou les PDF. Plus long que 64,000 caractères ? Utilisez plutôt le mode A
`mimeType`	enum	Un de `text/markdown`, `text/plain`, `text/javascript`

Transmettez le { id, path, type } résultant dans le tableau attachments de create-new-design ou edit-design. La taille maximale du fichier est 3 Mo sur les deux modes, et les PDF sont limités à 100 pages. type est "image" pour les fichiers image et "document" pour les PDF et fichiers texte.

Outils de chat

`get-chat-history`

Obtenir l’historique des messages de chat pour un fichier. Entrée

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

Sortie — Objet JSON avec un tableau messages. Chaque message a un type ("request" ou "response"), author ("human" ou "ai") et content_type ("text", "summary" ou "followup").

{
  "messages": [
    {
      "id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b",
      "type": "request",
      "status": "success",
      "content": "Generate a simple mobile login screen with email and password fields",
      "author": "human",
      "content_type": "text",
      "sequence": 1,
      "request_message_id": null,
      "targets": [],
      "attachments": []
    },
    {
      "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
      "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b",
      "type": "response",
      "status": "success",
      "content": "Generated a mobile login screen with email and password input fields, sign in button, remember me checkbox, forgot password link, social login options (Apple/Google), and sign up link.",
      "author": "ai",
      "content_type": "summary",
      "sequence": 7,
      "request_message_id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "targets": [{ "target_id": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" }],
      "attachments": []
    }
  ]
}

Outils de conception

`get-design-guidelines`

Obtenir les directives de conception stockées pour un fichier. Entrée

Paramètre	Type	Défaut	Description
`resourceId`	`uuid`	—	ID du fichier
`linkedTo`	`"file"`	`"file"`	Type de ressource

Sortie

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

guidelines est null si aucune directive n’a été définie.

`update-design-guidelines`

Définir ou remplacer les directives de conception pour un fichier. Les directives sont transmises en tant que chaîne de texte brut au format design.md de Google — ne transmettez pas un objet ou JSON. Le serveur effectue une validation logicielle et peut retourner une section Warnings: dans la réponse listant les problèmes (clés inconnues, couleurs non-hex) qui ont été acceptés mais peuvent être ignorés par l’IA. Surfacez-les à l’utilisateur. Entrée

Paramètre	Type	Défaut	Description
`resourceId`	`uuid`	—	ID du fichier
`designGuidelines`	`string` (min 1)	—	Contenu de texte brut des directives. Doit être une chaîne brute — pas JSON-encodée
`linkedTo`	`"file"`	`"file"`	Type de ressource

Règles de validation

Le préambule doit être ouvert et fermé correctement
Les lignes du préambule doivent être du YAML valide de style bloc
Le corps Markdown ne doit pas contenir les rubriques en double ##

Sortie — "Design guidelines updated successfully", éventuellement suivie d’une section Warnings:.

`delete-design-guidelines`

Effacer les directives de conception pour un fichier. Entrée

Paramètre	Type	Défaut	Description
`resourceId`	`uuid`	—	ID du fichier
`linkedTo`	`"file"`	`"file"`	Type de ressource

Sortie — "Design guidelines deleted successfully"

Outils Figma

`import-figma`

Importer une frame Figma dans un fichier Flowstep en tant qu’éléments modifiables sur son canevas. Ré-importer la même frame la met à jour sur place. L’organisation du fichier doit d’abord avoir Figma connecté dans les paramètres Flowstep. Entrée

Paramètre	Type	Description
`figmaUrl`	`string`	Lien vers une frame Figma spécifique. Dans Figma, cliquez avec le bouton droit sur la frame et choisissez Copy link to selection. Un lien vers une page importe toutes les frames de haut niveau de cette page (limité à 20 frames sur MCP).
`fileId`	`uuid`	Le fichier Flowstep dans lequel importer la frame

Sortie — { fileId, screenId }. screenId est l’id de l’élément d’écran importé — transmettez-le à get-screen-image pour afficher le résultat. Quand une URL de page importe plusieurs frames, screenId est null et frameCount est retourné à la place.

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

Outils de facturation

`get-plan-details`

Obtenir le forfait actuel de l’utilisateur, le statut de l’abonnement et le quota restant. Ne prend aucune entrée. Sortie

{
  "plan": {
    "name": "Starter",
    "code": "starter",
    "type": "paid"
  },
  "subscription": {
    "isPaid": true,
    "isTrial": false,
    "startDate": "2025-01-01T00:00:00Z",
    "endDate": null,
    "trialDaysRemaining": null
  },
  "limits": {
    "messages": {
      "daily": { "max": 50, "warn": 40 },
      "monthly": { "max": 500, "warn": 400 },
      "unlimited": false
    }
  },
  "usage": {
    "messages": { "daily": 12, "monthly": 87 }
  },
  "remaining": {
    "messages": { "daily": 38, "monthly": 413 }
  }
}

Les limites varient selon le forfait. Appelez cet outil avant un lot de générations pour vérifier le quota disponible.

Premiers pas

Utiliser Flowstep

Équipes et organisations

Exportation et intégrations

Serveur MCP

Facturation et forfaits

Sécurité et confidentialité

Référence des outils MCP

Outils fichier

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Outils écran

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Outils IA

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Outils de chat

`get-chat-history`

Outils de conception

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Outils Figma

`import-figma`

Outils de facturation

`get-plan-details`

​Outils fichier

​list-files

​get-file

​create-file

​update-file

​delete-file

​Outils écran

​list-screens

​get-screen

​add-screen

​get-screen-image

​Outils IA

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

​Outils de chat

​get-chat-history

​Outils de conception

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Outils Figma

​import-figma

​Outils de facturation

​get-plan-details

Outils fichier

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Outils écran

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Outils IA

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Outils de chat

`get-chat-history`

Outils de conception

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Outils Figma

`import-figma`

Outils de facturation

`get-plan-details`