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

# Flowstep MCP-server

> Använd Flowstep som en MCP-server för att generera, inspektera och hantera UI-designer direkt från Cursor, Claude Code eller vilken MCP-kompatibel klient som helst.

Flowstep exponerar sina designverktyg över [Model Context Protocol](https://modelcontextprotocol.io/), vilket gör att din AI-assistent kan skapa och iterera på UI-skärmar utan att lämna din editor.

Servern körs på `https://api.flowstep.ai/mcp` (Streamable HTTP-transport). Ingen lokal process att köra.

## Vad du kan göra

Servern exponerar 20 verktyg i sju kategorier:

| Kategori          | Verktyg                                                                                       |
| ----------------- | --------------------------------------------------------------------------------------------- |
| **Filer**         | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Skärmar**       | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **AI-generering** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Chatt**         | `get-chat-history`                                                                            |
| **Design**        | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**         | `import-figma`                                                                                |
| **Fakturering**   | `get-plan-details`                                                                            |

## Vanliga användningsfall

**Generera skärmar från en prompt** — anropa `create-new-design` med en beskrivning. Flowstep skapar filen och skärmarna i ett steg. Anropa `get-screen-image` med de returnerade `screenIds` för att se resultatet direkt.

**Visualisera en React-komponent** — ladda upp din `.jsx` eller `.tsx` fil via `upload-attachment` (använd `mimeType: text/javascript`), passa sedan den returnerade bilagan till `create-new-design` med ett meddelande som beskriver komponenten. Flowstep läser källkoden och genererar en matchande designskärm.

**Iterera på en design** — anropa `edit-design` med en målskärm `screenId` och instruktioner för att ändra den, eller `regenerate-design` för att göra en skärm från början.

**Underhåll designriktlinjer** — anropa `get-design-guidelines` för att hämta dina nuvarande stilregler (färger, typografi, mellanrum, ton), använd sedan `update-design-guidelines` för att hålla dem synkroniserade medan din design utvecklas. Om du skickar in konsekventa riktlinjer i `create-new-design` eller `edit-design` säkerställs att varje genererad skärm följer varumärket. Använd `delete-design-guidelines` för att återställa dem helt.

**Importera från Figma** — anropa `import-figma` med en Figma-ramlänk och en `fileId` för att föra ramen till en Flowstep-fil som redigerbara element. Organisationen måste ha Figma anslutet först.

**Granska quota** — anropa `get-plan-details` för att se återstående daglig och månatlig användning innan du startar en batch med generering.

## Slutpunkt

```
https://api.flowstep.ai/mcp
```

Transport: Streamable HTTP. Sessionsmodell: stateless (varje begäran är oberoende, ingen session-ID).

## Nästa steg

<CardGroup cols={2}>
  <Card title="Snabbstart" icon="bolt" href="/sv/mcp/quickstart">
    Första verktygsamtalet på under 5 minuter med Cursor.
  </Card>

  <Card title="Autentisering" icon="lock" href="/sv/mcp/authentication">
    Hur OAuth 2.1 PKCE fungerar och hur tokens utfärdas.
  </Card>

  <Card title="Verktyg" icon="wrench" href="/sv/mcp/tools">
    Fullständig inmatnings-/utmatningsreferens för alla 20 verktyg.
  </Card>

  <Card title="Exempel" icon="code" href="/sv/mcp/examples">
    End-to-end-arbetsflöden för vanliga uppgifter.
  </Card>
</CardGroup>