Zum Hauptinhalt springen
Flowstep ist die Design-Canvas für von Agenten entwickelte Software. Der Flowstep-MCP-Server stellt diese Canvas über das Model Context Protocol bereit. So können die Agenten, die Ihr Team bereits nutzt, Screens entwerfen, das gerenderte Ergebnis betrachten und daraus aufbauen, ohne den Editor oder das Terminal zu verlassen. Screens, die ein Agent über MCP erstellt, landen in denselben Flowstep-Dateien, mit denen Ihr Team arbeitet. Sie bleiben auf der Canvas bearbeitbar, lassen sich teilen und sind bereit für den Export oder zum Kopieren nach Figma. Der Server ist unter https://api.flowstep.ai/mcp gehostet (Streamable-HTTP-Transport). Sie müssen keinen lokalen Prozess ausführen und keinen API-Schlüssel verwalten. Clients melden sich per OAuth mit Ihrem Flowstep-Konto an.

​
Was Sie tun können

Der Server stellt 22 Tools in acht Kategorien bereit: Die drei KI-Design-Tools nutzen dasselbe Nachrichtenkontingent wie die Flowstep-App. Alle anderen Tools sind kostenlos. Weitere Informationen finden Sie unter Nutzungslimits.

​
Häufige Anwendungsfälle

Screens aus einem Prompt generieren: Rufen Sie ai-design-screens mit einer Beschreibung auf. Lassen Sie fileId weg, dann erstellt Flowstep Datei und Screens in einem Schritt. Rufen Sie für jede zurückgegebene screenId get-screen-image auf, um das Ergebnis direkt zu sehen. Eine React-Komponente visualisieren: Laden Sie Ihre .jsx- oder .tsx-Quelldatei mit upload-attachment hoch (mimeType: text/javascript). Übergeben Sie den zurückgegebenen Anhang dann mit einer Nachricht, die den Screen beschreibt, an ai-design-screens. Flowstep liest den Quellcode und erzeugt ein passendes Design. Ein Design weiterentwickeln: Rufen Sie ai-design-screens mit einer oder mehreren screenIds (oder einzelnen Element-IDs) in elementIds und freien Anweisungen auf, um sie direkt zu ändern. Derselbe Aufruf kann auch neue Screens hinzufügen, sodass eine Anfrage einen Screen bearbeitet und den nächsten erstellt. Verwenden Sie ai-edit-screen-variant, um ein Preset, etwa ein Dark Theme oder ein anderes Layout, auf einen ganzen Screen anzuwenden. Einen Flow erweitern: Rufen Sie ai-generate-screen-variant auf, um den nächsten Screen, einen Fehler- oder Leerzustand oder eine Web-, Tablet- oder Mobilversion eines bestehenden Screens hinzuzufügen. Code-first arbeiten: Lesen Sie einen beliebigen Screen mit get-screen-jsx als JSX und schreiben Sie Ihr eigenes JSX mit add-screen-jsx (neuer Screen) oder replace-screen-jsx (bestehenden Screen überschreiben) zurück. Um eigene Bilder zu verwenden, laden Sie sie mit upload-attachment hoch und fügen die zurückgegebene assetUrl in Ihr JSX ein. Diese Tools sind kostenlos. Ergebnisse markenkonform halten: Speichern Sie mit update-design-guidelines Ihre Farben, Typografie und Komponentenregeln als DESIGN.md-Text in einer Datei. KI-Generierungen mit dieser Datei folgen diesen Regeln. Lesen Sie sie mit get-design-guidelines aus oder entfernen Sie sie mit delete-design-guidelines. Aus Figma importieren: Rufen Sie import-figma mit einem Figma-Frame-Link und einer fileId auf, um den Frame als bearbeitbare Elemente auf die Canvas zu holen. Die Organisation der Datei muss zuerst Figma verbunden haben. Kontingent prüfen: Rufen Sie get-plan-details auf, um Ihren Tarif, Ihre Nutzung und die verbleibenden Nachrichten zu sehen, bevor Sie einen Batch von Generierungen starten.

​
Endpunkt

Transport: Streamable HTTP. Sitzungsmodell: zustandslos. Jede Anfrage ist unabhängig, es gibt keine Sitzungs-ID. Der Server unterstützt die MCP-Protokollversion 2026-07-28, die er unter https://api.flowstep.ai/.well-known/mcp.json ankündigt. Clients mit dem früheren Protokoll 2025-11-25 verbinden sich mit demselben Endpunkt.

​
Nächste Schritte

Schnellstart

Verbinden Sie einen Client und führen Sie Ihren ersten Tool-Aufruf aus.

Authentifizierung

So funktionieren die Anmeldung per OAuth 2.1 PKCE und die Genehmigung.

Tools

Vollständige Referenz für Ein- und Ausgaben aller 22 Tools.

Beispiele

End-to-End-Workflows für gängige Aufgaben.