Skip to main content
Flowstep stellt seine Design-Tools über das Model Context Protocol 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:

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

Transport: Streamable HTTP. Sitzungsmodell: zustandslos (jede Anfrage ist unabhängig, keine Sitzungs-ID).

Nächste Schritte

Quickstart

Erstes Tool-Aufrufen in unter 5 Minuten mit Cursor.

Authentifizierung

Wie OAuth 2.1 PKCE funktioniert und wie Tokens ausgegeben werden.

Tools

Vollständige Ein-/Ausgabe-Referenz für alle 20 Tools.

Beispiele

End-to-End-Workflows für häufige Aufgaben.