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

Всі інструменти повертають масив content блоків вмісту MCP. Текстові інструменти повертають { type: "text", text: "<json-string>" }. Інструменти зображень повертають { type: "image", data: "<base64>", mimeType: "image/png" }. У разі помилки встановлюється isError: true, а текстовий блок містить повідомлення про помилку.

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

`list-files`

Список файлів Flowstep поточного користувача. Вхідні дані

Параметр	Тип	За замовчуванням	Опис
`orderByCreation`	`boolean`	`true`	Упорядковане за датою створення
`limit`	`integer` (1–100)	`20`	Кількість файлів для повернення
`offset`	`integer` (≥0)	`0`	Зміщення для пагінації

Вихідні дані — JSON масив об’єктів файлів.

[
  {
    "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",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  }
]

`get-file`

Отримати один файл за ID. Вміст файлу навмисне пропускається — використовуйте get-screen або get-screen-image для перевірки екранів і get-design-guidelines для отримання прикріплених рекомендацій. Вхідні дані

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

Вихідні дані — JSON об’єкт файлу.

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

`create-file`

Створити новий файл Flowstep. Вхідні дані

Параметр	Тип	Опис
`title`	`string` (min 1)	Назва файлу

Вихідні дані — JSON об’єкт файлу з id нового файлу.

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

Використовуйте повернений id як fileId у подальших викликах інструментів.

`update-file`

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

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

Вихідні дані — Оновлений об’єкт файлу в такій же формі як get-file.

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

`delete-file`

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

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

Вихідні дані — "File deleted successfully"

Це незворотно. Всі екрани у файлі видаляються.

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

`list-screens`

Список усіх згенерованих екранів для файлу. Використовуйте повернені значення screenId для посилання на екрани в get-screen, get-screen-image, upload-attachment та як targets в edit-design, regenerate-design або expand-design. Вхідні дані

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

Вихідні дані — JSON масив резюме екранів.

[
  {
    "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
    "name": "Mobile login screen",
    "fidelity": "ui",
    "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
    "createdAt": "2026-04-30T15:02:37.444139+00:00"
  }
]

name — це назва екрана, призначена користувачем, або null, якщо екран без назви.

`get-screen`

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

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

Вихідні дані — Екран як код (JSX). Зверніть увагу на коментар першого рядка, який потрібен при використанні інструменту add-screen.

<!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" screenId: "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0" -->
<div className="bg-white text-zinc-950 w-full h-fit">
  <div className="flex p-6 flex-col gap-6">
    <div className="flex pt-4 justify-between items-center">
      <ArrowLeft className="size-5 text-[#71717b]" />
      <span className="font-semibold text-zinc-950 text-lg leading-7">
        World Clock
      </span>
      <Plus className="size-5 text-[#2b7fff]" />
    </div>
    <div className="rounded-xl bg-zinc-100 flex p-2 items-center gap-2">
      <Search className="size-4 text-[#71717b] ml-2" />
      <span className="text-[#71717b] text-sm leading-5">Search cities...</span>
    </div>
...
    <div className="flex pt-2 pb-4 justify-center items-center gap-4">
      <Button variant="outline" className="rounded-full px-6 gap-2">
        <Clock className="size-4" />
        <span>Compare</span>
      </Button>
      <Button className="rounded-full bg-[#2b7fff] text-blue-50 px-6 gap-2">
        <Bell className="size-4" />
        <span>Set Alert</span>
      </Button>
    </div>
  </div>
</div>;

`add-screen`

Додати новий екран до файлу Flowstep з необробленого рядка JSX. Вхідні дані

Параметр	Тип	Опис
`fileId`	`uuid`	ID файлу
`jsxContent`	`string`	JSX для додавання до файлу як екрану
`screenType`	`string`	Потрібно, якщо тип екрану не визначено як коментар на початку JSX

Примітка — Коментар, подібний до наведеного нижче, ПОВИНЕН бути присутнім як перший рядок JSX, оскільки він використовується для правильного додавання екрану. screenType, name та screenId все необов’язкові — screenId використовується (всередину), якщо він присутній (наприклад, при передачі JSX, скопійованого з вихідних даних get-screen), але не є обов’язковим. Назва екрану берється з поля name коментаря (відображається як “Copy of <name>”), або “Untitled”, якщо відсутня.  Вихідні дані — Новий ID доданого екрану.

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" }

`get-screen-image`

Відрендерити екран у PNG та повернути його як вбудоване зображення. Потребує клієнта, який підтримує блоки вмісту зображень. Вхідні дані

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

Вихідні дані — Блок вмісту MCP (image/png).

Інструменти AI

