Passa al contenuto principale

MCP di Webround Editor

Ogni draft è un sito fatto di codice vero (un progetto React e Vite) su cui l'editor e Claude lavorano insieme. L'MCP dell'editor dà a Claude le stesse operazioni che usa l'editor, quindi può leggere una pagina, cambiare una sezione, scrivere la versione inglese di un testo, impostare la SEO o il tema e controllare il risultato in un browser. Ogni modifica passa dalle stesse protezioni dell'editor: è il codice che cambia, e l'editor lo mostra.

Ogni draft è un server MCP a sé, all'indirizzo del suo sito:

https://<draftId>-render-v2.webround.net/__wr/mcp

Parla Streamable HTTP, senza sessioni.

Collega​

Ti serve una chiave API dello store con il permesso site:update. Una chiave con solo site:read non basta: ogni strumento di questo server, anche quelli che si limitano a leggere, richiede site:update. Crea la chiave dalla dashboard (vedi API Keys).

Con Claude Code:

claude mcp add --transport http webround-editor "https://<draftId>-render-v2.webround.net/__wr/mcp" \
--header "Authorization: Bearer <chiave API>"

Il server chiede al core di Webround a chi appartiene la chiave e se può lavorare su quel draft, esattamente come fa per l'editor. Non serve altro: nessun'altra intestazione.

Qualche regola del server:

  • Una richiesta con l'intestazione Origin viene rifiutata: questo endpoint è per gli strumenti, non per le pagine web.
  • Un messaggio può pesare fino a 64 KB.
  • Se il container del draft è addormentato, la prima richiesta lo sveglia e lo aspetta, fino a 90 secondi; dopo, la risposta è un 503 con Retry-After.

Cosa può fare Claude​

Gli strumenti sono in Strumenti dell'editor, con i parametri di ciascuno. In breve:

AreaCosa c'è
Pagine e contenutiElencare, creare, cancellare e aggiornare pagine. Leggere una pagina come albero di elementi e tutto ciò che contiene di tradotto, con le lingue che mancano.
ElementiLeggere, cambiare, inserire, cancellare e spostare un elemento di una pagina. Inserire blocchi pronti dal catalogo dell'editor o markup tuo, e duplicare un elemento leggendone il sorgente.
LingueLe lingue del sito e ogni testo in ogni lingua.
SEOTitolo, descrizione, immagini e testi social di ogni pagina e dell'intero sito; titolo e descrizione suggeriti da ciò che dice la pagina; robots.txt e le sitemap; le pagine che una build pre-renderizza per i motori di ricerca.
TemaColori, spaziature, font Google e personalizzati, e il tema scuro.
StiliLeggere e impostare lo stile di un elemento per ogni dimensione di schermo e stato (hover, focus…); copiare uno stile tra schermi; stili condivisi da applicare a molti elementi.
CommentiI commenti che l'editor mostra sugli elementi. Claude può leggere quelli aperti come lista di cose da fare, agire e segnarli come risolti.
File e pacchettiLeggere e scrivere i file del sito, e aggiungere o togliere i pacchetti da cui dipende.
KitPartire da un insieme di pagine pronto, come lo shop.
ControlliControllare il codice (accessibilità, titoli, link), aprire una pagina in un browser per vedere gli errori che troverebbe un visitatore, fare uno screenshot e avere in una risposta tutto ciò che non va.

Cosa chiedere​

  • "Accorcia la hero della home e metti il pulsante d'azione a destra."
  • "Traduci tutta la pagina Chi siamo in inglese e francese."
  • "Scrivi titolo e descrizione di ogni pagina per la SEO."
  • "Cambia il colore primario in un verde scuro e controlla che i pulsanti siano ancora leggibili."
  • "Apri lo shop su un telefono e dimmi cosa non va."

Claude può controllare il proprio lavoro: dopo una modifica può guardare la pagina e leggere gli errori. Chiediglielo.

Da sapere​

  • I commenti sono il modo facile di chiedere. Lascia commenti sugli elementi che vuoi cambiare, nell'editor, e chiedi a Claude di lavorare su quelli aperti: li legge, fa ciò che chiedono e li segna come risolti.
  • Uno strumento che toglie qualcosa lo dice. Il server segna le cancellazioni (destructiveHint), quindi il tuo client può chiederti conferma prima di cancellare un file, una pagina o un elemento.
  • Un connettore per ogni draft. Aggiungi un server per ogni sito su cui vuoi che Claude lavori.