MCP-snelstart

Vereisten

Een Flowstep-account (app.flowstep.ai)

Gebruik je Claude op claude.ai of in Claude Desktop? Flowstep staat als vermelde connector in de directory van Claude. Voeg het met één klik toe vanaf claude.ai/directory/flowstep. Zie claude.ai.

Cursor
Claude Code

Vereist Cursor v0.43+

Stap 1 — De server toevoegen

Klik op Add Flowstep to Cursor om hem met één klik te installeren. Je kunt ook ~/.cursor/mcp.json (globaal) of .cursor/mcp.json in je projectroot aanmaken of bewerken:

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

Start Cursor opnieuw op na het opslaan.

Stap 2 — Authenticeren

Open het MCP-paneel van Cursor (Settings → MCP) en klik naast Flowstep op Connect. Cursor opent je browser op de Flowstep-inlogpagina. Log in met je Flowstep-gegevens (e-mail/wachtwoord of Google) en klik daarna op Allow op het toestemmingsscherm. De browser stuurt je terug en Cursor slaat het token automatisch op.

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

Stap 3 — Een toolaanroep uitvoeren

Vraag in een Cursor-chat:

“Toon mijn Flowstep-bestanden”

Cursor roept list-files aan en geeft je bestandslijst terug. Is het resultaat leeg, maak dan eerst een bestand aan:

“Maak een nieuw Flowstep-bestand met de naam ‘Dashboard’ aan”

Stap 4 — Een scherm genereren

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Cursor roept ai-design-screens aan (dat in één stap een nieuw bestand aanmaakt en de schermen genereert), daarna get-screen-image. Je ziet het gerenderde ontwerp inline in de chat.

Vereist Claude Code CLI

Stap 1 — De server toevoegen

Voer dit uit in je project:

claude mcp add --transport http flowstep https://api.flowstep.ai/mcp

Om de server met je team te delen, voeg je hem in plaats daarvan toe aan .mcp.json in je projectroot:

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

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

Stap 2 — Authenticeren

Voer een Flowstep-tool uit vanuit een Claude Code-chat. Bij het eerste gebruik opent Claude Code je browser op de Flowstep-inlogpagina. Log in met je Flowstep-gegevens (e-mail/wachtwoord of Google) en klik daarna op Allow op het toestemmingsscherm. De browser stuurt je terug en het token wordt automatisch opgeslagen. Typ /mcp in Claude Code om te controleren of Flowstep verbonden is.

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

Stap 3 — Een toolaanroep uitvoeren

Vraag in een Claude Code-chat:

“Toon mijn Flowstep-bestanden”

Claude Code roept list-files aan en geeft je bestandslijst terug. Is het resultaat leeg, maak dan eerst een bestand aan:

“Maak een nieuw Flowstep-bestand met de naam ‘Dashboard’ aan”

Stap 4 — Een scherm genereren

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Claude Code roept ai-design-screens aan (dat in één stap een nieuw bestand aanmaakt en de schermen genereert), daarna get-screen-image. Je ziet het gerenderde ontwerp inline in de chat.

ai-design-screens en de andere AI-ontwerptools gebruiken je Flowstep-berichtenquotum. Schermen weergeven, lezen en renderen is gratis. Zie Gebruikslimieten.

Volgende stappen

Tools-referentie: volledige invoer- en uitvoerdocumentatie voor alle 22 tools
Voorbeelden: workflows met meerdere stappen
Andere clients: Windsurf, Codex, Claude Desktop, claude.ai

Aan de slag

Flowstep gebruiken

Teams & organisaties

Exporteren & integraties

MCP-server

Facturering & abonnementen

Beveiliging & privacy

Vereisten

Stap 1 — De server toevoegen

Stap 2 — Authenticeren

Stap 3 — Een toolaanroep uitvoeren

Stap 4 — Een scherm genereren

Stap 1 — De server toevoegen

Stap 2 — Authenticeren

Stap 3 — Een toolaanroep uitvoeren

Stap 4 — Een scherm genereren

Volgende stappen

​Vereisten

​Stap 1 — De server toevoegen

​Stap 2 — Authenticeren

​Stap 3 — Een toolaanroep uitvoeren

​Stap 4 — Een scherm genereren

​Stap 1 — De server toevoegen

​Stap 2 — Authenticeren

​Stap 3 — Een toolaanroep uitvoeren

​Stap 4 — Een scherm genereren

​Volgende stappen

Vereisten

Stap 1 — De server toevoegen

Stap 2 — Authenticeren

Stap 3 — Een toolaanroep uitvoeren

Stap 4 — Een scherm genereren

Stap 1 — De server toevoegen

Stap 2 — Authenticeren

Stap 3 — Een toolaanroep uitvoeren

Stap 4 — Een scherm genereren

Volgende stappen