Generare immagini in VS Code: guida MCP per Copilot

Un server MCP per VS Code è una cassetta degli attrezzi esterna che la modalità agente di GitHub Copilot può chiamare dalla chat: un file JSON nel tuo repo, e Copilot ottiene tool che i suoi modelli non hanno, compresa la generazione di immagini. Copilot scrive componenti e riorganizza test tutto il giorno, ma nessun modello dietro di lui sa produrre un file immagine. Aggiungi un server di generazione e «fai un banner 16:9 per questo README» diventa un'istruzione in chat che finisce con un file vero in assets/.

Ecco tutto il setup, se sei venuto solo per questo. Crea una chiave API nel tuo profilo BananaBanana, poi metti questo in .vscode/mcp.json nella root del repo:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "bb-api-key",
      "description": "BananaBanana API key (bb_live_...)",
      "password": true
    }
  ],
  "servers": {
    "bananabanana": {
      "type": "http",
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:bb-api-key}"
      }
    }
  }
}

Avvia il server (VS Code mostra un suggerimento Start direttamente dentro il file), incolla la chiave una volta quando te la chiede, fatto. Il file non contiene segreti, quindi è sicuro da committare. Nessun processo locale, nessun account cloud tuo, nessun abbonamento: le immagini partono da $0.03 e i video da $0.10, addebitati su un saldo prepagato. Entrambe le immagini demo qui sotto sono state generate su una chiave reale tramite lo stesso endpoint HTTP a cui punta questa config, mentre scrivevo il testo; tracce e conto media da $0.55 sono più in basso.

Perché insegnare a GitHub Copilot a generare immagini?

Perché i repo hanno bisogno di immagini nei momenti meno comodi. Un hero per il README, così la pagina del progetto non si apre con un muro di badge. Un banner per il sito della documentazione. Screenshot a parte, ognuna di queste era una deviazione: scheda del browser, prompt, download, rinomina, trascina nel repo, torna all'editor. Dieci minuti per asset, se va tutto liscio.

Con un server MCP è Copilot a fare quel giro, in modalità agente. Scrive il prompt, chiama generate_image, scarica il file nella cartella che hai indicato e modifica il riferimento nel markdown. Tu rivedi un diff.

Il motivo più grosso è il lavoro in team, ed è il motivo per cui questa guida è un articolo a sé e non un paragrafo in quella per Cursor. .vscode/mcp.json è un file del workspace. Lo committi una volta e ogni sviluppatore che clona il repo si ritrova la cassetta degli attrezzi per le immagini alla prima apertura, con VS Code che chiede a ciascuno la propria chiave. Una config, una chiave per persona, zero segreti in git.

Esistono anche server MCP locali per generare immagini, e vanno bene se ti piace far girare un processo Node e portarti la tua chiave del provider a monte con le tue quote. L'opzione remota salta tutto questo: l'endpoint gira già dalla nostra parte, sulla stessa pipeline del generatore web BananaBanana, e la tua unica credenziale è una chiave bb_live_ revocabile.

Come si configura mcp.json in VS Code?

I dettagli della config sono verificati sulla documentazione MCP ufficiale di VS Code all'11 luglio 2026. Tre passaggi.

Primo, registrati e apri Profilo → Chiavi API MCP. La chiave viene mostrata una sola volta e da noi è salvata come hash, quindi copiala subito. I nuovi account partono con $0.20 di saldo, cioè sei immagini di prova sul modello più economico.

Secondo, crea la config. Funzionano due posizioni:

• .vscode/mcp.json nel repo, quella che vale la pena committare;
• un mcp.json a livello utente (Command Palette → MCP: Open User Configuration) che ti segue in ogni workspace.

