Vibr MCP

Vibr MCP è un piccolo server che esegui sul tuo computer. Permette a un agente come Claude Code, Cursor o Claude Desktop di lavorare con Vibr: elencare i tuoi prototipi, costruire e modificare schermate, importare un file di Figma, leggere i tuoi temi come design token ed esportare un prototipo nel tuo progetto.

La tua libreria e le tue chiavi si trovano nel browser, quindi il lavoro avviene in una scheda di Vibr che colleghi. L'agente chiede, e la scheda fa il lavoro con il tuo design system e la chiave del tuo modello, come quando digiti tu stesso una richiesta.

Configura

Ti serve Node 20 o successivo. In Claude Code, aggiungi il server una volta:

claude mcp add vibr -- npx -y vibr-mcp

Gli altri client MCP accettano lo stesso comando nel loro file di impostazioni:

{ "mcpServers": { "vibr": { "command": "npx", "args": ["-y", "vibr-mcp"] } } }

Collega una scheda

1. Chiedi al tuo agente di collegarsi a Vibr. Ti darà un link a una pagina che il server mostra sul tuo computer.
2. Apri il link nel browser in cui usi Vibr e seleziona Open Vibr. Vibr si apre in una finestra tutta sua, con la tua libreria e la tua chiave. Se Vibr non ha ancora una chiave, aggiungine una lì.
3. Vibr chiede se l'MCP su questo computer può lavorare in quella finestra. Seleziona Consenti.
4. La finestra mostra MCP connesso in basso. Seleziona Disconnetti per terminare in qualsiasi momento.

Tieni aperte la pagina del server e la finestra di Vibr mentre l'agente lavora. Ogni link vale per una sessione del server; quando il server si riavvia, chiedi un nuovo link.

Cosa può fare

• Elencare e leggere. I prototipi salvati, il codice e le richieste di un prototipo, le menzioni della tua libreria e le impostazioni della scheda (provider, modello, design system, mai la tua chiave).
• Costruire. Far passare una richiesta per Pianifica, Costruisci, Verifica, Revisiona e Correggi, come nuovo prototipo o come revisione di uno esistente, e salvarlo nella tua libreria. Usa la tua chiave, quindi costa quanto la stessa richiesta in Vibr.
• Importare da Figma. Importare un file .vibr-figma.json dal plugin Send to Vibr e costruirne i frame come schermate collegate. Vedi Importa da Figma.
• Leggere i temi. Un tema come proprietà personalizzate CSS o design token, con i suoi ruoli chiari e scuri.
• Esportare. Scrivere un prototipo in una cartella come pagina singola, flusso collegato o codice sorgente React. Non sostituisce mai un file se non lo chiedi, e non scrive mai fuori dalla cartella che indichi.

Privacy e sicurezza

• Le tue chiavi non lasciano mai la scheda. Il server non le vede mai, e le richieste vanno dalla scheda al provider del tuo modello, come sempre.
• Il server è in ascolto solo su 127.0.0.1. Passa il lavoro a Vibr tramite la propria pagina nel tuo browser, quindi vibr.art non si collega mai al tuo computer.
• Vibr accetta lavoro solo dalla pagina che lo ha aperto, solo con il codice casuale monouso contenuto nel link del server e solo dopo che hai selezionato Consenti.
• I contenuti della tua libreria arrivano all'agente come dati: il testo di un prototipo o un file importato non può dare istruzioni al tuo agente, a meno che il tuo agente non li tratti così. Controlla quindi ciò che costruisce come faresti con qualsiasi bozza.

Altro in Chiavi, privacy e archiviazione.

Impostazioni

• VIBR_MCP_PORT: la porta sul tuo computer (4517, se non è già occupata).
• VIBR_MCP_APP: la pagina di Vibr che apre il link (https://vibr.art/, a meno che tu non esegua Vibr per conto tuo).

Risoluzione dei problemi

• Vibr non si collega mai. Verifica di aver selezionato Consenti nella finestra di Vibr e che la pagina del server sia ancora aperta. Se il browser ha bloccato la finestra, consenti i pop-up per quella pagina e seleziona di nuovo Open Vibr.
• L'agente dice che nessuna scheda è collegata. Il server si è riavviato o una finestra è stata chiusa. Chiedi un nuovo link e aprilo.
• Una costruzione non riesce. Apri la finestra di Vibr: l'esecuzione mostra ogni passaggio, come quando digiti una richiesta.