regenerate-design, expand-design та edit-design потребують контексту дизайну, який присутній лише на екранах, спочатку згенерованих з масивом designs. Екрани, створені без контексту дизайну, повернуть помилку. Обхідне рішення: використовуйте upload-attachment для відновлення екрану як зображення, а потім викличте create-new-design з зображенням у attachments і повідомленням, що описує бажані зміни.

`create-new-design`

Згенеруйте один або більше дизайнів екранів з текстового промпту. Пропустіть fileId, щоб автоматично створити новий файл. Блокує до завершення генерації або тайм-ауту (180 секунд). Вхідні дані

Параметр	Тип	За замовчуванням	Опис
`fileId`	`uuid`	—	Цільовий файл — пропустіть для автоматичного створення нового файлу
`message`	`string`	—	Промпт, що описує екрани для генерації
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Заздалегідь завантажені вкладення — зображення, PDF або файли коду. Завжди завантажуйте через `upload-attachment` спочатку; не вставляйте вміст файлу в повідомлення
`designs`	`DesignRequestData[]`	`[]`	Референси дизайну

Вихідні дані — { fileId, screenIds }. Передайте кожен screenId до get-screen-image для перегляду результатів.

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

`regenerate-design`

Переробіть існуючі екрани з нуля або з варіацією стилю. Потребує щонайменше одного screenId у targets. Блокує до завершення генерації або тайм-ауту (180 секунд). Вхідні дані

Параметр	Тип	За замовчуванням	Опис
`fileId`	`uuid`	—	Цільовий файл
`message`	`string`	—	Текст промпту
`targets`	`uuid[]` (min 1)	—	screenIds екранів для переробки
`operationVariant`	`"different_layout" \| "different_style" \| "from_scratch"`	—	Необов’язковий варіант стилю
`designs`	`DesignRequestData[]`	`[]`	Референси дизайну (розв’язуються автоматично)

Вихідні дані — { fileId, screenIds }. Передайте кожен screenId до get-screen-image для перегляду результатів.

`expand-design`

Додайте наступні екрани до існуючого дизайну. Потребує щонайменше одного screenId у targets та обов’язкового operationVariant. Блокує до завершення генерації або тайм-ауту (180 секунд). Вхідні дані

Параметр	Тип	За замовчуванням	Опис
`fileId`	`uuid`	—	Цільовий файл
`message`	`string`	—	Текст промпту
`targets`	`uuid[]` (min 1)	—	screenIds екранів для розширення
`operationVariant`	`"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"`	—	Потрібно — тип наступного екрану для генерації
`designs`	`DesignRequestData[]`	`[]`	Референси дизайну (розв’язуються автоматично)

Вихідні дані — { fileId, screenIds }. Передайте кожен screenId до get-screen-image для перегляду результатів.

`edit-design`

Змініть існуючі екрани за допомогою промпту. Потребує щонайменше одного screenId у targets. Блокує до завершення генерації або тайм-ауту (180 секунд). Вхідні дані

Параметр	Тип	За замовчуванням	Опис
`fileId`	`uuid`	—	Цільовий файл
`message`	`string`	—	Інструкції, що описують редагування для застосування
`targets`	`uuid[]` (min 1)	—	screenIds екранів для редагування
`operationVariant`	`"dark_theme" \| "light_theme" \| "make_pretty"`	—	Необов’язковий ярлик стилю
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Заздалегідь завантажені вкладення. Завжди завантажуйте через `upload-attachment` спочатку
`designs`	`DesignRequestData[]`	`[]`	Референси дизайну (розв’язуються автоматично)

Вихідні дані — { fileId, screenIds }. Передайте кожен screenId до get-screen-image для перегляду результатів.

`upload-attachment`

Завантажити файл для використання як вкладення в create-new-design або edit-design. Повертає { id, path, type, mimeType } — передайте цей об’єкт безпосередньо в масив attachments. Два режими: Режим 1 — Екран за ID Передайте screenId та fileId. Сервер отримує стан екрану з бази даних і рендерить його як зображення.

Параметр	Тип	Опис
`fileId`	`uuid`	Файл, що містить екран (потрібно)
`screenId`	`uuid`	Екран для відновлення

Режим 2 — Зовнішній файл Передайте вміст файлу безпосередньо. Двійкові файли повинні бути кодовані в base64; текстові файли (включаючи вихідний код) передаються як простий рядок UTF-8.

Параметр	Тип	Опис
`fileData`	`string`	Вміст файлу — base64 для двійкового, рядок UTF-8 для тексту
`fileName`	`string`	Оригінальна назва файлу
`mimeType`	`"image/jpeg" \| "image/png" \| "image/webp" \| "application/pdf" \| "text/plain" \| "text/javascript"`	Тип MIME. Використовуйте `text/javascript` для файлів `.jsx`, `.tsx`, `.js`, `.ts`

