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’erreur, isError: true est défini et le bloc texte contient le message d’erreur.

Outils de fichier

`list-files`

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

Paramètre	Type	Par défaut	Description
`orderByCreation`	`boolean`	`true`	Ordre 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`

Récupérer un seul fichier 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 consignes attachées. 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’outil suivants.

`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 de 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 interrompue. Cela empêche la suppression accidentelle d’un 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 sera interrompue

Sortie — "File deleted successfully"

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

Outils d’é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, 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’é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`

Récupérer le code JSX d’un écran pour vous permettre 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 du tableau `screenIds` retourné par un outil de conception

Sortie — L’écran en tant que code (JSX). Notez le commentaire de la 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`

Ajouter 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 comme commentaire au début du JSX

Note - Un commentaire similaire à celui ci-dessous DOIT être présent comme 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 ex. lors de la transmission du JSX copié 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 au PNG et le retourner en tant qu’image intégrée. 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 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’existe 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. Solution de contournement : utilisez upload-attachment pour rendre l’écran en tant qu’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érer une ou plusieurs conceptions d’écran à partir d’un prompt texte. Omettez fileId pour créer automatiquement un nouveau fichier. Bloque jusqu’à la fin de la génération ou jusqu’à expiration du délai (180 secondes). Entrée

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

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

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

`regenerate-design`

Refaire les écrans existants à partir de zéro ou avec une variation de style. Nécessite au moins un screenId dans targets. Bloque jusqu’à la fin de la génération ou jusqu’à expiration du délai (180 secondes). Entrée

Paramètre	Type	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"`	—	Variante de style optionnelle
`designs`	`DesignRequestData[]`	`[]`	Références de conception (résolues automatiquement)

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

`expand-design`

Ajouter des écrans de suivi à une conception existante. Nécessite au moins un screenId dans targets et un operationVariant obligatoire. Bloque jusqu’à la fin de la génération ou jusqu’à expiration du délai (180 secondes). Entrée

Paramètre	Type	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 }. Transmettez chaque screenId à get-screen-image pour voir les résultats.

`edit-design`

Modifier les écrans existants via un prompt. Nécessite au moins un screenId dans targets. Bloque jusqu’à la fin de la génération ou jusqu’à expiration du délai (180 secondes). Entrée

Paramètre	Type	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 }. Transmettez chaque screenId à get-screen-image pour voir les résultats.

`upload-attachment`

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

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

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

Paramètre	Type	Description
`fileData`	`string`	Contenu du fichier — base64 pour binaire, chaîne UTF-8 pour 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 de fichier maximale : 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 image/PDF et "document" pour les fichiers texte/code.

Outils de chat

`get-chat-history`

Récupérer 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 possède un type ("request" ou "response"), un author ("human" ou "ai"), et un 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`

Récupérer les consignes de conception stockées pour un fichier. Entrée

Paramètre	Type	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 consigne n’a été définie.

`update-design-guidelines`

Définir ou remplacer les consignes de conception pour un fichier. Les consignes sont transmises en tant que chaîne texte simple au format design.md de Google — ne transmettez pas un objet ou JSON. Le serveur effectue une validation souple 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. Présentez-les à l’utilisateur. Entrée

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

Règles de validation

L’en-tête doit être ouvert et fermé correctement
Les lignes d’en-tête doivent être du YAML valide en style bloc
Le corps Markdown ne doit pas contenir de titres de section ## dupliqués

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

`delete-design-guidelines`

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

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

Sortie — "Design guidelines deleted successfully"

Outils Figma

`import-figma`

Importer un écran Figma dans un fichier Flowstep comme éléments modifiables sur son canevas. Réimporter le même écran 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 écran Figma spécifique. Dans Figma, cliquez avec le bouton droit sur l’écran et choisissez Copy link to selection. Un lien vers une page importe tous les écrans de haut niveau de cette page (limité à 20 écrans via MCP).
`fileId`	`uuid`	Le fichier Flowstep dans lequel importer l’écran

Sortie — { fileId, screenId }. screenId est l’id de l’élément écran importé — transmettez-le à get-screen-image pour voir le résultat. Lorsqu’une URL de page importe plusieurs écrans, 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`

Récupérer le forfait actuel de l’utilisateur, l’état 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

Export et intégrations

Serveur MCP

Facturation et forfaits

Sécurité et confidentialité

Référence des outils MCP

Outils de fichier

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Outils d’é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 de fichier

​list-files

​get-file

​create-file

​update-file

​delete-file

​Outils d’é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 de fichier

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Outils d’é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`