Lo snippet all'inizio usa il meccanismo inputs, ed è sinceramente la gestione dei segreti più comoda tra tutti i client MCP che ho configurato. ${input:bb-api-key} dice a VS Code di chiedere il valore la prima volta che il server parte. "password": true nasconde quello che digiti, e il valore finisce in uno storage cifrato, non nel file. Confrontalo con Cursor, dove l'interpolazione ${env:…} dipende dal fatto che l'editor veda davvero l'ambiente della tua shell (un classico fallimento silenzioso per le app lanciate dall'interfaccia grafica). VS Code aggira il problema del tutto.

Terzo, avvia il server: Command Palette → MCP: List Servers → bananabanana → Start, oppure clicca il suggerimento inline nel file JSON. Apri Copilot Chat in modalità agente, controlla il selettore dei tool e dovresti vedere dieci tool, da list_models a list_generations. La nostra pagina del server MCP tiene una tabella di compatibilità per ogni client che abbiamo verificato; la riga di VS Code è quella che questo articolo approfondisce:

Non compare niente? La sezione sulle stranezze copre le tre cause tipiche, e una di queste è una policy dell'organizzazione GitHub che non puoi sistemare dall'interno dell'editor.

Caso d'uso: asset per README e documentazione direttamente nel repo

Lo scenario attorno a cui ho costruito questo articolo: il tuo team rilascia come open source un tool da riga di comando, e il repo ha bisogno di un hero per il README più un'immagine per il quickstart della documentazione. In Copilot Chat (modalità agente) chiedi il banner, l'agente compone un prompt in stile fotografico e chiama il tool. Questa è la traccia reale, job id compreso:

→ generate_image {"prompt": "A wide photorealistic hero banner for a GitHub
   README of an open-source terminal application: a sleek dark laptop on a
   light oak desk showing colorful command-line output, soft morning window
   light from the left, shallow depth of field, 50mm lens, generous clean
   negative space on the right side for a project title, no text, no logos",
   "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgq90ou00036k7f86f0y54w", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.18}
→ get_result {"job_id": "cmrgq90ou00036k7f86f0y54w"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

Una ventina di secondi dalla chiamata al file. Ecco esattamente quell'output, primo tentativo:

Una nota onesta prima di pubblicare qualcosa del genere: se fai zoom, l'«output del terminale» sullo schermo è un'accozzaglia di caratteri dall'aria plausibile. Alla larghezza di un README nessuno se ne accorgerà mai. Come hero a tutta pagina nella documentazione, dove il testo si legge, qualcuno potrebbe. Il testo leggibile delle interfacce nelle immagini generate è ancora un punto debole per tutti i modelli fotorealistici, quindi tieni gli schermi piccoli o chiedi uno schermo astratto.

L'immagine per il quickstart della documentazione è la stessa mossa con un brief più tranquillo: flat-lay dall'alto, tastiera, uno schema stampato con i post-it, tè. Una chiamata, $0.11:

Entrambe le demo sono girate su Nano Banana Pro perché finiscono su questa pagina. Per wiki interne e template delle issue scenderei a nano-banana-2-lite a $0.03 senza pensarci due volte; la guida a Lite mostra dove il modello economico basta. Gli URL firmati dei file restano validi 24 ore, e una nuova chiamata a get_result li rigenera.

Dalla stessa chat funzionano anche i video. generate_video non addebita mai nulla alla prima chiamata: restituisce un preventivo, e l'agente deve ripetere la chiamata con confirm_cost accettando l'importo esatto. Una clip a 720p senza audio parte da $0.10; Omni Flash con audio costa $0.10 al secondo, quindi $0.30 per una ripresa di tre secondi.

Stranezze di VS Code da conoscere prima di distribuirlo al team

Raccolte mentre testavo il setup qui sopra, nell'ordine in cui è più probabile che ti diano problemi.

1. La chiave di primo livello è servers, non mcpServers. Tutti gli altri client principali (Claude, Cursor, Windsurf) usano mcpServers, quindi le config copiate dalla documentazione di un altro strumento falliscono in VS Code, e i suggerimenti dello schema JSON si ignorano facilmente. Stessa trappola al contrario quando copi snippet di VS Code altrove. Per i server remoti conviene anche tenere esplicito il campo type: "http".

2. Cambiare un valore di input salvato è stranamente difficile. Il primo prompt salva la chiave in uno storage cifrato, e dopo non c'è un pulsante evidente per «modificare il segreto». La strada che funziona: apri .vscode/mcp.json, passa il mouse sul server e usa i controlli inline per riavviare con gli input azzerati, oppure cancella i valori salvati da MCP: List Servers → server → disconnetti e riaggiungi. Via Remote SSH è ancora più scomodo, perché la nuova richiesta del valore ha problemi noti secondo il tracker delle issue di VS Code. Ruotare una chiave revocata ti costa un minuto di clic che non avevi previsto.

3. Su Copilot Business o Enterprise, MCP è spento finché un amministratore non attiva una policy. La policy «MCP servers in Copilot» è disattivata di default per i posti assegnati dall'organizzazione, secondo la documentazione delle policy di GitHub. La parte che confonde è come fallisce: il server parte senza problemi, la config è valida, e i tool semplicemente non compaiono mai in chat. Se hai un piano Copilot personale (Free compreso), niente di tutto questo ti riguarda.

4. C'è un limite rigido di 128 tool per richiesta in chat. Tool integrati, tool delle estensioni e ogni server MCP attivo contano tutti, secondo la documentazione sui tool dell'agente. Il nostro server ne aggiunge dieci, che da soli sono niente, ma se accumuli qualche server loquace le richieste iniziano a fallire finché non deselezioni interi server nel selettore dei tool. VS Code può raggruppare quelli in eccesso dietro tool virtuali; per esperienza conviene comunque tenere attivi solo i server che usi davvero.

5. I tool girano in modalità agente, e ogni chiamata chiede conferma. I tool MCP non partono dalla semplice modalità ask, quindi se il modello continua a descrivere immagini invece di crearle, controlla prima il menu della modalità. Le conferme hanno un menu a tendina per consentire un tool per la sessione, per il workspace o sempre. Per i tool gratuiti come list_models e get_result, «sempre» va bene. Per generate_image terrei la conferma a ogni chiamata, visto che ogni chiamata spende soldi veri; i video hanno comunque un doppio lucchetto con confirm_cost dalla nostra parte.

Quanto sono costati i media demo di questo articolo?

Prezzi standard per generazione, gli stessi numeri che list_models comunica all'agente:

Questa volta è riuscito tutto al primo tentativo. Non succederà sempre, quindi metti in conto una rigenerazione per tutto ciò che ha schermi visibili o geometria degli oggetti, e guarda i risultati a dimensione piena prima che arrivino sul branch principale.

Se usi già questo server in un altro editor, l'unica parte nuova è il .vscode/mcp.json qui sopra: stessa chiave, stesso saldo, stessa cronologia delle generazioni. Se parti da zero, la guida per Claude Code ha altri quattro casi d'uso che si trasferiscono quasi alla lettera. Quando vuoi: crea una chiave e chiedi a Copilot il tuo primo banner per il README.

FAQ

VS Code supporta server MCP remoti con un header Authorization?

Sì, nativamente. Un server remoto è type: "http" più url e un oggetto headers opzionale in mcp.json, e i riferimenti ${input:…} tengono il segreto fuori dal file, verificato sulla documentazione MCP ufficiale di VS Code l'11 luglio 2026. VS Code supporta anche OAuth per i server remoti; dal 1° agosto 2026 il nostro endpoint autentica sia con OAuth 2.1 sia con chiavi Bearer.

È sicuro committare .vscode/mcp.json su git?

Sì, se la chiave vive in un riferimento inputs e non nel file. Il JSON committato contiene solo il segnaposto; VS Code chiede a ogni sviluppatore il proprio valore al primo avvio e lo conserva in uno storage cifrato. Questa separazione per persona conviene comunque: ogni chiave ha il suo log d'uso e un tetto giornaliero opzionale in USD in Profilo → Chiavi API MCP, e quando qualcuno lascia il team basta revocare con un clic, senza toccare nessun altro.

Perché i tool MCP non compaiono in Copilot Chat?

Tre cause coprono la maggior parte dei casi. Non sei in modalità agente, e le altre modalità della chat non espongono i tool MCP. Il server non è mai stato avviato: lancia MCP: List Servers e controlla il suo stato. Oppure il tuo posto Copilot arriva da un'organizzazione e la policy «MCP servers in Copilot» è ancora disattivata, il che fallisce in silenzio; solo un amministratore dell'organizzazione può attivarla. Se i tool compaiono ma le chiamate restituiscono 401, la chiave è sbagliata o è stata revocata, e una richiesta diretta con lo snippet nella pagina del server MCP te lo conferma in pochi secondi.

Serve un mio account cloud per generare immagini in VS Code?

No. I server MCP per immagini che girano in locale parlano direttamente con un provider a monte, il che significa chiave API, quote e fatturazione tue. Il server remoto esegue la generazione sul pool di chiavi gestito da BananaBanana, e la tua unica credenziale è la chiave bb_live_ del profilo: prezzi per generazione, nessuna spesa minima, un unico saldo prepagato condiviso con l'app web.

GitHub Copilot può generare video tramite lo stesso server?

Sì, con un passaggio di conferma del costo. generate_video restituisce prima un preventivo, e l'agente deve ripetere la chiamata con confirm_cost pari all'importo esatto prima che venga addebitato qualcosa. I prezzi vanno da $0.10 per una breve clip a 720p senza audio fino a $4.40 per un render Veo 3.1 di fascia alta con audio, e Omni Flash con audio costa $0.10 al secondo ($0.30–$1.00 a clip). Le clip richiedono da uno a dieci minuti, quindi l'agente interroga get_result mentre continua a lavorare sul tuo codice.