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

> Verbinden Sie Flowstep mit Ihrem KI-Editor und führen Sie Ihren ersten Tool-Aufruf durch.

## Voraussetzungen

* Ein Flowstep-Konto ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Erfordert Cursor v0.43+**

    ## Schritt 1 — Fügen Sie den Server hinzu

    Erstellen oder bearbeiten Sie `~/.cursor/mcp.json` (global) oder `.cursor/mcp.json` im Projektverzeichnis:

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

    Starten Sie Cursor nach dem Speichern neu.

    ## Schritt 2 — Authentifizieren Sie sich

    Öffnen Sie das Cursor MCP-Panel (Einstellungen → MCP) und klicken Sie auf **Connect** neben Flowstep. Cursor öffnet Ihren Browser zur Flowstep OAuth-Anmeldung. Melden Sie sich mit Ihren Flowstep-Anmeldedaten an (E-Mail/Passwort oder Google). Der Browser leitet Sie zurück und Cursor speichert das Token automatisch.

    <Note>
      Sie benötigen ein Flowstep-Konto, bevor Sie sich authentifizieren können. Wenn Sie noch keins haben, registrieren Sie sich zuerst unter [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## Schritt 3 — Führen Sie einen Tool-Aufruf durch

    In einem Cursor-Chat fragen Sie:

    > "List my Flowstep files"

    Cursor ruft `list-files` auf und gibt Ihre Dateiliste zurück. Wenn die Antwort leer ist, erstellen Sie zuerst eine Datei:

    > "Create a new Flowstep file called 'Dashboard'"

    ## Schritt 4 — Generieren Sie einen Screen

    ```
    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 ruft `create-new-design` auf (das erstellt die Datei und generiert die Screens in einem Schritt), dann `get-screen-image`. Sie sehen das gerenderte Design inline im Chat.
  </Tab>

  <Tab title="Claude Code">
    **Erfordert Claude Code CLI**

    ## Schritt 1 — Fügen Sie den Server hinzu

    Erstellen Sie `.mcp.json` im Projektverzeichnis (projektgebunden) oder `~/.claude/mcp.json` (global):

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

    <Note>
      Das Feld `"type": "http"` ist für Claude Code HTTP-Server erforderlich. Cursor benötigt es nicht.
    </Note>

    ## Schritt 2 — Authentifizieren Sie sich

    Führen Sie ein beliebiges Flowstep-Tool aus einem Claude Code-Chat aus. Bei der ersten Verwendung öffnet Claude Code Ihren Browser zur Flowstep OAuth-Anmeldung. Melden Sie sich mit Ihren Flowstep-Anmeldedaten an (E-Mail/Passwort oder Google). Der Browser leitet Sie zurück und das Token wird automatisch gespeichert.

    <Note>
      Sie benötigen ein Flowstep-Konto, bevor Sie sich authentifizieren können. Wenn Sie noch keins haben, registrieren Sie sich zuerst unter [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## Schritt 3 — Führen Sie einen Tool-Aufruf durch

    In einem Claude Code-Chat fragen Sie:

    > "List my Flowstep files"

    Claude Code ruft `list-files` auf und gibt Ihre Dateiliste zurück. Wenn die Antwort leer ist, erstellen Sie zuerst eine Datei:

    > "Create a new Flowstep file called 'Dashboard'"

    ## Schritt 4 — Generieren Sie einen Screen

    ```
    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 ruft `create-new-design` auf (das erstellt die Datei und generiert die Screens in einem Schritt), dann `get-screen-image`. Sie sehen das gerenderte Design inline im Chat.
  </Tab>
</Tabs>

## Nächste Schritte

* [Tools-Referenz](/de/mcp/tools) — vollständige Ein-/Ausgabe-Dokumentation für alle 20 Tools
* [Beispiele](/de/mcp/examples) — mehrstufige Workflows
* [Andere Clients](/de/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai