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

# Server MCP di Flowstep

> Usa Flowstep come server MCP per generare, ispezionare e gestire design UI direttamente da Cursor, Claude Code o da qualsiasi client compatibile con MCP.

Flowstep espone i suoi strumenti di design sul [Model Context Protocol](https://modelcontextprotocol.io/), permettendo al tuo assistente AI di creare e iterare su schermate UI senza lasciare l'editor.

Il server è ospitato su `https://api.flowstep.ai/mcp` (trasporto HTTP Streamable). Nessun processo locale da eseguire.

## Cosa puoi fare

Il server espone 20 strumenti su sette categorie:

| Categoria          | Strumenti                                                                                     |
| ------------------ | --------------------------------------------------------------------------------------------- |
| **File**           | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Schermate**      | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **Generazione AI** | `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`                                                                                |
| **Fatturazione**   | `get-plan-details`                                                                            |

## Casi di utilizzo comuni

**Genera schermate da un prompt** — chiama `create-new-design` con una descrizione. Flowstep crea il file e le schermate in un unico passaggio. Chiama `get-screen-image` con i `screenIds` restituiti per vedere il risultato in linea.

**Visualizza un componente React** — carica il tuo file `.jsx` o `.tsx` tramite `upload-attachment` (usa `mimeType: text/javascript`), quindi passa l'attachment restituito in `create-new-design` con un messaggio che descrive il componente. Flowstep legge il codice sorgente e genera una schermata di design corrispondente.

**Itera su un design** — chiama `edit-design` con un `screenId` di destinazione e istruzioni per modificarlo, oppure `regenerate-design` per rifare una schermata da zero.

**Mantieni le linee guida di design** — chiama `get-design-guidelines` per recuperare le tue regole di stile attuali (colori, tipografia, spaziatura, tono), quindi usa `update-design-guidelines` per mantenerle sincronizzate mentre il tuo design si evolve. Passare linee guida coerenti in `create-new-design` o `edit-design` assicura che ogni schermata generata rimanga fedele al brand. Usa `delete-design-guidelines` per ripristinarle completamente.

**Importa da Figma** — chiama `import-figma` con un link di frame Figma e un `fileId` per portare il frame in un file Flowstep come elementi modificabili. L'organizzazione del file deve avere Figma connesso prima.

**Verifica la quota** — chiama `get-plan-details` per vedere l'uso giornaliero e mensile rimanente prima di avviare un lotto di generazioni.

## Endpoint

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

Trasporto: HTTP Streamable. Modello di sessione: stateless (ogni richiesta è indipendente, nessun ID di sessione).

## Passaggi successivi

<CardGroup cols={2}>
  <Card title="Guida rapida" icon="bolt" href="/it/mcp/quickstart">
    Prima chiamata dello strumento in meno di 5 minuti con Cursor.
  </Card>

  <Card title="Autenticazione" icon="lock" href="/it/mcp/authentication">
    Come funziona OAuth 2.1 PKCE e come vengono emessi i token.
  </Card>

  <Card title="Strumenti" icon="wrench" href="/it/mcp/tools">
    Riferimento completo input/output per tutti i 20 strumenti.
  </Card>

  <Card title="Esempi" icon="code" href="/it/mcp/examples">
    Workflow end-to-end per attività comuni.
  </Card>
</CardGroup>