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

> Utilitza Flowstep com a servidor MCP per generar, inspeccionar i gestionar dissenys de UI directament des de Cursor, Claude Code o qualsevol client compatible amb MCP.

Flowstep exposa les seves eines de disseny a través del [Model Context Protocol](https://modelcontextprotocol.io/), permetent al teu assistent d'IA crear i iterar sobre pantalles sense sortir de l'editor.

El servidor s'allotja a `https://api.flowstep.ai/mcp` (transport Streamable HTTP). Cap procés local a executar.

## Què pots fer

El servidor exposa 20 eines en set categories:

| Categoria          | Eines                                                                                         |
| ------------------ | --------------------------------------------------------------------------------------------- |
| **Fitxers**        | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Pantalles**      | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **Generació d'IA** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Xat**            | `get-chat-history`                                                                            |
| **Disseny**        | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**          | `import-figma`                                                                                |
| **Facturació**     | `get-plan-details`                                                                            |

## Casos d'ús comuns

**Generar pantalles des d'un prompt** — crida `create-new-design` amb una descripció. Flowstep crea el fitxer i les pantalles en un pas. Crida `get-screen-image` amb els `screenIds` retornats per veure el resultat en línia.

**Visualitzar un component React** — carrega el fitxer `.jsx` o `.tsx` a través de `upload-attachment` (utilitza `mimeType: text/javascript`), aleshores passa l'adjunt retornat a `create-new-design` amb un missatge que descrigui el component. Flowstep llegeix la font i genera una pantalla de disseny coincident.

**Iterar en un disseny** — crida `edit-design` amb un `screenId` objectiu i instruccions per modificar-lo, o `regenerate-design` per refer una pantalla des de zero.

**Mantenir directrius de disseny** — crida `get-design-guidelines` per recuperar les teves normes d'estil actuals (colors, tipografia, espaiat, to), aleshores utilitza `update-design-guidelines` per mantenir-les sincronitzades mentre el teu disseny evoluciona. Passar directrius coherents a `create-new-design` o `edit-design` assegura que cada pantalla generada mantingui la marca. Utilitza `delete-design-guidelines` per restablir-les completament.

**Importar des de Figma** — crida `import-figma` amb un enllaç a un marc de Figma i un `fileId` per portar el marc a un fitxer de Flowstep com a elements editables. L'organització del fitxer ha de tenir Figma connectada primer.

**Auditar quota** — crida `get-plan-details` per veure l'ús restant diari i mensual abans de iniciar una tanda de generacions.

## Endpoint

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

Transport: Streamable HTTP. Model de sessió: sense estat (cada sol·licitud és independent, sense ID de sessió).

## Passos següents

<CardGroup cols={2}>
  <Card title="Inici ràpid" icon="bolt" href="/ca/mcp/quickstart">
    Primera crida d'eina en menys de 5 minuts amb Cursor.
  </Card>

  <Card title="Autenticació" icon="lock" href="/ca/mcp/authentication">
    Com funciona OAuth 2.1 PKCE i com s'emeten els tokens.
  </Card>

  <Card title="Eines" icon="wrench" href="/ca/mcp/tools">
    Referència completa d'entrada/sortida per a totes les 20 eines.
  </Card>

  <Card title="Exemples" icon="code" href="/ca/mcp/examples">
    Fluxos de treball de punta a punta per a tasques comunes.
  </Card>
</CardGroup>