MCP-Schnellstart

Voraussetzungen

Ein Flowstep-Konto (app.flowstep.ai)

Verwenden Sie Claude auf claude.ai oder in Claude Desktop? Flowstep ist im Connector-Verzeichnis von Claude gelistet. Fügen Sie es mit einem Klick unter claude.ai/directory/flowstep hinzu. Siehe claude.ai.

Cursor
Claude Code

Erfordert Cursor v0.43+

Schritt 1 — Server hinzufügen

Klicken Sie auf Add Flowstep to Cursor, um den Server mit einem Klick zu installieren. Alternativ erstellen oder bearbeiten Sie ~/.cursor/mcp.json (global) oder .cursor/mcp.json im Projektstammverzeichnis:

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

Starten Sie Cursor nach dem Speichern neu.

Schritt 2 — Authentifizieren

Öffnen Sie das MCP-Panel von Cursor (Settings → MCP) und klicken Sie neben Flowstep auf Connect. Cursor öffnet Ihren Browser mit der Anmeldeseite von Flowstep. Melden Sie sich mit Ihren Flowstep-Zugangsdaten an (E-Mail und Passwort oder Google) und klicken Sie dann auf dem Zustimmungsbildschirm auf Allow. Der Browser leitet zurück, und Cursor speichert das Token automatisch.

Sie benötigen ein Flowstep-Konto, bevor Sie sich authentifizieren. Falls Sie noch keines haben, registrieren Sie sich zuerst unter app.flowstep.ai.

Schritt 3 — Tool-Aufruf ausführen

Fragen Sie in einem Cursor-Chat:

“List my Flowstep files”

Cursor ruft list-files auf und gibt Ihre Dateiliste zurück. Ist die Liste leer, erstellen Sie zuerst eine Datei:

“Create a new Flowstep file called ‘Dashboard‘“

Schritt 4 — Screen generieren

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 ruft ai-design-screens auf (dabei wird eine neue Datei erstellt und die Screens in einem Schritt generiert), danach get-screen-image. Das gerenderte Design sehen Sie direkt im Chat.

Erfordert die Claude-Code-CLI

Schritt 1 — Server hinzufügen

Führen Sie dies in Ihrem Projekt aus:

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

Um den Server mit Ihrem Team zu teilen, fügen Sie ihn stattdessen in .mcp.json im Projektstammverzeichnis hinzu:

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

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

Schritt 2 — Authentifizieren

Führen Sie ein beliebiges Flowstep-Tool in einem Claude-Code-Chat aus. Beim ersten Aufruf öffnet Claude Code Ihren Browser mit der Anmeldeseite von Flowstep. Melden Sie sich mit Ihren Flowstep-Zugangsdaten an (E-Mail und Passwort oder Google) und klicken Sie dann auf dem Zustimmungsbildschirm auf Allow. Der Browser leitet zurück, und das Token wird automatisch gespeichert. Geben Sie /mcp in Claude Code ein, um zu prüfen, ob Flowstep verbunden ist.

Sie benötigen ein Flowstep-Konto, bevor Sie sich authentifizieren. Falls Sie noch keines haben, registrieren Sie sich zuerst unter app.flowstep.ai.

Schritt 3 — Tool-Aufruf ausführen

Fragen Sie in einem Claude-Code-Chat:

“List my Flowstep files”

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

“Create a new Flowstep file called ‘Dashboard‘“

Schritt 4 — Screen generieren

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 ruft ai-design-screens auf (dabei wird eine neue Datei erstellt und die Screens in einem Schritt generiert), danach get-screen-image. Das gerenderte Design sehen Sie direkt im Chat.

ai-design-screens und die anderen KI-Design-Tools greifen auf Ihr Flowstep-Nachrichtenkontingent zu. Das Auflisten, Lesen und Rendern von Screens ist kostenlos. Weitere Informationen finden Sie unter Nutzungslimits.

Nächste Schritte

Tool-Referenz: vollständige Ein- und Ausgabedokumentation aller 22 Tools
Beispiele: mehrstufige Workflows
Weitere Clients: Windsurf, Codex, Claude Desktop, claude.ai

Erste Schritte

Flowstep verwenden

Teams & Organisationen

Export & Integrationen

MCP-Server

Abrechnung & Tarife

Sicherheit & Datenschutz

Voraussetzungen

Schritt 1 — Server hinzufügen

Schritt 2 — Authentifizieren

Schritt 3 — Tool-Aufruf ausführen

Schritt 4 — Screen generieren

Schritt 1 — Server hinzufügen

Schritt 2 — Authentifizieren

Schritt 3 — Tool-Aufruf ausführen

Schritt 4 — Screen generieren

Nächste Schritte

​Voraussetzungen

​Schritt 1 — Server hinzufügen

​Schritt 2 — Authentifizieren

​Schritt 3 — Tool-Aufruf ausführen

​Schritt 4 — Screen generieren

​Schritt 1 — Server hinzufügen

​Schritt 2 — Authentifizieren

​Schritt 3 — Tool-Aufruf ausführen

​Schritt 4 — Screen generieren

​Nächste Schritte

Voraussetzungen

Schritt 1 — Server hinzufügen

Schritt 2 — Authentifizieren

Schritt 3 — Tool-Aufruf ausführen

Schritt 4 — Screen generieren

Schritt 1 — Server hinzufügen

Schritt 2 — Authentifizieren

Schritt 3 — Tool-Aufruf ausführen

Schritt 4 — Screen generieren

Nächste Schritte