MCP Quickstart

Forutsetninger

En Flowstep-konto (app.flowstep.ai)

Cursor
Claude Code

Krever Cursor v0.43+

Trinn 1 — Legg til serveren

Opprett eller rediger ~/.cursor/mcp.json (global) eller .cursor/mcp.json i prosjektroten din:

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

Start Cursor på nytt etter lagring.

Trinn 2 — Autentiser

Åpne Cursor MCP-panelet (Settings → MCP) og klikk Connect ved siden av Flowstep. Cursor åpner nettleseren din til Flowstep OAuth-påloggingen. Logg inn med Flowstep-legitimasjonen din (e-post/passord eller Google). Nettleseren omdirigerer tilbake og Cursor lagrer tokenet automatisk.

Du trenger en Flowstep-konto før autentisering. Hvis du ikke har en, registrer deg først på app.flowstep.ai.

Trinn 3 — Kjør et verktøykall

I en Cursor-chat, spør:

“List my Flowstep files”

Cursor kaller list-files og returnerer fillisten din. Hvis svaret er tomt, opprett en fil først:

“Create a new Flowstep file called ‘Dashboard‘“

Trinn 4 — Generer en skjerm

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 kaller create-new-design (som oppretter filen og genererer skjermene i ett trinn), deretter get-screen-image. Du vil se det gjengitte designet inline i chatten.

Krever Claude Code CLI

Trinn 1 — Legg til serveren

Opprett .mcp.json i prosjektroten din (prosjektomfattet) eller ~/.claude/mcp.json (global):

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

Feltet "type": "http" er påkrevd for Claude Code HTTP-servere. Cursor trenger det ikke.

Trinn 2 — Autentiser

Kjør hvilket som helst Flowstep-verktøy fra en Claude Code-chat. Ved første bruk åpner Claude Code nettleseren din til Flowstep OAuth-påloggingen. Logg inn med Flowstep-legitimasjonen din (e-post/passord eller Google). Nettleseren omdirigerer tilbake og tokenet lagres automatisk.

Du trenger en Flowstep-konto før autentisering. Hvis du ikke har en, registrer deg først på app.flowstep.ai.

Trinn 3 — Kjør et verktøykall

I en Claude Code-chat, spør:

“List my Flowstep files”

Claude Code kaller list-files og returnerer fillisten din. Hvis svaret er tomt, opprett en fil først:

“Create a new Flowstep file called ‘Dashboard‘“

Trinn 4 — Generer en skjerm

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 kaller create-new-design (som oppretter filen og genererer skjermene i ett trinn), deretter get-screen-image. Du vil se det gjengitte designet inline i chatten.

Neste trinn

Verktøyreferanse — fullstendig input/output-dokumentasjon for alle 20 verktøy
Eksempler — arbeidsflyter med flere trinn
Andre klienter — Windsurf, Claude Desktop, claude.ai

Kom i gang

Bruke Flowstep

Team og organisasjoner

Eksport og integrasjoner

MCP-server

Fakturering og abonnementer

Sikkerhet og personvern

Forutsetninger

Trinn 1 — Legg til serveren

Trinn 2 — Autentiser

Trinn 3 — Kjør et verktøykall

Trinn 4 — Generer en skjerm

Trinn 1 — Legg til serveren

Trinn 2 — Autentiser

Trinn 3 — Kjør et verktøykall

Trinn 4 — Generer en skjerm

Neste trinn

​Forutsetninger

​Trinn 1 — Legg til serveren

​Trinn 2 — Autentiser

​Trinn 3 — Kjør et verktøykall

​Trinn 4 — Generer en skjerm

​Trinn 1 — Legg til serveren

​Trinn 2 — Autentiser

​Trinn 3 — Kjør et verktøykall

​Trinn 4 — Generer en skjerm

​Neste trinn

Forutsetninger

Trinn 1 — Legg til serveren

Trinn 2 — Autentiser

Trinn 3 — Kjør et verktøykall

Trinn 4 — Generer en skjerm

Trinn 1 — Legg til serveren

Trinn 2 — Autentiser

Trinn 3 — Kjør et verktøykall

Trinn 4 — Generer en skjerm

Neste trinn