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

> Anslut Flowstep till din AI-redigerare och kör ditt första verktygsanrop.

## Förutsättningar

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

<Tabs>
  <Tab title="Cursor">
    **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:

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

    <Note>
      Du behöver ett Flowstep-konto före autentisering. Om du inte har ett, registrera dig på [app.flowstep.ai](https://app.flowstep.ai) först.
    </Note>

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

  <Tab title="Claude Code">
    **Kräver Claude Code CLI**

    ## Steg 1 — Lägg till servern

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

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

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

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

    <Note>
      Du behöver ett Flowstep-konto före autentisering. Om du inte har ett, registrera dig på [app.flowstep.ai](https://app.flowstep.ai) först.
    </Note>

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

## Nästa steg

* [Verktygsreferens](/sv/mcp/tools) — fullständig input/output-dokumentation för alla 20 verktyg
* [Exempel](/sv/mcp/examples) — arbetsflöden med flera steg
* [Andra klienter](/sv/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai