Довідник інструментів MCP

Щоб отримати результат успішного виклику, кожен інструмент, крім get-screen-image, повертає свій результат двічі: як structuredContent (перевірений за опублікованою схемою вихідних даних інструмента) і як той самий об’єкт, серіалізований у текстовий блок { type: "text", text: "<json-string>" } для клієнтів, які не читають structured content. get-screen-image повертає лише блок зображення MCP: { type: "image", data: "<base64>", mimeType: "image/png" }. Якщо виклик завершується помилкою, встановлюється isError: true, а текстовий блок містить коротке повідомлення про помилку. Помилки, на які можна вплинути, як-от невідповідність назви під час видалення, некоректне посилання на Figma, некоректні рекомендації з дизайну, проблема з вкладенням або тайм-аут генерації, пояснюють, що потрібно виправити. Інші збої повертають загальне повідомлення, наприклад Failed to list files.

Ціни: три інструменти AI-дизайну: ai-design-screens, ai-generate-screen-variant і ai-edit-screen-variant, використовують ту саму квоту повідомлень, що й застосунок Flowstep. Усі інші інструменти безкоштовні. Див. Ліміти використання.

Кожен інструмент також публікує анотації MCP, щоб ваш клієнт знав, що він робить. Інструменти delete-file, delete-screen, delete-design-guidelines, replace-screen-jsx, ai-design-screens і ai-edit-screen-variant позначено як деструктивні, оскільки вони видаляють або перезаписують наявний вміст.

Інструменти для файлів

`list-files`

Отримайте метадані ваших файлів Flowstep. Спершу викличте цей інструмент, щоб перевірити, чи вже існує відповідний файл. Він не повертає вміст екранів. Для цього використовуйте get-screen-image або get-screen-jsx. Вхідні дані

Параметр	Тип	За замовчуванням	Опис
`orderByCreation`	`boolean`	`true`	Сортувати від найновіших за `created_at` (`true`) або за `updated_at` (`false`). Використовуйте `false`, щоб знайти нещодавно змінені файли
`limit`	`integer` (1–100)	`20`	Максимальна кількість файлів у відповіді. Повна сторінка може означати, що файлів більше
`offset`	`integer` (≥0)	`0`	Скільки файлів пропустити. Наступна сторінка має `offset + limit`

Вихідні дані: { files }.

{
  "files": [
    {
      "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
      "name": "Dashboard redesign",
      "created_at": "2026-04-30T15:02:13.120152+00:00",
      "updated_at": "2026-04-30T15:02:13.120152+00:00",
      "organisation_id": "0b7f3c9e-2d4a-4f1b-9a5e-6c8d7e1f2a3b",
      "shared_with_me": false,
      "owner": true,
      "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
    }
  ]
}

owner: true, якщо ви створили файл.
shared_with_me: true, якщо файл був поділений з вами безпосередньо, а не лише через вашу організацію.
url: відкриває файл у редакторі Flowstep.

`get-file`

Отримайте метадані одного файлу. Вміст файлу навмисно не включено. Щоб переглянути екрани, використовуйте get-screen-image або get-screen-jsx, а щоб отримати прикріплені рекомендації, використовуйте get-design-guidelines. Якщо для вас є очікуване запрошення до файлу, виклик get-file його приймає. Вхідні дані

Параметр	Тип	Опис
`id`	`uuid`	ID файлу

Вихідні дані: { file, user_access_level }.

{
  "file": {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "access_level": "private",
    "visibility": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

access_level: private, read або write.
visibility: private, member або public.
user_access_level: ваш доступ до файлу: read або write.

`create-file`

Створіть порожній файл Flowstep без екранів. Щоб створити файл і згенерувати екрани за один крок, викличте натомість ai-design-screens без fileId. Використовуйте create-file для робочих процесів, що починаються з коду, а потім add-screen-jsx. Вхідні дані

Параметр	Тип	Опис
`name`	`string` (мін. 1)	Відображувана назва нового файлу

Вихідні дані: { file, user_access_level }, у тій самій структурі, що й get-file. owner завжди true, а user_access_level завжди write. Використовуйте повернений file.id як fileId у наступних викликах інструментів.

`update-file`

Перейменуйте файл. Вхідні дані

Параметр	Тип	Опис
`id`	`uuid`	ID файлу
`name`	`string` (мін. 1)	Нова відображувана назва

Вихідні дані: { file, user_access_level }, у тій самій структурі, що й get-file.

`delete-file`

Остаточно видаліть файл. name, який ви передаєте, перевіряють щодо поточної відображуваної назви файлу перед видаленням. Якщо вона не збігається, видалення скасовується. Так запобігають випадковому видаленню не того файлу. Агентів інструктують спершу підтвердити дію з вами. Вхідні дані

Параметр	Тип	Опис
`id`	`uuid`	ID файлу
`name`	`string`	Поточна відображувана назва файлу. Має збігатися, інакше видалення скасовується

Вихідні дані: { "deleted": true }

Цю дію неможливо скасувати. Усі екрани у файлі буде видалено.

Інструменти для екранів

`list-screens`

Перелічіть екрани у файлі в порядку полотна. Викличте цей інструмент після list-files, щоб побачити, що вже є у файлі. Використовуйте повернені значення screenId з іншими інструментами для екранів та інструментами AI-дизайну. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	ID файлу

Вихідні дані: { screens }.

{
  "screens": [
    {
      "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
      "name": "Mobile login screen",
      "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
      "fidelity": "ui"
    }
  ]
}

prompt: останній промпт генерації для екрана або порожній рядок, якщо екран ніколи не генерувався (наприклад, екран, доданий через add-screen-jsx).
fidelity: lofi, hifi або ui.

`get-screen-image`

Відрендеріть екран у PNG і поверніть його як вбудоване зображення. Потрібен клієнт, який підтримує блоки вмісту зображень. Викличте його по одному разу для кожного screenId, який повернув інструмент AI-дизайну, add-screen-jsx, replace-screen-jsx або import-figma. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	ID файлу
`screenId`	`uuid`	`screenId` із `list-screens` або з масиву `screenIds`, який повернув інструмент дизайну

Вихідні дані: блок вмісту зображення MCP (image/png). data містить стандартний base64 байтів PNG, а не data URI. Для цього інструмента немає structuredContent.

`get-screen-jsx`

Отримайте екран як JSX разом із його метаданими, щоб створити на його основі код у своїй кодовій базі або відредагувати його й записати назад через replace-screen-jsx. Для візуального перегляду натомість використовуйте get-screen-image. Вхідні дані

Параметр	Тип	За замовчуванням	Опис
`fileId`	`uuid`	—	ID файлу
`screenId`	`uuid`	—	`screenId` із `list-screens` або з масиву `screenIds`, який повернув інструмент дизайну
`includeIds`	`boolean`	`false`	Додає атрибут `data-id` до елементів у `jsx`. Використовуйте його, якщо потрібні ID елементів для передачі як `elementIds` у `ai-design-screens`, щоб редагувати на місці або використовувати як візуальний орієнтир

Вихідні дані: { fileId, screenId, name, prompt, fidelity, screenType, colorTheme, jsx, fragments }.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0",
  "name": "World clock",
  "prompt": "A world clock screen with a city search and alert button",
  "fidelity": "ui",
  "screenType": "iphone-x-vertical",
  "colorTheme": "blue",
  "jsx": "<div className=\"bg-white text-zinc-950 w-full h-fit\">\n  <div className=\"flex p-6 flex-col gap-6\">\n    …\n  </div>\n</div>",
  "fragments": []
}

jsx: лише розмітка. Атрибути data-id включаються, лише якщо includeIds має значення true.
prompt: останній промпт генерації або порожній рядок, якщо екран ніколи не генерувався.
fragments: спільні елементи інтерфейсу, збережені на екрані, як-от панель навігації, заголовок або логотип, у вигляді об’єктів { purpose, markup }. Порожній, якщо їх немає. Передайте їх назад у replace-screen-jsx, щоб зберегти або оновити.

Значення fidelity, screenType і colorTheme див. у розділі Значення полів екрана.

`add-screen-jsx`

Додайте до файлу новий екран із JSX, який ви написали. Це шлях, що починається з коду, і він безкоштовний. Використовуйте ai-design-screens, коли хочете, щоб ШІ Flowstep розробив екран. add-screen-jsx завжди створює новий екран. Щоб перезаписати наявний, використовуйте replace-screen-jsx. Щоб показати завантажене вами зображення, див. Зображення в JSX. Якщо новий екран базується на наявному, почніть з get-screen-jsx (без includeIds) для name, fidelity, screenType, colorTheme і jsx, а потім змініть те, що має відрізнятися. Вхідні дані

Параметр	Тип	За замовчуванням	Опис
`fileId`	`uuid`	—	ID файлу
`name`	`string` (1–100 символів)	—	Необов’язкова відображувана назва. Пропустіть її, щоб екран автоматично назвався `Screen N`
`fidelity`	`string`	`"ui"`	Рівень деталізації екрана
`screenType`	`string`	—	Обов’язкове. Пристрій або область перегляду, для яких розроблено екран
`colorTheme`	`string`	`"default"`	Колірна тема
`jsx`	`string`	—	Лише розмітка JSX. Будь-які атрибути `data-id` ігноруються, і новий екран отримує нові ID елементів

Вихідні дані: { fileId, screenId }. Викличте get-screen-image з screenId, щоб переглянути результат.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf"
}

`replace-screen-jsx`

Перезапишіть наявний екран JSX, який ви написали. Екран зберігає свій screenId і позицію на полотні. Вкладені елементи отримують нові ID. Це шлях, що починається з коду, і він безкоштовний. Для змін за допомогою ШІ використовуйте ai-design-screens або ai-edit-screen-variant, а щоб створити новий екран, використовуйте add-screen-jsx. Почніть з get-screen-jsx (без includeIds), а потім змініть те, що має відрізнятися. Щоб показати завантажене зображення, див. Зображення в JSX. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	ID файлу
`screenId`	`uuid`	Екран, який потрібно перезаписати
`jsx`	`string`	Лише розмітка JSX. Будь-які атрибути `data-id` ігноруються
`name`	`string` (1–100 символів)	Необов’язково. Пропустіть, щоб зберегти поточну назву
`fidelity`	`string`	Необов’язково. Пропустіть, щоб зберегти поточний рівень деталізації
`screenType`	`string`	Необов’язково. Пропустіть, щоб зберегти поточний тип екрана
`colorTheme`	`string`	Необов’язково. Пропустіть, щоб зберегти поточну колірну тему
`fragments`	`{ purpose, markup }[]`	Необов’язкові спільні елементи інтерфейсу з `get-screen-jsx`. Пропустіть, щоб зберегти поточні фрагменти, або передайте `[]`, щоб їх очистити

Вихідні дані: { fileId, screenId }. Викличте get-screen-image з screenId, щоб переглянути результат.

Цей інструмент замінює вміст екрана на місці.

`rename-screen`

Перейменуйте мітку екрана на полотні. Це назва, яку показують list-screens і редактор. Він змінює лише мітку, а не макет, розмір або вміст екрана. Для цього використовуйте ai-design-screens. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	ID файлу
`screenId`	`uuid`	`screenId`, який повернув `list-screens`
`name`	`string` (1–100 символів)	Нова назва екрана. Пробіли на початку й у кінці обрізаються

Вихідні дані: { screenId, name }.

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe", "name": "Checkout — empty cart" }

`delete-screen`

Остаточно видаліть екран із файлу. name, який ви передаєте, перевіряють щодо поточної відображуваної назви екрана. Якщо вона не збігається, видалення скасовується. Агентів інструктують спершу підтвердити дію з вами. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	ID файлу
`screenId`	`uuid`	Екран, який потрібно видалити
`name`	`string`	Поточна відображувана назва екрана. Має збігатися, інакше видалення скасовується

Вихідні дані: { "deleted": true }

Зображення в JSX

add-screen-jsx і replace-screen-jsx приймають зображення в src тегу img або як фон у className через bg-[url(...)]. Пишіть текст alt і підбирайте розмір кожного зображення відповідно до його призначення. Щоб розмістити власне зображення:

Завантажте його через upload-attachment у режимі A (mimeType + fileName) і виконайте повернену uploadCommand.
Якщо type у відповіді дорівнює "image", вставте його assetUrl точно так, як його повернено, у img src або bg-[url(assetUrl)].

Усі інші URL зображень залишайте точно такими, якими їх повернув get-screen-jsx. Не вставляйте path, signedUrl або uploadCommand у src.

<img src="ASSET_URL" alt="Team photo" className="w-full h-48 object-cover rounded-lg" />

Значення полів екрана

get-screen-jsx повертає, а add-screen-jsx і replace-screen-jsx приймають такі значення:

Поле	Значення
`fidelity`	`lofi`, `hifi`, `ui`
`screenType`	`web`, `desktop`, `desktop-large`, `desktop-medium`, `desktop-small`, `tablet`, `ipad-tablet-horizontal`, `ipad-tablet-vertical`, `android-tablet-horizontal`, `android-tablet-vertical`, `mobile_ios`, `mobile_android`, `iphone-vertical`, `iphone-horizontal`, `iphone-x-vertical`, `iphone-x-horizontal`, `android-vertical`, `android-horizontal`, `android-small-vertical`, `android-small-horizontal`
`colorTheme`	`default`, `defaultDark`, `blue`, `blueDark`, `ice`, `iceDark`, `grayscale`, `grayscaleDark`, `green`, `greenDark`, `orange`, `orangeDark`, `red`, `redDark`, `rose`, `roseDark`, `violet`, `violetDark`, `yellow`, `yellowDark`

Інструменти рекомендацій з дизайну

Рекомендації з дизайну — це текст DESIGN.md, збережений у файлі. Якщо їх задано, їх додають до кожної генерації ШІ для цього файлу. Див. Рекомендації з дизайну.

`get-design-guidelines`

Отримайте рекомендації з дизайну, прикріплені до файлу. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	ID файлу

Вихідні дані: { guidelines }.

{
  "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter"
}

guidelines має значення null, якщо рекомендації не задано.

`update-design-guidelines`

Задайте або замініть рекомендації з дизайну для файлу. Передавайте рекомендації як простий рядок у форматі DESIGN.md від Google, а не як об’єкт чи JSON. Якщо ви читаєте їх із файлу, передайте текст цього файлу. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	ID файлу
`designGuidelines`	`string` (мін. 1)	Сирий текст рекомендацій. Має бути простим рядком, а не закодованим у JSON

Правила перевірки

Frontmatter має бути коректно відкрито та закрито
Рядки frontmatter мають бути дійсним YAML у блочному стилі
Основна частина Markdown не повинна містити повторюваних заголовків розділів ##

Якщо перевірка не пройдена, виклик повертає помилку, яка починається з Invalid design guidelines:. Вихідні дані: { updated, warnings? }.

{ "updated": true, "warnings": ["…"] }

warnings містить м’які проблеми перевірки (невідомі ключі, кольори, які не є HEX). Їх прийнято, але ШІ може їх ігнорувати. Якщо немає жодної проблеми, поле пропускається. Повідомте про них користувачу.

`delete-design-guidelines`

Очистіть рекомендації з дизайну для файлу. Видалення рекомендацій, яких не існує, не має ефекту. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	ID файлу

Вихідні дані: { "deleted": true }

Інструменти чату

`get-chat-history`

