> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# MCP Quickstart

> Koble Flowstep til din AI-editor og kjør ditt første verktøykall.

## Forutsetninger

* En Flowstep-konto ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Krever Cursor v0.43+**

    ## Trinn 1 — Legg til serveren

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

    ```json theme={"system"}
    {
      "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.

    <Note>
      Du trenger en Flowstep-konto før autentisering. Hvis du ikke har en, registrer deg først på [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## 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.
  </Tab>

  <Tab title="Claude Code">
    **Krever Claude Code CLI**

    ## Trinn 1 — Legg til serveren

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

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

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

    ## 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.

    <Note>
      Du trenger en Flowstep-konto før autentisering. Hvis du ikke har en, registrer deg først på [app.flowstep.ai](https://app.flowstep.ai).
    </Note>

    ## 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.
  </Tab>
</Tabs>

## Neste trinn

* [Verktøyreferanse](/no/mcp/tools) — fullstendig input/output-dokumentasjon for alle 20 verktøy
* [Eksempler](/no/mcp/examples) — arbeidsflyter med flere trinn
* [Andre klienter](/no/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai