Przykłady MCP

1. Wygeneruj i wyświetl podgląd ekranu

Najczęstszy przepływ pracy: wygeneruj ekran (plik zostanie utworzony w tym samym kroku), a następnie wyświetl wynik.

1. list-files         {}
                      → { "files": [ ... ] }          // check for an existing file first

2. ai-design-screens  { "message": "Mobile sign-in screen for a developer tool.
                                    Email/password fields, Google SSO button, dark theme." }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"],
                          "designGuidelinesUpdated": null }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

Pominięcie fileId tworzy nowy plik automatycznie. Przekaż istniejący fileId, aby zamiast tego dodać ekrany do tego pliku. Prompt do asystenta AI:

Wygeneruj projekt Flowstep: ekran logowania do aplikacji mobilnej dla narzędzia dla programistów, z polami email i hasło oraz przyciskiem Google SSO w ciemnym motywie. Następnie pokaż mi obraz.

2. Wizualizuj komponent React

Prześlij plik .jsx lub .tsx jako załącznik i poproś Flowstep o wygenerowanie pasującego projektu. Flowstep odczyta źródło i wygeneruje ekran. Nie musisz uruchamiać aplikacji.

1. upload-attachment  { "text": "<UTF-8 contents of ApiKeys.tsx>",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "assetUrl": "...", "type": "document",
                          "mimeType": "text/javascript" }

2. ai-design-screens  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

Dla plików źródłowych dłuższych niż 64 000 znaków użyj zamiast tego upload-attachment z mimeType i fileName, a następnie uruchom zwrócone uploadCommand. Zobacz upload-attachment. Prompt do asystenta AI:

Przeczytaj src/components/settings/ApiKeys.tsx, prześlij go jako załącznik i wygeneruj ekran Flowstep, który odpowiada układowi komponentu. Pokaż mi wyrenderowany obraz.

3. Iteruj nad ekranem

Zmień istniejący ekran w miejscu za pomocą instrukcji w dowolnej formie, a w tym samym wywołaniu dodaj nowy ekran pasujący do niego.

1. list-screens       { "fileId": "FILE_ID" }
                      → { "screens": [{ "screenId": "SCREEN_ID", "name": "Sign-in", ... }] }

2. ai-design-screens  { "fileId": "FILE_ID",
                        "message": "Edit this sign-in screen: switch it to dark mode and add a
                                    'Remember me' checkbox below the password field. Then add a
                                    matching forgot-password screen.",
                        "elementIds": ["SCREEN_ID"] }
                      → { "status": "generated", "fileId": "FILE_ID",
                          "screenIds": ["SCREEN_ID", "NEW_SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]
   get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]

screenIds zawiera każdy ekran zbudowany lub zmieniony w ramach wywołania, więc wywołaj get-screen-image dla każdego z nich. Jeśli chcesz tylko edytować istniejący ekran, pomiń ostatnie zdanie wiadomości. Aby zmienić tylko część ekranu, najpierw wywołaj get-screen-jsx z "includeIds": true, a następnie przekaż data-id elementu, który chcesz zmienić, w elementIds. Aby zastosować jednym kliknięciem gotowy preset do całego ekranu, wywołaj zamiast tego ai-edit-screen-variant, na przykład z "operationVariant": "light_theme" lub "different_layout". Prompt do asystenta AI:

W moim pliku Flowstep “Login flow” przełącz ekran logowania na ciemny motyw, dodaj pole wyboru “Remember me” pod polem hasła i dodaj pasujący ekran przypomnienia hasła. Pokaż mi wyniki.

4. Rozwiń ekran do pełnego przepływu

Dodaj kolejne ekrany do istniejącego projektu.

1. list-screens                { "fileId": "FILE_ID" }
                               → { "screens": [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }] }

2. ai-generate-screen-variant  { "fileId": "FILE_ID",
                                 "screenId": "BASE_SCREEN_ID",
                                 "operationVariant": "next_screen" }
                               → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"], ... }

3. get-screen-image            { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                               → [inline PNG]

Powtórz krok 2 z operationVariant: "error_state" lub "empty_state", aby dodać ekrany dla przypadków brzegowych, albo z "web_version" lub "tablet_version" dla innych platform.

operationVariant jest wymagane dla ai-generate-screen-variant, a narzędzie przyjmuje dokładnie jeden screenId. Aby dodać ekran, który nie jest wariantem istniejącego, użyj ai-design-screens z fileId.

5. Przekaż ekran do bazy kodu, a następnie zapisz zmiany z powrotem

Odczytaj ekran jako JSX, zbuduj na jego podstawie, a następnie wypchnij zmieniony JSX z powrotem na płótno. Nie zużywa to wiadomości.

1. get-screen-jsx      { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → { "name": "Settings", "fidelity": "ui", "screenType": "web",
                           "colorTheme": "default", "jsx": "<div ...>...</div>", "fragments": [] }

2. replace-screen-jsx  { "fileId": "FILE_ID", "screenId": "SCREEN_ID",
                         "jsx": "<div ...>...edited...</div>" }
                       → { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }

3. get-screen-image    { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → [inline PNG]

Pominięte pola (name, fidelity, screenType, colorTheme, fragments) zachowują bieżące wartości. Aby zachować oryginał i dodać obok niego swoją wersję, wywołaj add-screen-jsx z screenType i jsx zamiast replace-screen-jsx. Aby pokazać na ekranie własny obraz, prześlij go za pomocą upload-attachment i wstaw zwrócony assetUrl do img src w swoim JSX. Zobacz Obrazy w JSX.

6. Sprawdź limit przed zadaniem wsadowym

Sprawdź pozostały limit przed uruchomieniem wielu generacji. get-plan-details można wywoływać bezpłatnie.

get-plan-details {}
→ { "plan": { ... }, "subscription": { ... }, "limits": { ... }, "usage": { ... },
    "remaining": { "messages": { "daily": ..., "monthly": ... } } }

Jeśli remaining.messages.daily jest niski, zaplanuj zadanie wsadowe na czas po 00:00 UTC, kiedy limit się resetuje.

Pierwsze kroki

Korzystanie z Flowstep

Zespoły i organizacje

Eksport i integracje

Serwer MCP

Rozliczenia i plany

Bezpieczeństwo i prywatność

1. Wygeneruj i wyświetl podgląd ekranu

2. Wizualizuj komponent React

3. Iteruj nad ekranem

4. Rozwiń ekran do pełnego przepływu

5. Przekaż ekran do bazy kodu, a następnie zapisz zmiany z powrotem

6. Sprawdź limit przed zadaniem wsadowym

​1. Wygeneruj i wyświetl podgląd ekranu

​2. Wizualizuj komponent React

​3. Iteruj nad ekranem

​4. Rozwiń ekran do pełnego przepływu

​5. Przekaż ekran do bazy kodu, a następnie zapisz zmiany z powrotem

​6. Sprawdź limit przed zadaniem wsadowym

1. Wygeneruj i wyświetl podgląd ekranu

2. Wizualizuj komponent React

3. Iteruj nad ekranem

4. Rozwiń ekran do pełnego przepływu

5. Przekaż ekran do bazy kodu, a następnie zapisz zmiany z powrotem

6. Sprawdź limit przed zadaniem wsadowym