Отримайте розмову з дизайну, пов’язану з файлом. Це чат Flowstep для файлу, а не розмова вашого клієнта MCP. Використовуйте його, щоб продовжити попередню роботу над файлом. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	ID файлу

Вихідні дані: { messages }. messages порожній, якщо у вас немає розмови з дизайну у файлі. Кожне повідомлення має type ("request" або "response"), author ("human" або "ai") і content_type. Повідомлення-відповіді використовують "text", "summary" або "followup".

{
  "messages": [
    {
      "id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "type": "request",
      "status": "success",
      "content": "Generate a simple mobile login screen with email and password fields",
      "author": "human",
      "content_type": "text",
      "sequence": 1,
      "targets": [],
      "attachments": []
    },
    {
      "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
      "type": "response",
      "status": "success",
      "content": "Generated a mobile login screen with email and password input fields, a sign in button, and a sign up link.",
      "author": "ai",
      "content_type": "summary",
      "sequence": 7,
      "request_message_id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "targets": [{ "target_id": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" }]
    }
  ]
}

Інструменти для вкладень

`upload-attachment`

Завантажте довідковий файл, щоб використати його як вкладення в ai-design-screens, або зображення, щоб розмістити його у вашому JSX через add-screen-jsx або replace-screen-jsx. ai-generate-screen-variant і ai-edit-screen-variant не приймають вкладень. Байти файлів ніколи не проходять через модель, а сервер ніколи не завантажує URL від вашого імені. Щоб посилатися на веб-сторінку, натомість включіть її URL у message для ai-design-screens. Є два режими. Використовуйте лише один з них і не комбінуйте їх. Режим A: файли й зображення (mimeType + fileName) Обов’язковий трикроковий процес для будь-якого зображення, PDF або більшого текстового файлу:

Викличте upload-attachment лише з mimeType і fileName (наприклад, image/png і dog.png). Відповідь — це підготовлене завантаження, а не збережений файл:

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "assetUrl": "https://…",
  "type": "image",
  "mimeType": "image/png",
  "signedUrl": "https://…",
  "uploadCommand": "curl -sS -f -X PUT '…' -H 'Content-Type: image/png' -H 'x-metadata: …' --data-binary @LOCAL_FILE_PATH",
  "nextStep": "…"
}

Замініть LOCAL_FILE_PATH у uploadCommand абсолютним шляхом до вашого файлу та виконайте точно цю команду у своїй оболонці. Вона має завершитися з кодом 0. Токен у signedUrl дозволяє лише це одне завантаження. Якщо пропустити цей крок, сховище залишиться порожнім, і інструмент дизайну не пройде попередню перевірку.
Передавайте до масиву attachments у ai-design-screens лише { id, path, type }, а не signedUrl, uploadCommand або nextStep. Щоб натомість розмістити зображення у вашому JSX, вставте assetUrl у img src або bg-[url(...)] JSX, який ви передаєте в add-screen-jsx або replace-screen-jsx. Див. Зображення в JSX.

Щоб додати віддалений файл як вкладення, спершу завантажте його самостійно на локальний шлях (наприклад, за допомогою curl), а потім виконайте ті самі три кроки. Ніколи не передавайте URL в upload-attachment.

Параметр	Тип	Опис
`mimeType`	enum	MIME-тип файлу. Один із `image/jpeg`, `image/png`, `image/webp`, `application/pdf`, `text/markdown`, `text/plain`, `text/javascript`. Використовуйте `text/javascript` для файлів `.jsx`, `.tsx`, `.js`, `.ts`
`fileName`	`string` (мін. 1)	Вихідна назва файлу з розширенням, наприклад `cat.png` або `design.md`

Режим B: короткий текст (text + mimeType) Завантажте текст, який уже є в контексті. Команда оболонки не потрібна. Відповідь готова до використання одразу:

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "assetUrl": "https://…",
  "type": "document",
  "mimeType": "text/plain"
}

