MCP Snabbstart

Förutsättningar

Ett Flowstep-konto (app.flowstep.ai)

Cursor
Claude Code

Kräver Cursor v0.43+

Steg 1 — Lägg till servern

Skapa eller redigera ~/.cursor/mcp.json (global) eller .cursor/mcp.json i din projektrots:

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

Starta om Cursor efter sparande.

Steg 2 — Autentisera

Öppna Cursor MCP-panelen (Settings → MCP) och klicka på Connect bredvid Flowstep. Cursor öppnar din webbläsare till Flowstep OAuth-inloggningen. Logga in med dina Flowstep-autentiseringsuppgifter (e-post/lösenord eller Google). Webbläsaren omdirigerar tillbaka och Cursor lagrar token automatiskt.

Du behöver ett Flowstep-konto före autentisering. Om du inte har ett, registrera dig på app.flowstep.ai först.

Steg 3 — Kör ett verktygsanrop

I en Cursor-chatt, fråga:

“Lista mina Flowstep-filer”

Cursor anropar list-files och returnerar din fillista. Om svaret är tomt, skapa en fil först:

“Skapa en ny Flowstep-fil som heter ‘Dashboard‘“

Steg 4 — Generera en skärm

Skapa en ny Flowstep-fil som heter "Login flow", generera sedan en mobil inloggningsskärm
för en SaaS-app med e-post/lösenord-fält och en Google-inloggningsknapp.
När det är klart, visa mig bilden.

Cursor anropar create-new-design (som skapar filen och genererar skärmarna i ett steg), sedan get-screen-image. Du ser den renderade designen inline i chatten.

Kräver Claude Code CLI

Steg 1 — Lägg till servern

Skapa .mcp.json i din projektrots (projektomfattad) eller ~/.claude/mcp.json (global):

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

Fältet "type": "http" krävs för Claude Code HTTP-servrar. Cursor behöver det inte.

Steg 2 — Autentisera

Kör ett Flowstep-verktyg från en Claude Code-chatt. Vid första användning öppnar Claude Code din webbläsare till Flowstep OAuth-inloggningen. Logga in med dina Flowstep-autentiseringsuppgifter (e-post/lösenord eller Google). Webbläsaren omdirigerar tillbaka och token lagras automatiskt.

Du behöver ett Flowstep-konto före autentisering. Om du inte har ett, registrera dig på app.flowstep.ai först.

Steg 3 — Kör ett verktygsanrop

I en Claude Code-chatt, fråga:

“Lista mina Flowstep-filer”

Claude Code anropar list-files och returnerar din fillista. Om svaret är tomt, skapa en fil först:

“Skapa en ny Flowstep-fil som heter ‘Dashboard‘“

Steg 4 — Generera en skärm

Skapa en ny Flowstep-fil som heter "Login flow", generera sedan en mobil inloggningsskärm
för en SaaS-app med e-post/lösenord-fält och en Google-inloggningsknapp.
När det är klart, visa mig bilden.

Claude Code anropar create-new-design (som skapar filen och genererar skärmarna i ett steg), sedan get-screen-image. Du ser den renderade designen inline i chatten.

Nästa steg

Verktygsreferens — fullständig input/output-dokumentation för alla 20 verktyg
Exempel — arbetsflöden med flera steg
Andra klienter — Windsurf, Claude Desktop, claude.ai

Kom igång

Använda Flowstep

Team och organisationer

Export och integrationer

MCP-server

Fakturering och planer

Säkerhet och integritet

Förutsättningar

Steg 1 — Lägg till servern

Steg 2 — Autentisera

Steg 3 — Kör ett verktygsanrop

Steg 4 — Generera en skärm

Steg 1 — Lägg till servern

Steg 2 — Autentisera

Steg 3 — Kör ett verktygsanrop

Steg 4 — Generera en skärm

Nästa steg

​Förutsättningar

​Steg 1 — Lägg till servern

​Steg 2 — Autentisera

​Steg 3 — Kör ett verktygsanrop

​Steg 4 — Generera en skärm

​Steg 1 — Lägg till servern

​Steg 2 — Autentisera

​Steg 3 — Kör ett verktygsanrop

​Steg 4 — Generera en skärm

​Nästa steg

Förutsättningar

Steg 1 — Lägg till servern

Steg 2 — Autentisera

Steg 3 — Kör ett verktygsanrop

Steg 4 — Generera en skärm

Steg 1 — Lägg till servern

Steg 2 — Autentisera

Steg 3 — Kör ett verktygsanrop

Steg 4 — Generera en skärm

Nästa steg