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

> Bruk Flowstep som en MCP-server til å generere, inspeksjonere og administrere UI-design direkte fra Cursor, Claude Code eller en MCP-kompatibel klient.

Flowstep eksponerer designverktøyene sine over [Model Context Protocol](https://modelcontextprotocol.io/), slik at AI-assistenten din kan opprette og iterera UI-skjermer uten å forlate editoren.

Serveren er hostet på `https://api.flowstep.ai/mcp` (Streamable HTTP transport). Ingen lokal prosess å kjøre.

## Hva du kan gjøre

Serveren eksponerer 20 verktøy fordelt på sju kategorier:

| Kategori          | Verktøy                                                                                       |
| ----------------- | --------------------------------------------------------------------------------------------- |
| **Filer**         | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Skjermer**      | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **AI-generering** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Chat**          | `get-chat-history`                                                                            |
| **Design**        | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**         | `import-figma`                                                                                |
| **Fakturering**   | `get-plan-details`                                                                            |

## Vanlige brukstilfeller

**Generer skjermer fra en prompt** — kall `create-new-design` med en beskrivelse. Flowstep oppretter filen og skjermene i ett trinn. Kall `get-screen-image` med de returnerte `screenIds` for å se resultatet inline.

**Visualiser en React-komponent** — last opp `.jsx`- eller `.tsx`-filen din via `upload-attachment` (bruk `mimeType: text/javascript`), og pass deretter det returnerte vedlegget inn i `create-new-design` med en melding som beskriver komponenten. Flowstep leser kilden og genererer en tilsvarende designskjerm.

**Iterer på en design** — kall `edit-design` med en mål-`screenId` og instruksjoner for å endre den, eller `regenerate-design` for å gjøre en skjerm om igjen fra bunnen av.

**Vedlikehold designretningslinjer** — kall `get-design-guidelines` for å hente gjeldende stilregler (farger, typografi, avstand, tone), og bruk deretter `update-design-guidelines` for å holde dem synkronisert etter hvert som designet utvikler seg. Hvis du overfører konsistente retningslinjer til `create-new-design` eller `edit-design`, sikrer du at hver generert skjerm forblir merkevareoppdatert. Bruk `delete-design-guidelines` for å tilbakestille dem helt.

**Importer fra Figma** — kall `import-figma` med en Figma-rammelenke og en `fileId` for å bringe rammene inn i en Flowstep-fil som redigerbare elementer. Organisasjonen av filen må ha Figma koblet først.

**Revidere kvote** — kall `get-plan-details` for å se gjenværende daglig og månedlig bruk før du starter en rekke generasjoner.

## Endepunkt

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

Transport: Streamable HTTP. Sessionsmodell: tilstandsløs (hver forespørsel er uavhengig, ingen sesjons-ID).

## Neste steg

<CardGroup cols={2}>
  <Card title="Rask start" icon="bolt" href="/no/mcp/quickstart">
    Første verktøykall på under 5 minutter med Cursor.
  </Card>

  <Card title="Autentisering" icon="lock" href="/no/mcp/authentication">
    Hvordan OAuth 2.1 PKCE fungerer og hvordan token utstedes.
  </Card>

  <Card title="Verktøy" icon="wrench" href="/no/mcp/tools">
    Fullstendig input/output-referanse for alle 20 verktøy.
  </Card>

  <Card title="Eksempler" icon="code" href="/no/mcp/examples">
    Ende-til-ende-arbeidsflyter for vanlige oppgaver.
  </Card>
</CardGroup>