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

# MCP Quickstart

> Verbind Flowstep met je AI-editor en voer je eerste tool call uit.

## Vereisten

* Een Flowstep-account ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **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:

    ```json theme={"system"}
    {
      "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.

    <Note>
      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](https://app.flowstep.ai).
    </Note>

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

  <Tab title="Claude Code">
    **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):

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

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

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

    <Note>
      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](https://app.flowstep.ai).
    </Note>

    ## 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.
  </Tab>
</Tabs>

## Volgende stappen

* [Tools referentie](/nl/mcp/tools) — volledige input/output docs voor alle 20 tools
* [Voorbeelden](/nl/mcp/examples) — workflows met meerdere stappen
* [Andere clients](/nl/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai