> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Serveur MCP Flowstep

> Utilisez Flowstep comme serveur MCP pour générer, inspecter et gérer les conceptions d'interface utilisateur directement depuis Cursor, Claude Code ou tout client compatible MCP.

Flowstep expose ses outils de conception via le [Model Context Protocol](https://modelcontextprotocol.io/), permettant à votre assistant IA de créer et d'itérer sur les écrans d'interface utilisateur sans quitter votre éditeur.

Le serveur est hébergé à `https://api.flowstep.ai/mcp` (transport HTTP en continu). Aucun processus local à exécuter.

## Ce que vous pouvez faire

Le serveur expose 20 outils répartis en sept catégories :

| Catégorie         | Outils                                                                                        |
| ----------------- | --------------------------------------------------------------------------------------------- |
| **Fichiers**      | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Écrans**        | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **Génération IA** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Conversation**  | `get-chat-history`                                                                            |
| **Conception**    | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**         | `import-figma`                                                                                |
| **Facturation**   | `get-plan-details`                                                                            |

## Cas d'utilisation courants

**Générer des écrans à partir d'un prompt** — appelez `create-new-design` avec une description. Flowstep crée le fichier et les écrans en une seule étape. Appelez `get-screen-image` avec les `screenIds` retournés pour voir le résultat en ligne.

**Visualiser un composant React** — chargez votre fichier `.jsx` ou `.tsx` via `upload-attachment` (utilisez `mimeType: text/javascript`), puis transmettez l'attachment retourné dans `create-new-design` avec un message décrivant le composant. Flowstep lit la source et génère un écran de conception correspondant.

**Itérer sur une conception** — appelez `edit-design` avec un `screenId` cible et des instructions pour le modifier, ou `regenerate-design` pour refaire un écran de zéro.

**Maintenir les consignes de conception** — appelez `get-design-guidelines` pour récupérer vos règles de style actuelles (couleurs, typographie, espacement, ton), puis utilisez `update-design-guidelines` pour les maintenir synchronisées à mesure que votre conception évolue. Transmettre des consignes cohérentes dans `create-new-design` ou `edit-design` assure que chaque écran généré reste conforme à votre marque. Utilisez `delete-design-guidelines` pour les réinitialiser entièrement.

**Importer depuis Figma** — appelez `import-figma` avec un lien d'écran Figma et un `fileId` pour importer l'écran dans un fichier Flowstep comme éléments modifiables. L'organisation du fichier doit d'abord avoir Figma connecté.

**Vérifier les quotas** — appelez `get-plan-details` pour voir l'utilisation quotidienne et mensuelle restante avant de lancer un lot de générations.

## Point de terminaison

```
https://api.flowstep.ai/mcp
```

Transport : HTTP en continu. Modèle de session : sans état (chaque demande est indépendante, pas d'ID de session).

## Étapes suivantes

<CardGroup cols={2}>
  <Card title="Démarrage rapide" icon="bolt" href="/fr/mcp/quickstart">
    Premier appel d'outil en moins de 5 minutes avec Cursor.
  </Card>

  <Card title="Authentification" icon="lock" href="/fr/mcp/authentication">
    Comment fonctionne OAuth 2.1 PKCE et comment les jetons sont émis.
  </Card>

  <Card title="Outils" icon="wrench" href="/fr/mcp/tools">
    Référence complète entrée/sortie pour les 20 outils.
  </Card>

  <Card title="Exemples" icon="code" href="/fr/mcp/examples">
    Flux de travail de bout en bout pour les tâches courantes.
  </Card>
</CardGroup>