Параметр	Тип	Опис
`text`	`string` (максимум 64,000 символів)	Сирий текстовий вміст. Лише текстові файли. Не використовуйте для зображень або PDF. Якщо текст довший за 64,000 символів, використовуйте режим A
`mimeType`	enum	Один із `text/markdown`, `text/plain`, `text/javascript`

Передайте отримані { id, path, type } до масиву attachments у ai-design-screens. Максимальний розмір файлу в обох режимах становить 3 MB. PDF обмежено 100 сторінками. Вихідні дані: { id, path, assetUrl, type, mimeType, signedUrl?, uploadCommand?, nextStep? }.

type: "image" для файлів зображень і "document" для PDF та текстових файлів.
assetUrl: URL завантаженого файлу, який повертається в обох режимах. Використовуйте його в JSX для add-screen-jsx або replace-screen-jsx лише тоді, коли type дорівнює "image", і лише після того, як виконано uploadCommand із режиму A.
signedUrl, uploadCommand, nextStep: встановлюються лише в режимі A. Не передавайте їх в інструменти дизайну.

Інструменти для Figma

`import-figma`

Імпортуйте фрейм Figma у файл Flowstep як редаговані елементи на його полотні. Кожен імпорт додає новий екран. Імпорт того самого фрейму двічі дасть вам два екрани, тож видаліть старий через delete-screen, якщо хотіли його замінити. Організація, до якої належить файл, має підключити Figma в налаштуваннях Flowstep. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	Файл Flowstep, до якого потрібно імпортувати фрейм. Це не ключ файлу Figma з `figmaUrl`
`figmaUrl`	`string`	Посилання на конкретний фрейм Figma з `node-id`. У Figma клацніть фрейм правою кнопкою миші та виберіть Copy/Paste as → Copy link to selection. Посилання на сторінку імпортує всі фрейми верхнього рівня на цій сторінці (через MCP обмежено 20 фреймами)

Вихідні дані: { fileId, screenId, frameCount? }. screenId — це імпортований екран. Передайте його в get-screen-image, щоб переглянути результат. Коли URL сторінки імпортує кілька фреймів, screenId має значення null, а натомість повертається frameCount. Викличте list-screens, а потім get-screen-image для кожного нового екрана.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe"
}

Інструменти плану й оплати

`get-plan-details`

Отримайте план вашої організації у Flowstep, статус підписки, використання та залишкову квоту. Не приймає вхідних даних. Організація визначається з облікового запису, у який ви ввійшли. Використовуйте його, щоб перевірити свою квоту перед викликом інструментів AI-дизайну. Вихідні дані: { plan, subscription, limits, usage, remaining }.

Поле	Опис
`plan`	`{ name, code, type }`. `type` має значення `"free"` або `"paid"`
`subscription`	`{ isPaid, isTrial, startDate, endDate, trialDaysRemaining }`
`limits`	Ліміти для кожної функції, за ключем функції (наприклад, `messages`). Кожен має необов’язкові об’єкти `daily` і `monthly` зі значеннями `max` і `warn`, а також прапорець `unlimited`
`usage`	Використання для кожної функції на поточний момент у вигляді `{ daily, monthly }`
`remaining`	Залишок квоти для кожної функції у вигляді `{ daily, monthly }`. Пропускається для необмежених функцій

Ліміти залежать від плану. Див. Ціни і Ліміти використання.

Інструменти AI-дизайну

Ці три інструменти створюють дизайн за описом або пресетом. Вони ніколи не приймають і не повторно використовують JSX. Кожен виклик використовує ту саму квоту повідомлень, що й застосунок Flowstep, і блокується до завершення генерації або тайм-ауту (180 секунд).

Інструмент	Для чого використовувати
`ai-design-screens`	Генерувати нові екрани, змінювати наявні на місці або і те, і інше, за вільним описом
`ai-generate-screen-variant`	Додати наступний крок, стан помилки чи порожній стан або варіант для платформи для одного наявного екрана
`ai-edit-screen-variant`	Застосувати пресет редагування або перероблення до одного цілого наявного екрана

