> ## 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. # Flowstep MCP-Server > Verwenden Sie Flowstep als MCP-Server, um UI-Designs direkt aus Cursor, Claude Code oder einem beliebigen MCP-kompatiblen Client zu generieren, zu prüfen und zu verwalten. Flowstep stellt seine Design-Tools über das [Model Context Protocol](https://modelcontextprotocol.io/) zur Verfügung, damit Ihr KI-Assistent UI-Screens erstellen und überarbeiten kann, ohne Ihren Editor zu verlassen. Der Server wird unter `https://api.flowstep.ai/mcp` gehostet (Streamable HTTP-Transport). Es ist kein lokaler Prozess erforderlich. ## Was Sie tun können Der Server stellt 20 Tools in sieben Kategorien zur Verfügung: | Kategorie | Tools | | ------------------ | --------------------------------------------------------------------------------------------- | | **Dateien** | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file` | | **Screens** | `list-screens`, `get-screen`, `get-screen-image`, `add-screen` | | **KI-Generierung** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` | | **Chat** | `get-chat-history` | | **Design** | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines` | | **Figma** | `import-figma` | | **Abrechnung** | `get-plan-details` | ## Häufige Anwendungsfälle **Generieren Sie Screens aus einem Prompt** — rufen Sie `create-new-design` mit einer Beschreibung auf. Flowstep erstellt die Datei und Screens in einem Schritt. Rufen Sie `get-screen-image` mit den zurückgegebenen `screenIds` auf, um das Ergebnis inline zu sehen. **Visualisieren Sie eine React-Komponente** — laden Sie Ihre `.jsx`- oder `.tsx`-Datei über `upload-attachment` hoch (verwenden Sie `mimeType: text/javascript`), und übergeben Sie dann die zurückgegebene Anlage an `create-new-design` mit einer Nachricht, die die Komponente beschreibt. Flowstep liest den Quellcode und generiert einen passenden Design-Screen. **Überarbeiten Sie ein Design** — rufen Sie `edit-design` mit einem `screenId` und Anweisungen zur Änderung auf, oder verwenden Sie `regenerate-design`, um einen Screen von Grund auf neu zu erstellen. **Verwalten Sie Design-Richtlinien** — rufen Sie `get-design-guidelines` auf, um Ihre aktuellen Stilregeln (Farben, Typografie, Abstände, Ton) abzurufen, und verwenden Sie dann `update-design-guidelines`, um diese bei der Entwicklung Ihres Designs zu synchronisieren. Durch die Weitergabe konsistenter Richtlinien an `create-new-design` oder `edit-design` wird sichergestellt, dass jeder generierte Screen die Marke widerspiegelt. Verwenden Sie `delete-design-guidelines`, um sie vollständig zurückzusetzen. **Importieren Sie aus Figma** — rufen Sie `import-figma` mit einem Figma-Frame-Link und einer `fileId` auf, um den Frame als editierbare Elemente in eine Flowstep-Datei zu bringen. Die Organisation der Datei muss zuerst Figma verbunden haben. **Prüfen Sie das Kontingent** — rufen Sie `get-plan-details` auf, um die verbleibende tägliche und monatliche Nutzung anzuzeigen, bevor Sie mehrere Generierungen starten. ## Endpunkt ``` https://api.flowstep.ai/mcp ``` Transport: Streamable HTTP. Sitzungsmodell: zustandslos (jede Anfrage ist unabhängig, keine Sitzungs-ID). ## Nächste Schritte Erstes Tool-Aufrufen in unter 5 Minuten mit Cursor. Wie OAuth 2.1 PKCE funktioniert und wie Tokens ausgegeben werden. Vollständige Ein-/Ausgabe-Referenz für alle 20 Tools. End-to-End-Workflows für häufige Aufgaben.