> ## Documentation Index > Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt > Use this file to discover all available pages before exploring further. # Довідник інструментів MCP > Схема вхідних даних, форма вихідних даних та приклади всіх 20 інструментів MCP Flowstep. Всі інструменти повертають масив `content` блоків вмісту MCP. Текстові інструменти повертають `{ type: "text", text: "" }`. Інструменти зображень повертають `{ type: "image", data: "", mimeType: "image/png" }`. У разі помилки встановлюється `isError: true`, а текстовий блок містить повідомлення про помилку. *** ## Інструменти файлів ### `list-files` Список файлів Flowstep поточного користувача. **Вхідні дані** | Параметр | Тип | За замовчуванням | Опис | | ----------------- | ----------------- | ---------------- | ------------------------------- | | `orderByCreation` | `boolean` | `true` | Упорядковане за датою створення | | `limit` | `integer` (1–100) | `20` | Кількість файлів для повернення | | `offset` | `integer` (≥0) | `0` | Зміщення для пагінації | **Вихідні дані** — JSON масив об'єктів файлів. ```json theme={"system"} [ { "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 об'єкт файлу. ```json theme={"system"} { "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` нового файлу. ```json theme={"system"} { "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`. ```json theme={"system"} { "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 масив резюме екранів. ```json theme={"system"} [ { "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`. ```json theme={"system"}
World Clock
Search cities...
...
; ``` *** ### `add-screen` Додати новий екран до файлу Flowstep з необробленого рядка JSX. **Вхідні дані** | Параметр | Тип | Опис | | ------------ | -------- | ----------------------------------------------------------------- | | `fileId` | `uuid` | ID файлу | | `jsxContent` | `string` | JSX для додавання до файлу як екрану | | `screenType` | `string` | Потрібно, якщо тип екрану не визначено як коментар на початку JSX | **Примітка** — Коментар, подібний до наведеного нижче, ПОВИНЕН бути присутнім як перший рядок JSX, оскільки він використовується для правильного додавання екрану. `screenType`, `name` та `screenId` все необов'язкові — `screenId` використовується (всередину), якщо він присутній (наприклад, при передачі JSX, скопійованого з вихідних даних `get-screen`), але не є обов'язковим. Назва екрану берється з поля `name` коментаря (відображається як "Copy of \"), або "Untitled", якщо відсутня. `` **Вихідні дані** — Новий ID доданого екрану. ```json theme={"system"} { "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` для перегляду результатів. ```json theme={"system"} { "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`. **Вихідні дані** ```json theme={"system"} { "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"`). ```json theme={"system"} { "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"` | Тип ресурсу | **Вихідні дані** ```json theme={"system"} { "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`. ```json theme={"system"} { "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0", "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" } ``` *** ## Інструменти розрахунків ### `get-plan-details` Отримати поточний план користувача, статус підписки та залишок квоти. Не приймає вхідних даних. **Вихідні дані** ```json theme={"system"} { "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 } } } ``` Обмеження варіюються залежно від плану. Викличте цей інструмент перед пакетом генерацій, щоб перевірити доступну квоту.