Référence des outils MCP

Tous les outils retournent un tableau content contenant des 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’erreur, isError: true est défini et le bloc texte contient le message d’erreur.

Outils fichier

`list-files`

Énumère les fichiers Flowstep de l’utilisateur actuel. Entrée

Paramètre	Type	Valeur par 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`

Obtient un seul fichier par ID. Le contenu du fichier est volontairement 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ée un nouveau fichier Flowstep. Entrée

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

Sortie — Objet fichier JSON contenant 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`

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

Supprime définitivement un fichier. Le name que vous passez est vérifié par rapport au vrai nom du fichier avant la suppression — s’il ne correspond pas, la suppression est interrompue. Cela empêche de supprimer accidentellement le 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 interrompue

Sortie — "File deleted successfully"

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

Outils écran

`list-screens`

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

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

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

[
  {
    "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`

Obtient le code JSX pour un écran vous 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 à partir du tableau `screenIds` retourné par un outil de conception

Sortie — L’écran en tant que code (JSX). Remarque : le commentaire de la première ligne 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 comme écran
`screenType`	`string`	Requis si le type d’écran n’est pas défini comme commentaire au début du JSX

Remarque - Un commentaire similaire à celui ci-dessous DOIT être présent à la 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 du passage de JSX copié à partir de la sortie de get-screen) mais n’est pas obligatoire. Le nom de l’écran est pris du champ name du commentaire (affiché comme « Copy of <name> »), ou « Untitled » s’il est absent.  Sortie — L’ID de l’écran nouvellement ajouté.

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

`get-screen-image`

Rend un écran en PNG et le retourne comme image en ligne. Nécessite un client qui prend en charge les blocs de contenu d’image. Entrée

Paramètre	Type	Description
`fileId`	`uuid`	ID du fichier
`screenId`	`uuid`	Le `screenId` retourné par `list-screens` ou à partir du tableau `screenIds` retourné par un outil de conception

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

Outils IA

regenerate-design, expand-design, et edit-design nécessitent un contexte de conception qui n’est présent que sur les écrans généré à l’origine avec un tableau designs. Les écrans générés sans contexte de conception retourneront une erreur. Solution de contournement : utilisez upload-attachment pour rendre l’écran comme une image, puis appelez create-new-design avec l’image dans attachments et un message décrivant les modifications souhaitées.

`create-new-design`

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

Paramètre	Type	Valeur par défaut	Description
`fileId`	`uuid`	—	Fichier cible — omettez pour créer un nouveau fichier automatiquement
`message`	`string`	—	Prompt décrivant les écrans à générer
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Pièces jointes pré-téléchargées — images, PDFs ou fichiers de code. Téléchargez toujours via `upload-attachment` d’abord ; ne collez pas le contenu des fichiers dans le message
`designs`	`DesignRequestData[]`	`[]`	Références de conception

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

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

`regenerate-design`

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

Paramètre	Type	Valeur par défaut	Description
`fileId`	`uuid`	—	Fichier cible
`message`	`string`	—	Texte du prompt
`targets`	`uuid[]` (min 1)	—	screenIds des écrans à régénérer
`operationVariant`	`"different_layout" \| "different_style" \| "from_scratch"`	—	Variation de style optionnelle
`designs`	`DesignRequestData[]`	`[]`	Références de conception (résolues automatiquement)

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

`expand-design`

Ajoutez des écrans de suivi à une conception existante. Nécessite au moins un screenId dans targets et un operationVariant obligatoire. Se bloque jusqu’à ce que la génération se termine ou expire (180 secondes). Entrée

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

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

`edit-design`

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

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

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

`upload-attachment`

Téléchargez un fichier à utiliser comme pièce jointe dans create-new-design ou edit-design. Retourne { id, path, type, mimeType } — passez cet objet directement dans le tableau attachments. Deux modes : Mode 1 — Écran par ID Passez screenId et fileId. Le serveur récupère l’état de l’écran à partir de la base de données et le rend comme une image.

Paramètre	Type	Description
`fileId`	`uuid`	Fichier contenant l’écran (requis)
`screenId`	`uuid`	Écran à rendre

Mode 2 — Fichier externe Passez le contenu du fichier directement. Les fichiers binaires doivent être codés en base64 ; les fichiers texte (y compris le code source) sont passés en tant que chaînes UTF-8 simples.

Paramètre	Type	Description
`fileData`	`string`	Contenu du fichier — base64 pour le binaire, chaîne UTF-8 pour le texte
`fileName`	`string`	Nom de fichier d’origine
`mimeType`	`"image/jpeg" \| "image/png" \| "image/webp" \| "application/pdf" \| "text/plain" \| "text/javascript"`	Type MIME. Utilisez `text/javascript` pour les fichiers `.jsx`, `.tsx`, `.js`, `.ts`

Taille maximale du fichier : 3 MB. Pour les grandes images, préférez image/jpeg à image/png. Sortie

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "type": "image",
  "mimeType": "image/jpeg"
}

type est "image" pour les téléchargements d’image/PDF et "document" pour les fichiers texte/code.

Outils chat

`get-chat-history`

Obtenez 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 conception

`get-design-guidelines`

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

Paramètre	Type	Valeur par 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éfinissez ou remplacez les directives de conception pour un fichier. Les directives sont passées en tant que chaîne texte simple au format design.md de Google — ne passez 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. Affichez-les à l’utilisateur. Entrée

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

Règles de validation

Frontmatter doit être ouvert et fermé correctement
Les lignes Frontmatter doivent être du YAML valide au niveau des blocs
Le corps Markdown ne doit pas contenir de titres de sections ## dupliqués

Sortie — "Design guidelines updated successfully", optionnellement suivi d’une section Warnings:.

`delete-design-guidelines`

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

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

Sortie — "Design guidelines deleted successfully"

Outils Figma

`import-figma`

Importez un cadre Figma dans un fichier Flowstep comme éléments modifiables sur son canevas. Réimporter le même cadre le met à jour sur place. L’organisation du fichier doit avoir Figma connecté dans les paramètres Flowstep. Entrée

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

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

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

Outils facturation

`get-plan-details`

Obtenez le forfait actuel de l’utilisateur, l’état de l’abonnement et le quota restant. N’accepte 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 chat

`get-chat-history`

Outils conception

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Outils Figma

`import-figma`

Outils 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 chat

​get-chat-history

​Outils conception

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Outils Figma

​import-figma

​Outils 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 chat

`get-chat-history`

Outils conception

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Outils Figma

`import-figma`

Outils facturation

`get-plan-details`