MCP Quickstart

Vereisten

Een Flowstep-account (app.flowstep.ai)

Cursor
Claude Code

Vereist Cursor v0.43+

Stap 1 — Voeg de server toe

Maak of bewerk ~/.cursor/mcp.json (globaal) of .cursor/mcp.json in de root van je project:

{
  "mcpServers": {
    "flowstep": {
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

Start Cursor opnieuw op na het opslaan.

Stap 2 — Authenticatie

Open het Cursor MCP-paneel (Settings → MCP) en klik Connect naast Flowstep. Cursor opent je browser naar de Flowstep OAuth-aanmelding. Meld je aan met je Flowstep-gegevens (e-mail/wachtwoord of Google). De browser stuurt je terug en Cursor slaat de token automatisch op.

Je hebt een Flowstep-account nodig voordat je je kunt authenticeren. Als je nog geen account hebt, meld je eerst aan op app.flowstep.ai.

Stap 3 — Voer een tool call uit

Vraag in een Cursor-chat:

“List my Flowstep files”

Cursor roept list-files aan en retourneert je bestandenlijst. Als het antwoord leeg is, maak eerst een bestand aan:

“Create a new Flowstep file called ‘Dashboard‘“

Stap 4 — Genereer een scherm

Create a new Flowstep file called "Login flow", then generate a mobile login screen
for a SaaS app with email/password fields and a Google sign-in button.
After it finishes, show me the image.

Cursor roept create-new-design aan (waarmee het bestand en de schermen in één stap worden gemaakt), en vervolgens get-screen-image. Je ziet het gerendereerde ontwerp inline in de chat.

Vereist Claude Code CLI

Stap 1 — Voeg de server toe

Maak .mcp.json in de root van je project (projectgerelateerd) of ~/.claude/mcp.json (globaal):

{
  "mcpServers": {
    "flowstep": {
      "type": "http",
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

Het "type": "http" veld is vereist voor Claude Code HTTP-servers. Cursor heeft het niet nodig.

Stap 2 — Authenticatie

Voer een Flowstep-tool uit vanuit een Claude Code-chat. Bij eerste gebruik opent Claude Code je browser naar de Flowstep OAuth-aanmelding. Meld je aan met je Flowstep-gegevens (e-mail/wachtwoord of Google). De browser stuurt je terug en de token wordt automatisch opgeslagen.

Je hebt een Flowstep-account nodig voordat je je kunt authenticeren. Als je nog geen account hebt, meld je eerst aan op app.flowstep.ai.

Stap 3 — Voer een tool call uit

Vraag in een Claude Code-chat:

“List my Flowstep files”

Claude Code roept list-files aan en retourneert je bestandenlijst. Als het antwoord leeg is, maak eerst een bestand aan:

“Create a new Flowstep file called ‘Dashboard‘“

Stap 4 — Genereer een scherm

Create a new Flowstep file called "Login flow", then generate a mobile login screen
for a SaaS app with email/password fields and a Google sign-in button.
After it finishes, show me the image.

Claude Code roept create-new-design aan (waarmee het bestand en de schermen in één stap worden gemaakt), en vervolgens get-screen-image. Je ziet het gerendereerde ontwerp inline in de chat.

Volgende stappen

Tools referentie — volledige input/output docs voor alle 20 tools
Voorbeelden — workflows met meerdere stappen
Andere clients — Windsurf, Claude Desktop, claude.ai

Aan de slag

Flowstep gebruiken

Teams & organisaties

Exporteren & integraties

MCP-server

Facturering & abonnementen

Beveiliging & privacy

Vereisten

Stap 1 — Voeg de server toe

Stap 2 — Authenticatie

Stap 3 — Voer een tool call uit

Stap 4 — Genereer een scherm

Stap 1 — Voeg de server toe

Stap 2 — Authenticatie

Stap 3 — Voer een tool call uit

Stap 4 — Genereer een scherm

Volgende stappen

​Vereisten

​Stap 1 — Voeg de server toe

​Stap 2 — Authenticatie

​Stap 3 — Voer een tool call uit

​Stap 4 — Genereer een scherm

​Stap 1 — Voeg de server toe

​Stap 2 — Authenticatie

​Stap 3 — Voer een tool call uit

​Stap 4 — Genereer een scherm

​Volgende stappen

Vereisten

Stap 1 — Voeg de server toe

Stap 2 — Authenticatie

Stap 3 — Voer een tool call uit

Stap 4 — Genereer een scherm

Stap 1 — Voeg de server toe

Stap 2 — Authenticatie

Stap 3 — Voer een tool call uit

Stap 4 — Genereer een scherm

Volgende stappen