> ## 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.

# Сервер Flowstep MCP

> Використовуйте Flowstep як MCP сервер для генерації, перевірки та управління дизайном UI прямо з Cursor, Claude Code або будь-якого MCP-сумісного клієнта.

Flowstep надає доступ до своїх інструментів дизайну через [Model Context Protocol](https://modelcontextprotocol.io/), дозволяючи вашому AI-асистенту створювати та ітерувати екрани UI, не залишаючи редактор.

Сервер розміщений за адресою `https://api.flowstep.ai/mcp` (потік передачі Streamable HTTP). Немає локального процесу для запуску.

## Що ви можете робити

Сервер надає доступ до 20 інструментів у семи категоріях:

| Категорія                | Інструменти                                                                                   |
| ------------------------ | --------------------------------------------------------------------------------------------- |
| **Файли**                | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Екрани**               | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **Генерація 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`                                                                            |

## Поширені варіанти використання

**Генерація екранів з промпту** — викликніть `create-new-design` з описом. Flowstep створює файл та екрани в один крок. Викликніть `get-screen-image` з повернутим `screenIds` для перегляду результату вбудовано.

**Візуалізація компонента React** — завантажте ваш файл `.jsx` або `.tsx` через `upload-attachment` (використовуйте `mimeType: text/javascript`), потім передайте повернутий вкладення до `create-new-design` з повідомленням, що описує компонент. Flowstep читає вихідний код та генерує відповідний екран дизайну.

**Ітерація над дизайном** — викликніть `edit-design` з цільовим `screenId` та інструкціями для його змінення, або `regenerate-design` для повторного створення екрана з нуля.

**Ведення рекомендацій з дизайну** — викликніть `get-design-guidelines` для отримання ваших поточних правил стилю (кольори, типографія, інтервал, тон), потім використовуйте `update-design-guidelines` для їх синхронізації під час еволюції вашого дизайну. Передання послідовних рекомендацій у `create-new-design` або `edit-design` гарантує, що кожен згенерований екран залишається в межах бренду. Використовуйте `delete-design-guidelines` для їх повного скидання.

**Імпортування з Figma** — викликніть `import-figma` за посиланням на фігуру Figma та `fileId`, щоб перенести фігуру до файлу Flowstep як редаговані елементи. Організація файлу повинна мати спочатку підключену Figma.

**Аудит квоти** — викликніть `get-plan-details` для перегляду залишкового щоденного та місячного використання перед початком партії генерацій.

## Кінцева точка

```
https://api.flowstep.ai/mcp
```

Потік передачі: Streamable HTTP. Модель сеансу: без стану (кожна вимога незалежна, немає ID сеансу).

## Наступні кроки

<CardGroup cols={2}>
  <Card title="Швидкий старт" icon="bolt" href="/uk/mcp/quickstart">
    Перший виклик інструменту менше ніж за 5 хвилин за допомогою Cursor.
  </Card>

  <Card title="Аутентифікація" icon="lock" href="/uk/mcp/authentication">
    Як працює OAuth 2.1 PKCE та як видаються маркери.
  </Card>

  <Card title="Інструменти" icon="wrench" href="/uk/mcp/tools">
    Повна довідка вводу/виводу для всіх 20 інструментів.
  </Card>

  <Card title="Приклади" icon="code" href="/uk/mcp/examples">
    Наскрізні робочі процеси для поширених завдань.
  </Card>
</CardGroup>