Швидкий старт MCP

Передумови

Обліковий запис Flowstep (app.flowstep.ai)

Cursor
Claude Code

Вимагає Cursor v0.43+

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

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

{
  "mcpServers": {
    "flowstep": {
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

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

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

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

Вам потрібен обліковий запис Flowstep перед аутентифікацією. Якщо у вас немає облікового запису, спочатку зареєструйтеся на app.flowstep.ai.

Крок 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. Ви побачите відрендерений дизайн прямо в чаті.

Вимагає Claude Code CLI

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

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

{
  "mcpServers": {
    "flowstep": {
      "type": "http",
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

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

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

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

Крок 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. Ви побачите відрендерений дизайн прямо в чаті.

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

Довідка інструментів — повна документація вхідних/вихідних даних для всіх 19 інструментів
Приклади — багатокрокові робочі процеси
Інші клієнти — Windsurf, Claude Desktop, claude.ai

​Передумови

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

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

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

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

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

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

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

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

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

Передумови

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

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

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

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

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

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

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

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

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