MCP-snabbstart

Förutsättningar

Ett Flowstep-konto (app.flowstep.ai)

Använder du Claude på claude.ai eller i Claude Desktop? Flowstep är en listad konnektor i Claudes katalog. Lägg till den med ett klick från claude.ai/directory/flowstep. Se claude.ai.

Cursor
Claude Code

Kräver Cursor v0.43+

Steg 1: Lägg till servern

Klicka på Add Flowstep to Cursor för att installera den med ett klick. Du kan också skapa eller redigera ~/.cursor/mcp.json (global) eller .cursor/mcp.json i ditt projekts rot:

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

Starta om Cursor efter att du har sparat.

Steg 2: Autentisera

Öppna Cursor MCP-panelen (Settings → MCP) och klicka på Connect bredvid Flowstep. Cursor öppnar din webbläsare till Flowsteps inloggningssida. Logga in med dina Flowstep-uppgifter (e-post/lösenord eller Google) och klicka sedan på Allow på godkännandesidan. Webbläsaren omdirigerar tillbaka och Cursor sparar token automatiskt.

Du behöver ett Flowstep-konto innan du autentiserar dig. Om du inte har ett kan du registrera dig på app.flowstep.ai först.

Steg 3: Kör ett verktygsanrop

Ställ frågan i en Cursor-chatt:

“List my Flowstep files”

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

“Create a new Flowstep file called ‘Dashboard‘“

Steg 4: Generera en skärm

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Cursor anropar ai-design-screens (som skapar en ny fil och genererar skärmarna i ett steg) och sedan get-screen-image. Du ser den renderade designen inline i chatten.

Kräver Claude Code CLI

Steg 1: Lägg till servern

Kör detta i ditt projekt:

claude mcp add --transport http flowstep https://api.flowstep.ai/mcp

För att dela servern med ditt team lägger du i stället till den i .mcp.json i ditt projekts rot:

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

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

Steg 2: Autentisera

Kör ett Flowstep-verktyg från en Claude Code-chatt. Vid första användningen öppnar Claude Code din webbläsare till Flowstep-inloggningssidan. Logga in med dina Flowstep-uppgifter (e-post/lösenord eller Google) och klicka sedan på Allow på godkännandesidan. Webbläsaren omdirigerar tillbaka och token sparas automatiskt. Skriv /mcp i Claude Code för att kontrollera att Flowstep är ansluten.

Du behöver ett Flowstep-konto innan du autentiserar dig. Om du inte har ett kan du registrera dig på app.flowstep.ai först.

Steg 3: Kör ett verktygsanrop

Ställ frågan i en Claude Code-chatt:

“List my Flowstep files”

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

“Create a new Flowstep file called ‘Dashboard‘“

Steg 4: Generera en skärm

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Claude Code anropar ai-design-screens (som skapar en ny fil och genererar skärmarna i ett steg) och sedan get-screen-image. Du ser den renderade designen inline i chatten.

ai-design-screens och de andra AI-designverktygen använder din Flowstep-meddelandekvot. Att lista, läsa och rendera skärmar är gratis. Se Användningsgränser.

Nästa steg

Verktygsreferens: fullständig in- och utdatadokumentation för alla 22 verktyg
Exempel: användningsflöden med flera steg
Andra klienter: Windsurf, Codex, 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