Przejdź do głównej treści
Flowstep to płótno projektowe dla oprogramowania budowanego przez agentów. Serwer Flowstep MCP udostępnia to płótno przez Model Context Protocol, dzięki czemu agenty, z których Twój zespół już korzysta, mogą projektować ekrany, oglądać wyrenderowany wynik i na jego podstawie budować, bez wychodzenia z edytora lub terminala. Ekrany utworzone przez agenta przez MCP trafiają do tych samych plików Flowstep, w których pracuje Twój zespół. Pozostają edytowalne na płótnie, możliwe do udostępnienia i gotowe do eksportu lub skopiowania do Figmy. Serwer jest hostowany pod adresem https://api.flowstep.ai/mcp (transport Streamable HTTP). Nie musisz uruchamiać lokalnego procesu ani zarządzać kluczem API. Klienty logują się na Twoje konto Flowstep przez OAuth.

​
Co możesz robić

Serwer udostępnia 22 narzędzia w ośmiu kategoriach: Trzy narzędzia z kategorii Projektowanie AI korzystają z tego samego limitu wiadomości co aplikacja Flowstep. Wszystkie pozostałe narzędzia są bezpłatne. Zobacz Limity użycia.

​
Typowe przypadki użycia

Generuj ekrany z promptu: wywołaj ai-design-screens z opisem. Pomiń fileId, a Flowstep utworzy plik i ekrany w jednym kroku. Wywołaj get-screen-image dla każdego zwróconego screenId, aby zobaczyć wynik w rozmowie. Wizualizuj komponent React: prześlij źródło .jsx lub .tsx za pomocą upload-attachment (mimeType: text/javascript), a następnie przekaż zwrócony załącznik do ai-design-screens z wiadomością opisującą ekran. Flowstep odczyta źródło i wygeneruje pasujący projekt. Iteruj nad projektem: wywołaj ai-design-screens z jednym lub kilkoma screenId (albo identyfikatorami poszczególnych elementów) w elementIds i instrukcjami w dowolnej formie, aby zmienić je w miejscu. To samo wywołanie może też dodać nowe ekrany, więc jedno żądanie może edytować ekran i zbudować następny. Użyj ai-edit-screen-variant, aby zastosować preset, taki jak ciemny motyw lub inny układ, do jednego całego ekranu. Rozwijaj przepływ: wywołaj ai-generate-screen-variant, aby dodać następny ekran, stan błędu lub pusty stan albo wersję webową, tabletową lub mobilną istniejącego ekranu. Pracuj od kodu: odczytaj dowolny ekran jako JSX za pomocą get-screen-jsx, a następnie zapisz własny JSX za pomocą add-screen-jsx (nowy ekran) lub replace-screen-jsx (nadpisanie istniejącego). Aby użyć własnych obrazów, prześlij je za pomocą upload-attachment i wstaw zwrócony assetUrl do swojego JSX. Te narzędzia są bezpłatne. Utrzymuj zgodność z marką: użyj update-design-guidelines, aby zapisać kolory, typografię i zasady komponentów w pliku jako tekst DESIGN.md. Generacje AI dla tego pliku będą się do nich stosować. Odczytaj je za pomocą get-design-guidelines lub wyczyść za pomocą delete-design-guidelines. Importuj z Figmy: wywołaj import-figma z linkiem do ramki Figma i fileId, aby przenieść ramkę na płótno jako edytowalne elementy. Organizacja, do której należy plik, musi najpierw mieć połączoną Figmę. Sprawdź swój limit: wywołaj get-plan-details, aby zobaczyć plan, zużycie i pozostałe wiadomości przed serią generacji.

​
Endpoint

Transport: Streamable HTTP. Model sesji: bezstanowy (każde żądanie jest niezależne, bez identyfikatora sesji). Serwer obsługuje wersję protokołu MCP 2026-07-28, którą ogłasza pod adresem https://api.flowstep.ai/.well-known/mcp.json. Klienty korzystające z wcześniejszego protokołu 2025-11-25 łączą się z tym samym endpointem.

​
Następne kroki

Szybki start

Połącz klienta i wykonaj pierwsze wywołanie narzędzia.

Uwierzytelnianie

Jak działa logowanie OAuth 2.1 PKCE i zatwierdzanie dostępu.

Narzędzia

Pełna dokumentacja wejść i wyjść dla wszystkich 22 narzędzi.

Przykłady

Kompletne przepływy pracy dla typowych zadań.