Szybki start MCP

Wymagania wstępne

Konto Flowstep (app.flowstep.ai)

Cursor
Claude Code

Wymaga Cursor v0.43+

Krok 1 — Dodaj serwer

Utwórz lub edytuj ~/.cursor/mcp.json (globalny) lub .cursor/mcp.json w katalogu głównym projektu:

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

Uruchom ponownie Cursor po zapisaniu.

Krok 2 — Uwierzytelnienie

Otwórz panel MCP Cursor (Settings → MCP) i kliknij Connect obok Flowstep. Cursor otwiera przeglądarkę w celu zalogowania się do Flowstep OAuth. Zaloguj się przy użyciu poświadczeń Flowstep (email/hasło lub Google). Przeglądarka przekierowuje z powrotem, a Cursor automatycznie zapisuje token.

Potrzebujesz konta Flowstep przed uwierzytelnieniem. Jeśli go nie masz, najpierw zarejestruj się na stronie app.flowstep.ai.

Krok 3 — Wykonaj wywołanie narzędzia

W czacie Cursor zapytaj:

“List my Flowstep files”

Cursor wywołuje list-files i zwraca listę plików. Jeśli odpowiedź jest pusta, najpierw utwórz plik:

“Create a new Flowstep file called ‘Dashboard‘“

Krok 4 — Wygeneruj ekran

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 wywołuje create-new-design (który tworzy plik i generuje ekrany w jednym kroku), a następnie get-screen-image. Zobaczysz wyrenderowany projekt wbudowany w czacie.

Wymaga Claude Code CLI

Krok 1 — Dodaj serwer

Utwórz .mcp.json w katalogu głównym projektu (zakres projektu) lub ~/.claude/mcp.json (globalny):

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

Pole "type": "http" jest wymagane dla serwerów Claude Code HTTP. Cursor tego nie potrzebuje.

Krok 2 — Uwierzytelnienie

Wykonaj dowolne narzędzie Flowstep z czatu Claude Code. Przy pierwszym użyciu Claude Code otwiera przeglądarkę w celu zalogowania się do Flowstep OAuth. Zaloguj się przy użyciu poświadczeń Flowstep (email/hasło lub Google). Przeglądarka przekierowuje z powrotem, a token jest automatycznie zapisywany.

Potrzebujesz konta Flowstep przed uwierzytelnieniem. Jeśli go nie masz, najpierw zarejestruj się na stronie app.flowstep.ai.

Krok 3 — Wykonaj wywołanie narzędzia

W czacie Claude Code zapytaj:

“List my Flowstep files”

Claude Code wywołuje list-files i zwraca listę plików. Jeśli odpowiedź jest pusta, najpierw utwórz plik:

“Create a new Flowstep file called ‘Dashboard‘“

Krok 4 — Wygeneruj ekran

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 wywołuje create-new-design (który tworzy plik i generuje ekrany w jednym kroku), a następnie get-screen-image. Zobaczysz wyrenderowany projekt wbudowany w czacie.

Następne kroki

Dokumentacja narzędzi — kompletna dokumentacja wejść/wyjść dla wszystkich 20 narzędzi
Przykłady — wieloetapowe przepływy pracy
Inni klienci — Windsurf, Claude Desktop, claude.ai

Pierwsze kroki

Korzystanie z Flowstep

Zespoły i organizacje

Eksport i integracje

Serwer MCP

Rozliczenia i plany

Bezpieczeństwo i prywatność

Wymagania wstępne

Krok 1 — Dodaj serwer

Krok 2 — Uwierzytelnienie

Krok 3 — Wykonaj wywołanie narzędzia

Krok 4 — Wygeneruj ekran

Krok 1 — Dodaj serwer

Krok 2 — Uwierzytelnienie

Krok 3 — Wykonaj wywołanie narzędzia

Krok 4 — Wygeneruj ekran

Następne kroki

​Wymagania wstępne

​Krok 1 — Dodaj serwer

​Krok 2 — Uwierzytelnienie

​Krok 3 — Wykonaj wywołanie narzędzia

​Krok 4 — Wygeneruj ekran

​Krok 1 — Dodaj serwer

​Krok 2 — Uwierzytelnienie

​Krok 3 — Wykonaj wywołanie narzędzia

​Krok 4 — Wygeneruj ekran

​Następne kroki

Wymagania wstępne

Krok 1 — Dodaj serwer

Krok 2 — Uwierzytelnienie

Krok 3 — Wykonaj wywołanie narzędzia

Krok 4 — Wygeneruj ekran

Krok 1 — Dodaj serwer

Krok 2 — Uwierzytelnienie

Krok 3 — Wykonaj wywołanie narzędzia

Krok 4 — Wygeneruj ekran

Następne kroki