Vai al contenuto principale
Flowstep è il canvas di design per il software costruito dagli agenti. Il server MCP di Flowstep espone quel canvas tramite il Model Context Protocol, così gli agenti che il tuo team già utilizza possono progettare schermate, osservare il risultato renderizzato e costruire a partire da esso, senza uscire dall’editor o dal terminale. Le schermate che un agente crea tramite MCP finiscono negli stessi file di Flowstep su cui lavora il tuo team. Restano modificabili sul canvas, condivisibili e pronte per essere esportate o copiate in Figma. Il server è ospitato su https://api.flowstep.ai/mcp (trasporto Streamable HTTP). Non c’è alcun processo locale da eseguire e nessuna chiave API da gestire: i client accedono con il tuo account Flowstep tramite OAuth.

​
Cosa puoi fare

Il server espone 22 strumenti in otto categorie: I tre strumenti di Design AI usano la stessa quota di messaggi dell’app Flowstep. Tutti gli altri strumenti sono gratuiti. Vedi Limiti di utilizzo.

​
Casi d’uso comuni

Genera schermate da un prompt: chiama ai-design-screens con una descrizione. Se ometti fileId, Flowstep crea il file e le schermate in un unico passaggio. Chiama get-screen-image per ogni screenId restituito, per vedere il risultato in linea. Visualizza un componente React: carica il sorgente .jsx o .tsx con upload-attachment (mimeType: text/javascript), poi passa l’allegato restituito a ai-design-screens con un messaggio che descrive la schermata. Flowstep legge il sorgente e genera un design corrispondente. Itera su un design: chiama ai-design-screens con uno o più screenId (o singoli id di elementi) in elementIds e istruzioni libere per modificarli direttamente. La stessa chiamata può anche aggiungere nuove schermate, così una sola richiesta può modificare una schermata e costruire quella successiva. Usa ai-edit-screen-variant per applicare a un’intera schermata un preset, come un tema scuro o un layout diverso. Espandi un flusso: chiama ai-generate-screen-variant per aggiungere la schermata successiva, uno stato di errore o vuoto, oppure una versione web, tablet o mobile di una schermata esistente. Lavora partendo dal codice: leggi qualsiasi schermata come JSX con get-screen-jsx, poi scrivi il tuo JSX con add-screen-jsx (nuova schermata) o replace-screen-jsx (sovrascrive una esistente). Per usare le tue immagini, caricale con upload-attachment e inserisci l’assetUrl restituito nel tuo JSX. Questi strumenti sono gratuiti. Mantieni l’output coerente con il brand: usa update-design-guidelines per salvare colori, tipografia e regole dei componenti su un file, come testo DESIGN.md. Le generazioni AI su quel file li seguono. Rileggili con get-design-guidelines, oppure eliminali con delete-design-guidelines. Importa da Figma: chiama import-figma con il link di un frame Figma e un fileId, per portare il frame sul canvas come elementi modificabili. L’organizzazione del file deve prima avere Figma collegato. Controlla la tua quota: chiama get-plan-details per vedere piano, utilizzo e messaggi rimanenti prima di un batch di generazioni.

​
Endpoint

Trasporto: Streamable HTTP. Modello di sessione: senza stato (ogni richiesta è indipendente, senza ID di sessione). Il server supporta la versione 2026-07-28 del protocollo MCP, che annuncia su https://api.flowstep.ai/.well-known/mcp.json. I client che usano il protocollo precedente 2025-11-25 si connettono allo stesso endpoint.

​
Prossimi passi

Avvio rapido

Connetti un client ed esegui la tua prima chiamata a uno strumento.

Autenticazione

Come funzionano l’accesso OAuth 2.1 PKCE e l’approvazione.

Strumenti

Riferimento completo di input e output per tutti i 22 strumenti.

Esempi

Flussi di lavoro end-to-end per le attività comuni.