Усі три повертають { status, fileId, screenIds, designGuidelinesUpdated }. Викличте get-screen-image по одному разу для кожного screenId, щоб переглянути результат.

designGuidelinesUpdated: короткий опис змін, якщо рекомендації DESIGN.md файлу було автоматично оновлено під час цього ходу. В іншому разі null.

`ai-design-screens`

Згенеруйте один або кілька нових екранів, змініть наявні екрани на місці або і те, і інше в одному виклику за текстовим описом. Це можуть бути нові сценарії, теми, текст, макет або скоординовані зміни кількох екранів. Це той самий дизайн-агент, що й чат у редакторі Flowstep. Він вирішує з вашого message і elementIds, що створити, а що змінити. Не передавайте fileId, щоб почати новий файл. Передайте fileId, щоб працювати в наявному. Якщо запит може стосуватися вже наявного файлу, ваш агент має спершу перевірити list-files і list-screens. Для наступного кроку, стану помилки чи порожнього стану або варіанта для платформи одного екрана використовуйте ai-generate-screen-variant. Для пресетного редагування або перероблення одного екрана використовуйте ai-edit-screen-variant. Якщо у вас уже є JSX, натомість використовуйте add-screen-jsx або replace-screen-jsx. Вхідні дані

Параметр	Тип	За замовчуванням	Опис
`fileId`	`uuid`	—	Цільовий файл. Пропустіть, щоб створити новий файл. Обов’язково, якщо задано `elementIds`
`message`	`string`	—	Опис екранів, які потрібно згенерувати, та/або змін, які потрібно внести. Якщо ви передаєте `elementIds`, вкажіть, чи їх потрібно редагувати, чи використовувати як орієнтир. Включіть сюди URL веб-сторінок, на які хочете, щоб Flowstep посилався
`elementIds`	`uuid[]`	`[]`	Необов’язкові `screenId` із `list-screens` та/або `data-id` елементів із `get-screen-jsx` (з `includeIds`), як вибір у редакторі. Їх можна редагувати на місці або використовувати як візуальний орієнтир для нових екранів. `screenId` спрямовує зміни на весь екран
`attachments`	`{ id, path, type }[]` (максимум 5)	`[]`	Файли з `upload-attachment`: зображення, PDF або файли коду й тексту. Не вставляйте вміст файлів у `message`

Приклад: відредагувати один екран і додати інший в одному виклику:

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "message": "Switch this sign-in screen to dark mode, then add a matching forgot-password screen.",
  "elementIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"]
}

Вихідні дані: { status, fileId, screenIds, designGuidelinesUpdated, reply? }.

{
  "status": "generated",
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": [
    "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
    "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0"
  ],
  "designGuidelinesUpdated": null
}

status: "generated", коли екрани було створено або змінено. "chat", коли Flowstep відповів без створення екранів. У цьому разі reply містить його відповідь, а screenIds порожній. Якщо ваше завдання неоднозначне, ваш агент має попросити вас уточнити його та викликати інструмент знову.
screenIds: кожен екран, який було створено або змінено під час виклику, включно з екранами, відредагованими на місці. Якщо виклик завершується тайм-аутом після створення частини екранів, він повертає ці екрани замість помилки.

Екрани, які ви просите відредагувати, перезаписуються на місці.

`ai-generate-screen-variant`

Додайте новий екран, похідний від рівно одного наявного екрана. Це наступний крок у потоці, стан помилки чи порожній стан або версія для іншої платформи. Вихідний екран залишається без змін. Щоб додати екран, який не є варіантом наявного (наприклад, екран налаштувань), використовуйте ai-design-screens з fileId. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	Цільовий файл
`screenId`	`uuid`	Наявний екран, від якого потрібно відштовхуватися
`operationVariant`	enum	Обов’язкове. Як новий екран пов’язаний з наявним

