MCP Quickstart

Voraussetzungen

Ein Flowstep-Konto (app.flowstep.ai)

Cursor
Claude Code

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:

{
  "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.

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.

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.

Erfordert Claude Code CLI

Schritt 1 — Fügen Sie den Server hinzu

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

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

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

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.

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.

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.

Nächste Schritte

Tools-Referenz — vollständige Ein-/Ausgabe-Dokumentation für alle 20 Tools
Beispiele — mehrstufige Workflows
Andere Clients — Windsurf, Claude Desktop, claude.ai

Erste Schritte

Flowstep verwenden

Teams & Organisationen

Export & Integrationen

MCP-Server

Abrechnung & Tarife

Sicherheit & Datenschutz

Voraussetzungen

Schritt 1 — Fügen Sie den Server hinzu

Schritt 2 — Authentifizieren Sie sich

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

Schritt 4 — Generieren Sie einen Screen

Schritt 1 — Fügen Sie den Server hinzu

Schritt 2 — Authentifizieren Sie sich

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

Schritt 4 — Generieren Sie einen Screen

Nächste Schritte

​Voraussetzungen

​Schritt 1 — Fügen Sie den Server hinzu

​Schritt 2 — Authentifizieren Sie sich

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

​Schritt 4 — Generieren Sie einen Screen

​Schritt 1 — Fügen Sie den Server hinzu

​Schritt 2 — Authentifizieren Sie sich

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

​Schritt 4 — Generieren Sie einen Screen

​Nächste Schritte

Voraussetzungen

Schritt 1 — Fügen Sie den Server hinzu

Schritt 2 — Authentifizieren Sie sich

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

Schritt 4 — Generieren Sie einen Screen

Schritt 1 — Fügen Sie den Server hinzu

Schritt 2 — Authentifizieren Sie sich

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

Schritt 4 — Generieren Sie einen Screen

Nächste Schritte