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

> Підключіть Flowstep до вашого редактора AI та виконайте перший виклик інструменту.

## Передумови

* Обліковий запис Flowstep ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Вимагає Cursor v0.43+**

    ## Крок 1 — Додайте сервер

    Створіть або відредагуйте `~/.cursor/mcp.json` (глобально) або `.cursor/mcp.json` у кореневій папці вашого проєкту:

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    Перезавантажте Cursor після збереження.

    ## Крок 2 — Аутентифікація

    Відкрийте панель Cursor MCP (Settings → MCP) та натисніть **Connect** біля Flowstep. Cursor відкриває вашу браузер на сторінку входу Flowstep OAuth. Увійдіть зі своїми обліковими даними Flowstep (email/password або Google). Браузер перенаправляє вас назад, і Cursor автоматично зберігає токен.

    <Note>
      Вам потрібен обліковий запис Flowstep перед аутентифікацією. Якщо у вас немає облікового запису, спочатку зареєструйтеся на [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## Крок 3 — Виконайте виклик інструменту

    У чаті Cursor запитайте:

    > "List my Flowstep files"

    Cursor викликає `list-files` і повертає список ваших файлів. Якщо відповідь порожня, спочатку створіть файл:

    > "Create a new Flowstep file called 'Dashboard'"

    ## Крок 4 — Створіть екран

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Cursor викликає `create-new-design` (який створює файл і генерує екрани за один крок), а потім `get-screen-image`. Ви побачите відрендерений дизайн прямо в чаті.
  </Tab>

  <Tab title="Claude Code">
    **Вимагає Claude Code CLI**

    ## Крок 1 — Додайте сервер

    Створіть `.mcp.json` у кореневій папці вашого проєкту (з областю проєкту) або `~/.claude/mcp.json` (глобально):

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      Поле `"type": "http"` необхідне для HTTP-серверів Claude Code. Cursor це не потребує.
    </Note>

    ## Крок 2 — Аутентифікація

    Запустіть будь-який інструмент Flowstep з чату Claude Code. При першому використанні Claude Code відкриває вашу браузер на сторінку входу Flowstep OAuth. Увійдіть зі своїми обліковими даними Flowstep (email/password або Google). Браузер перенаправляє вас назад, і токен зберігається автоматично.

    <Note>
      Вам потрібен обліковий запис Flowstep перед аутентифікацією. Якщо у вас немає облікового запису, спочатку зареєструйтеся на [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## Крок 3 — Виконайте виклик інструменту

    У чаті Claude Code запитайте:

    > "List my Flowstep files"

    Claude Code викликає `list-files` і повертає список ваших файлів. Якщо відповідь порожня, спочатку створіть файл:

    > "Create a new Flowstep file called 'Dashboard'"

    ## Крок 4 — Створіть екран

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Claude Code викликає `create-new-design` (який створює файл і генерує екрани за один крок), а потім `get-screen-image`. Ви побачите відрендерений дизайн прямо в чаті.
  </Tab>
</Tabs>

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

* [Довідка інструментів](/uk/mcp/tools) — повна документація вхідних/вихідних даних для всіх 20 інструментів
* [Приклади](/uk/mcp/examples) — багатокрокові робочі процеси
* [Інші клієнти](/uk/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai