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

> Brug Flowstep som en MCP-server til at generere, inspicere og administrere UI-designs direkte fra Cursor, Claude Code eller en hvilken som helst MCP-kompatibel klient.

Flowstep eksponerer sine design-værktøjer over [Model Context Protocol](https://modelcontextprotocol.io/), hvilket giver din AI-assistent mulighed for at oprette og gentage UI-skærme uden at forlade din editor.

Serveren er hostet på `https://api.flowstep.ai/mcp` (Streamable HTTP-transport). Ingen lokale processer at køre.

## Hvad du kan gøre

Serveren eksponerer 20 værktøjer på tværs af syv kategorier:

| Kategori          | Værktøjer                                                                                     |
| ----------------- | --------------------------------------------------------------------------------------------- |
| **Files**         | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Screens**       | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **AI generation** | `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`                                                                                |
| **Billing**       | `get-plan-details`                                                                            |

## Almindelige use cases

**Generér skærme fra en prompt** — kald `create-new-design` med en beskrivelse. Flowstep opretter filen og skærmene i ét skridt. Kald `get-screen-image` med det returnerede `screenIds` for at se resultatet inline.

**Visualisér en React-komponent** — upload din `.jsx` eller `.tsx`-fil via `upload-attachment` (brug `mimeType: text/javascript`), derefter send det returnerede attachment til `create-new-design` med en besked, der beskriver komponenten. Flowstep læser kilden og genererer en matchende design-skærm.

**Gentag et design** — kald `edit-design` med et mål-`screenId` og instruktioner til at modificere det, eller `regenerate-design` for at gøre en skærm fra bunden.

**Vedligehold designretningslinjer** — kald `get-design-guidelines` for at hente dine nuværende style-regler (farver, typografi, mellemrum, tone), derefter brug `update-design-guidelines` for at holde dem synkroniseret, når dit design udvikler sig. Overgivelse af konsistente retningslinjer til `create-new-design` eller `edit-design` sikrer, at hver genereret skærm forbliver mærke-konform. Brug `delete-design-guidelines` for at nulstille dem helt.

**Importer fra Figma** — kald `import-figma` med et Figma-frame-link og en `fileId` for at bringe framen til en Flowstep-fil som redigerbare elementer. Filens organisation skal have Figma forbundet først.

**Audit-kvote** — kald `get-plan-details` for at se den daglige og månedlige restbrug før du starter med en batch-generering.

## Slutpunkt

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

Transport: Streamable HTTP. Sessionmodel: stateless (hver forespørgsel er uafhængig, intet sessions-ID).

## Næste trin

<CardGroup cols={2}>
  <Card title="Hurtig start" icon="bolt" href="/da/mcp/quickstart">
    Første værktøjskald på under 5 minutter med Cursor.
  </Card>

  <Card title="Godkendelse" icon="lock" href="/da/mcp/authentication">
    Sådan fungerer OAuth 2.1 PKCE og hvordan tokens udstedes.
  </Card>

  <Card title="Værktøjer" icon="wrench" href="/da/mcp/tools">
    Fuldt input/output-reference for alle 20 værktøjer.
  </Card>

  <Card title="Eksempler" icon="code" href="/da/mcp/examples">
    End-to-end-workflows for almindelige opgaver.
  </Card>
</CardGroup>