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

# Guida rapida MCP

> Connetti Flowstep al tuo editor AI ed esegui la tua prima chiamata dello strumento.

## Prerequisiti

* Un account Flowstep ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Richiede Cursor v0.43+**

    ## Passaggio 1 — Aggiungere il server

    Crea o modifica `~/.cursor/mcp.json` (globale) o `.cursor/mcp.json` nella radice del tuo progetto:

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    Riavvia Cursor dopo il salvataggio.

    ## Passaggio 2 — Autentica

    Apri il pannello MCP di Cursor (Settings → MCP) e fai clic su **Connect** accanto a Flowstep. Cursor apre il tuo browser al login OAuth di Flowstep. Accedi con le tue credenziali Flowstep (email/password o Google). Il browser reindirizza indietro e Cursor memorizza il token automaticamente.

    <Note>
      Hai bisogno di un account Flowstep prima di autenticarti. Se non ne hai uno, iscriviti su [app.flowstep.ai](https://app.flowstep.ai) prima.
    </Note>

    ## Passaggio 3 — Esegui una chiamata dello strumento

    In una chat di Cursor, chiedi:

    > "List my Flowstep files"

    Cursor chiama `list-files` e restituisce il tuo elenco di file. Se la risposta è vuota, crea prima un file:

    > "Create a new Flowstep file called 'Dashboard'"

    ## Passaggio 4 — Genera una schermata

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Cursor chiama `create-new-design` (che crea il file e genera le schermate in un unico passaggio), quindi `get-screen-image`. Vedrai il design renderizzato in linea nella chat.
  </Tab>

  <Tab title="Claude Code">
    **Richiede Claude Code CLI**

    ## Passaggio 1 — Aggiungi il server

    Crea `.mcp.json` nella radice del tuo progetto (scope del progetto) o `~/.claude/mcp.json` (globale):

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      Il campo `"type": "http"` è obbligatorio per i server HTTP di Claude Code. Cursor non lo richiede.
    </Note>

    ## Passaggio 2 — Autentica

    Esegui qualsiasi strumento Flowstep da una chat di Claude Code. Al primo utilizzo, Claude Code apre il tuo browser al login OAuth di Flowstep. Accedi con le tue credenziali Flowstep (email/password o Google). Il browser reindirizza indietro e il token viene memorizzato automaticamente.

    <Note>
      Hai bisogno di un account Flowstep prima di autenticarti. Se non ne hai uno, iscriviti su [app.flowstep.ai](https://app.flowstep.ai) prima.
    </Note>

    ## Passaggio 3 — Esegui una chiamata dello strumento

    In una chat di Claude Code, chiedi:

    > "List my Flowstep files"

    Claude Code chiama `list-files` e restituisce il tuo elenco di file. Se la risposta è vuota, crea prima un file:

    > "Create a new Flowstep file called 'Dashboard'"

    ## Passaggio 4 — Genera una schermata

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Claude Code chiama `create-new-design` (che crea il file e genera le schermate in un unico passaggio), quindi `get-screen-image`. Vedrai il design renderizzato in linea nella chat.
  </Tab>
</Tabs>

## Passaggi successivi

* [Riferimento strumenti](/it/mcp/tools) — documentazione completa input/output per tutti i 20 strumenti
* [Esempi](/it/mcp/examples) — workflow multi-step
* [Altri client](/it/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai