> ## 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.

# Flowstep MCP Server

> Gebruik Flowstep als een MCP server om UI-ontwerpen direct vanuit Cursor, Claude Code of een ander MCP-compatibel client te genereren, inspecteren en beheren.

Flowstep stelt zijn ontwerptools beschikbaar via het [Model Context Protocol](https://modelcontextprotocol.io/), zodat je AI-assistent UI-schermen kan maken en bijwerken zonder je editor te verlaten.

De server wordt gehost op `https://api.flowstep.ai/mcp` (Streamable HTTP transport). Geen lokaal proces nodig om uit te voeren.

## Wat je kan doen

De server stelt 20 tools beschikbaar verdeeld over zeven categorieën:

| Categorie        | Tools                                                                                         |
| ---------------- | --------------------------------------------------------------------------------------------- |
| **Bestanden**    | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Schermen**     | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **AI-generatie** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Chat**         | `get-chat-history`                                                                            |
| **Ontwerp**      | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**        | `import-figma`                                                                                |
| **Facturering**  | `get-plan-details`                                                                            |

## Veelgebruikte use cases

**Genereer schermen vanuit een prompt** — roep `create-new-design` aan met een beschrijving. Flowstep maakt het bestand en de schermen in één stap. Roep `get-screen-image` aan met de geretourneerde `screenIds` om het resultaat inline te zien.

**Visualiseer een React-component** — upload je `.jsx` of `.tsx` bestand via `upload-attachment` (gebruik `mimeType: text/javascript`), geef vervolgens de geretourneerde attachment door aan `create-new-design` met een bericht waarin je de component beschrijft. Flowstep leest de broncode en genereert een overeenkomstig ontwerpscherm.

**Werk aan een ontwerp** — roep `edit-design` aan met een doel-`screenId` en instructies om het aan te passen, of `regenerate-design` om een scherm helemaal opnieuw te maken.

**Behoud ontwerprichtlijnen** — roep `get-design-guidelines` aan om je huidige stijlregels op te halen (kleuren, typografie, spatiëring, toon), en gebruik `update-design-guidelines` om ze gesynchroniseerd te houden naarmate je ontwerp evolueert. Het doorgeven van consistente richtlijnen aan `create-new-design` of `edit-design` zorgt ervoor dat elk gegenereerd scherm merkconform blijft. Gebruik `delete-design-guidelines` om ze volledig opnieuw in te stellen.

**Importeer vanuit Figma** — roep `import-figma` aan met een Figma framelink en een `fileId` om het frame als bewerkbare elementen in een Flowstep-bestand te brengen. De organisatie van het bestand moet Figma eerst hebben verbonden.

**Controleer je quota** — roep `get-plan-details` aan om je resterende dagelijkse en maandelijkse gebruiksmogelijkheden te zien voordat je een batch generaties start.

## Endpoint

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

Transport: Streamable HTTP. Session model: stateless (elk verzoek is onafhankelijk, geen sessie-ID).

## Volgende stappen

<CardGroup cols={2}>
  <Card title="Quickstart" icon="bolt" href="/nl/mcp/quickstart">
    Eerste tool call in minder dan 5 minuten met Cursor.
  </Card>

  <Card title="Authenticatie" icon="lock" href="/nl/mcp/authentication">
    Hoe OAuth 2.1 PKCE werkt en hoe tokens worden uitgegeven.
  </Card>

  <Card title="Tools" icon="wrench" href="/nl/mcp/tools">
    Volledige input/output referentie voor alle 20 tools.
  </Card>

  <Card title="Voorbeelden" icon="code" href="/nl/mcp/examples">
    End-to-end workflows voor veelgebruikte taken.
  </Card>
</CardGroup>