Максимальний розмір файлу: 3 MB. Для великих зображень переважайте image/jpeg над image/png. Вихідні дані

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "type": "image",
  "mimeType": "image/jpeg"
}

type — це "image" для завантаження зображень/PDF та "document" для текстових/кодових файлів.

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

`get-chat-history`

Отримати історію повідомлень чату для файлу. Вхідні дані

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

Вихідні дані — JSON об’єкт з масивом messages. Кожне повідомлення має type ("request" або "response"), author ("human" або "ai"), та content_type ("text", "summary" або "followup").

{
  "messages": [
    {
      "id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b",
      "type": "request",
      "status": "success",
      "content": "Generate a simple mobile login screen with email and password fields",
      "author": "human",
      "content_type": "text",
      "sequence": 1,
      "request_message_id": null,
      "targets": [],
      "attachments": []
    },
    {
      "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
      "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b",
      "type": "response",
      "status": "success",
      "content": "Generated a mobile login screen with email and password input fields, sign in button, remember me checkbox, forgot password link, social login options (Apple/Google), and 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" }],
      "attachments": []
    }
  ]
}

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

`get-design-guidelines`

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

Параметр	Тип	За замовчуванням	Опис
`resourceId`	`uuid`	—	ID файлу
`linkedTo`	`"file"`	`"file"`	Тип ресурсу

Вихідні дані

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

guidelines — це null, якщо рекомендації не встановлені.

`update-design-guidelines`

Встановіть або замініть рекомендації з дизайну для файлу. Рекомендації передаються як простий текстовий рядок у форматі design.md Google — не передавайте об’єкт або JSON. Сервер виконує м’яку валідацію та може повернути розділ Warnings: у відповіді, в якому наведені проблеми (невідомі ключі, не-hex кольори), які були прийняті, але можуть бути ігноровані AI. Викладіть їх користувачу. Вхідні дані

Параметр	Тип	За замовчуванням	Опис
`resourceId`	`uuid`	—	ID файлу
`designGuidelines`	`string` (min 1)	—	Вихідний текстовий вміст рекомендацій. Повинен бути простим рядком — не JSON-кодованим
`linkedTo`	`"file"`	`"file"`	Тип ресурсу

Правила валідації

Frontmatter повинна бути правильно відкрита та закрита
Лінії Frontmatter повинні бути валідним YAML блоку
Тіло Markdown не повинно містити дублювання ## заголовків розділів

Вихідні дані — "Design guidelines updated successfully", опціонально з подальшим розділом Warnings:.

`delete-design-guidelines`

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

Параметр	Тип	За замовчуванням	Опис
`resourceId`	`uuid`	—	ID файлу
`linkedTo`	`"file"`	`"file"`	Тип ресурсу

Вихідні дані — "Design guidelines deleted successfully"

Інструменти Figma

`import-figma`

Імпортуйте фігуру Figma до файлу Flowstep як редаговані елементи на його полотні. Повторне імпортування тієї ж фігури оновлює її на місці. Організація файлу повинна мати підключену Figma в параметрах Flowstep. Вхідні дані

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

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

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

Інструменти розрахунків

`get-plan-details`

Отримати поточний план користувача, статус підписки та залишок квоти. Не приймає вхідних даних. Вихідні дані

{
  "plan": {
    "name": "Starter",
    "code": "starter",
    "type": "paid"
  },
  "subscription": {
    "isPaid": true,
    "isTrial": false,
    "startDate": "2025-01-01T00:00:00Z",
    "endDate": null,
    "trialDaysRemaining": null
  },
  "limits": {
    "messages": {
      "daily": { "max": 50, "warn": 40 },
      "monthly": { "max": 500, "warn": 400 },
      "unlimited": false
    }
  },
  "usage": {
    "messages": { "daily": 12, "monthly": 87 }
  },
  "remaining": {
    "messages": { "daily": 38, "monthly": 413 }
  }
}

Обмеження варіюються залежно від плану. Викличте цей інструмент перед пакетом генерацій, щоб перевірити доступну квоту.

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

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

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

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

Сервер MCP

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

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

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

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

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

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

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Інструменти AI

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

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

`get-chat-history`

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

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Інструменти Figma

`import-figma`

Інструменти розрахунків

`get-plan-details`

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

​list-files

​get-file

​create-file

​update-file

​delete-file

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

​list-screens

​get-screen

​add-screen

​get-screen-image

​Інструменти AI

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

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

​get-chat-history

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

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Інструменти Figma

​import-figma

​Інструменти розрахунків

​get-plan-details

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

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

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

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Інструменти AI

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

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

`get-chat-history`

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

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Інструменти Figma

`import-figma`

Інструменти розрахунків

`get-plan-details`