`operationVariant`	Додає
`next_screen`	Наступний екран у потоці користувача
`error_state`	Стан помилки екрана
`empty_state`	Порожній стан екрана
`web_version`	Веб-версію
`mobile_version`	Мобільну версію
`tablet_version`	Версію для планшета
`mobile_ios_version`	Версію для iOS
`mobile_android_version`	Версію для Android

Вихідні дані: { status, fileId, screenIds, designGuidelinesUpdated }. status завжди має значення "generated".

`ai-edit-screen-variant`

Змініть рівно один наявний екран на місці за допомогою пресета. Можна оформити його темою або відполірувати, спробувати інший макет чи візуальний стиль або переробити з нуля. Для нових екранів, вільних інструкцій або точного редагування окремих елементів використовуйте ai-design-screens. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	Цільовий файл
`screenId`	`uuid`	Наявний екран, який потрібно змінити
`operationVariant`	enum	Обов’язкове. Пресет редагування або перероблення, який потрібно застосувати

`operationVariant`	Тип	Ефект
`dark_theme`	Редагування	Перевести екран на темну тему
`light_theme`	Редагування	Перевести екран на світлу тему
`make_pretty`	Редагування	Відполірувати візуальний дизайн екрана
`different_layout`	Перероблення	Спробувати інший макет
`different_style`	Перероблення	Спробувати інший візуальний стиль
`from_scratch`	Перероблення	Переробити екран з нуля

Вихідні дані: { status, fileId, screenIds, designGuidelinesUpdated }. status завжди має значення "generated".

Цей інструмент перезаписує вміст екрана на місці.

Перейменовані інструменти

Назви інструментів змінилися у вересні та жовтні 2026 року. Якщо у вас є промпти, скрипти або інструкції для агентів зі старими назвами, оновіть їх:

Стара назва	Нова назва
`get-screen`	`get-screen-jsx`
`add-screen`	`add-screen-jsx`
`replace-screen`	`replace-screen-jsx`
`ai-generate-screens`	`ai-design-screens`
`ai-edit-screens`	`ai-design-screens`
`create-new-design`	`ai-design-screens`
`edit-design` (вільні інструкції)	`ai-design-screens`
`edit-design` (з пресетом `operationVariant`)	`ai-edit-screen-variant`
`regenerate-design`	`ai-edit-screen-variant`
`expand-design`	`ai-generate-screen-variant`

Змінилися також вхідні дані: інструменти AI-дизайну приймають elementIds (або один screenId для інструментів варіантів) замість targets. add-screen-jsx приймає jsx і явні поля метаданих замість jsxContent з коментарем метаданих. create-file приймає name замість title. Інструменти рекомендацій з дизайну приймають fileId замість resourceId і linkedTo.

​Інструменти для файлів

​list-files

​get-file

​create-file

​update-file

​delete-file

​Інструменти для екранів

​list-screens

​get-screen-image

​get-screen-jsx

​add-screen-jsx

​replace-screen-jsx

​rename-screen

​delete-screen

​Зображення в JSX

​Значення полів екрана

​Інструменти рекомендацій з дизайну

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Інструменти чату

​get-chat-history

​Інструменти для вкладень

​upload-attachment

​Інструменти для Figma

​import-figma

​Інструменти плану й оплати

​get-plan-details

​Інструменти AI-дизайну

​ai-design-screens

​ai-generate-screen-variant

​ai-edit-screen-variant

​Перейменовані інструменти

Інструменти для файлів

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Інструменти для екранів

`list-screens`

`get-screen-image`

`get-screen-jsx`

`add-screen-jsx`

`replace-screen-jsx`

`rename-screen`

`delete-screen`

Зображення в JSX

Значення полів екрана

Інструменти рекомендацій з дизайну

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Інструменти чату

`get-chat-history`

Інструменти для вкладень

`upload-attachment`

Інструменти для Figma

`import-figma`

Інструменти плану й оплати

`get-plan-details`

Інструменти AI-дизайну

`ai-design-screens`

`ai-generate-screen-variant`

`ai-edit-screen-variant`

Перейменовані інструменти