Приклади MCP

1. Згенеруйте екран і перегляньте його

Найпоширеніший робочий процес: згенеруйте екран (файл створюється в тому самому кроці), а потім перегляньте результат.

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]

Якщо пропустити fileId, файл створюється автоматично. Передайте наявний fileId, щоб натомість додати екрани до цього файлу. Промпт для вашого AI-асистента:

Generate a Flowstep design: a mobile sign-in screen for a developer tool with email/password and a Google SSO button in dark theme, then show me the image.

2. Візуалізуйте компонент React

Завантажте файл .jsx або .tsx як вкладення і попросіть Flowstep згенерувати відповідний дизайн. Flowstep читає вихідний код і створює екран. Запускати застосунок не потрібно.

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]

Для вихідних файлів довших за 64,000 символів натомість використовуйте upload-attachment з mimeType і fileName, а потім виконайте повернений uploadCommand. Див. upload-attachment. Промпт для вашого AI-асистента:

Read src/components/settings/ApiKeys.tsx, upload it as an attachment, and generate a Flowstep screen that matches the component layout. Show me the rendered image.

3. Ітеруйте над екраном

Змініть існуючий екран на місці за допомогою вільних інструкцій і в тому самому виклику додайте новий екран, який йому відповідає.

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 містить кожен екран, який виклик створив або змінив, тож викличте get-screen-image для кожного з них. Щоб редагувати лише наявний екран, приберіть останнє речення з повідомлення. Щоб змінити лише частину екрана, спершу викличте get-screen-jsx з "includeIds": true і передайте data-id елемента, який хочете змінити, у elementIds. Для однокліцького пресета всього екрана викличте натомість ai-edit-screen-variant, наприклад з "operationVariant": "light_theme" або "different_layout". Промпт для вашого AI-асистента:

In my “Login flow” Flowstep file, switch the sign-in screen to dark mode, add a “Remember me” checkbox below the password field, and add a matching forgot-password screen. Show me the results.

4. Розширте екран до повного потоку

Додайте наступні екрани до наявного дизайну.

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]

Повторіть крок 2 з operationVariant: "error_state" або "empty_state", щоб додати екрани для граничних випадків, або з "web_version" / "tablet_version" для інших платформ.

operationVariant є обов’язковим для ai-generate-screen-variant, а інструмент приймає рівно один screenId. Щоб додати екран, який не є варіантом наявного, використовуйте ai-design-screens з fileId.

5. Передайте екран у свою кодову базу, а потім запишіть зміни назад

Прочитайте екран як JSX, створіть на його основі код і відправте відредагований JSX назад на полотно, не витрачаючи повідомлень.

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]

Пропущені поля (name, fidelity, screenType, colorTheme, fragments) зберігають поточні значення. Щоб залишити оригінал і додати свою версію поруч, викличте add-screen-jsx з screenType і jsx замість replace-screen-jsx. Щоб показати у фреймі власне зображення, завантажте його через upload-attachment і вставте повернений assetUrl в img src у вашому JSX. Див. Зображення в JSX.

6. Перевірте квоту перед пакетним завданням

Перевірте залишкову ємність перед запуском кількох генерацій. get-plan-details можна викликати безкоштовно.

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

Якщо remaining.messages.daily низький, заплануйте пакет на час після 00:00 UTC, коли лічильник скидається.

Початок роботи

Використання Flowstep

Команди та організації

Експорт та інтеграції

Сервер MCP

Оплата та плани

Безпека та конфіденційність

Приклади MCP

1. Згенеруйте екран і перегляньте його

2. Візуалізуйте компонент React

3. Ітеруйте над екраном

4. Розширте екран до повного потоку

5. Передайте екран у свою кодову базу, а потім запишіть зміни назад

6. Перевірте квоту перед пакетним завданням

​1. Згенеруйте екран і перегляньте його

​2. Візуалізуйте компонент React

​3. Ітеруйте над екраном

​4. Розширте екран до повного потоку

​5. Передайте екран у свою кодову базу, а потім запишіть зміни назад

​6. Перевірте квоту перед пакетним завданням

1. Згенеруйте екран і перегляньте його

2. Візуалізуйте компонент React

3. Ітеруйте над екраном

4. Розширте екран до повного потоку

5. Передайте екран у свою кодову базу, а потім запишіть зміни назад

6. Перевірте квоту перед пакетним завданням