Bilder in VS Code generieren: Copilot-MCP einrichten

Ein MCP-Server für VS Code ist ein externer Werkzeugkasten, den der Agent-Modus von GitHub Copilot aus dem Chat aufrufen kann: eine JSON-Datei in deinem Repo, und Copilot bekommt Tools, die seine Modelle nicht haben – Bildgenerierung eingeschlossen. Copilot schreibt den ganzen Tag Komponenten und refaktoriert Tests, aber kein Modell dahinter kann eine Bilddatei erzeugen. Füg einen Generierungsserver hinzu, und „mach ein 16:9-Banner für diese README“ wird zu einer Chat-Anweisung, an deren Ende eine echte Datei in assets/ liegt.

Hier das komplette Setup, falls du nur deswegen hier bist. Erstelle einen API-Schlüssel in deinem BananaBanana-Profil und leg Folgendes in .vscode/mcp.json im Root des Repos ab:

{
  "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}"
      }
    }
  }
}

Starte den Server (VS Code zeigt direkt in der Datei einen Start-Hinweis), füg deinen Schlüssel einmal ein, wenn du gefragt wirst – fertig. Die Datei enthält kein Secret und lässt sich deshalb gefahrlos committen. Kein lokaler Prozess, kein eigenes Cloud-Konto, kein Abo: Bilder kosten ab $0.03 vom Prepaid-Guthaben, Video ab $0.10. Beide Demobilder unten habe ich mit einem echten Schlüssel über genau den HTTP-Endpunkt generiert, auf den diese Config zeigt, während ich den Text geschrieben habe; Traces und die Medienrechnung von $0.55 folgen weiter unten.

Warum GitHub Copilot das Generieren von Bildern beibringen?

Weil Repos Bilder immer im ungünstigsten Moment brauchen. Ein README-Hero, damit die Projektseite nicht mit einer Wand aus Badges beginnt. Ein Banner für die Doku-Website. Screenshots mal ausgenommen, war jedes davon früher ein Umweg: Browser-Tab, Prompt, herunterladen, umbenennen, ins Repo ziehen, zurück in den Editor. Zehn Minuten pro Asset, wenn nichts schiefgeht.

Mit einem MCP-Server erledigt Copilot diese Schleife im Agent-Modus. Er schreibt den Prompt, ruft generate_image auf, holt die Datei in den Ordner, den du genannt hast, und passt den Verweis im Markdown an. Du prüfst einen Diff.

Der wichtigere Grund ist der Team-Aspekt, und genau deshalb ist diese Anleitung ein eigener Artikel und kein Absatz im Cursor-Artikel. .vscode/mcp.json ist eine Workspace-Datei. Committe sie einmal, und jede Entwicklerin, die das Repo klont, hat den Bild-Werkzeugkasten beim ersten Öffnen – VS Code fragt jede Person nach ihrem eigenen Schlüssel. Eine Config, ein Schlüssel pro Mensch, null Secrets in Git.

Lokale MCP-Server für Bildgenerierung gibt es auch, und sie sind in Ordnung, wenn du gern einen Node-Prozess betreibst und deinen eigenen Schlüssel beim Upstream-Anbieter samt eigener Quoten mitbringst. Die Remote-Variante spart dir all das: Der Endpunkt läuft bereits bei uns, auf derselben Pipeline wie der BananaBanana-Webgenerator, und deine einzige Zugangsinformation ist ein widerrufbarer bb_live_-Schlüssel.

Wie richtest du mcp.json in VS Code ein?

Die Config-Details sind mit der offiziellen VS-Code-MCP-Dokumentation abgeglichen, Stand 11. Juli 2026. Drei Schritte.

Erstens: Registriere dich und öffne Profil → MCP-API-Schlüssel. Der Schlüssel wird nur einmal angezeigt und bei uns gehasht gespeichert, kopiere ihn also sofort. Neue Konten bekommen $0.20 Startguthaben; das sind sechs Testbilder mit dem günstigsten Modell.

Zweitens: Leg die Config an. Zwei Orte funktionieren:

• .vscode/mcp.json im Repo – die Variante, die sich zu committen lohnt;
• eine mcp.json auf Benutzerebene (Befehlspalette → MCP: Open User Configuration), die dich in jeden Workspace begleitet.

Das Snippet oben nutzt den inputs-Mechanismus, und das ist ehrlich gesagt der angenehmste Umgang mit Secrets von allen MCP-Clients, die ich konfiguriert habe. ${input:bb-api-key} sagt VS Code, dass es beim ersten Start des Servers nach dem Wert fragen soll. "password": true maskiert deine Eingabe, und der Wert landet in verschlüsseltem Speicher statt in der Datei. Vergleich das mit Cursor, wo die Interpolation ${env:…} davon abhängt, dass der Editor deine Shell-Umgebung tatsächlich sieht (ein klassischer stiller Fehler bei per GUI gestarteten Apps). VS Code umgeht das Problem komplett.

Drittens: Starte den Server – Befehlspalette → MCP: List Servers → bananabanana → Start, oder klick auf den Inline-Hinweis in der JSON-Datei. Öffne Copilot Chat im Agent-Modus, schau in die Tool-Auswahl, und du solltest zehn Tools sehen, von list_models bis list_generations. Auf unserer MCP-Server-Seite steht eine Kompatibilitätstabelle für alle Clients, die wir geprüft haben; die Zeile für VS Code ist die, die dieser Artikel ausführt:

Nichts zu sehen? Der Abschnitt über die Eigenheiten behandelt die drei üblichen Ursachen, und eine davon ist eine Richtlinie deiner GitHub-Organisation, die du nicht aus dem Editor heraus beheben kannst.

Anwendungsfall: README- und Doku-Assets direkt ins Repo

Das Szenario, um das ich diesen Artikel gebaut habe: Dein Team veröffentlicht ein CLI-Tool als Open Source, und das Repo braucht einen README-Hero plus ein Bild für den Quickstart in der Doku. In Copilot Chat (Agent-Modus) bittest du um das Banner, der Agent formuliert einen Prompt im Fotografie-Stil und ruft das Tool auf. Das ist der echte Trace, inklusive echter Job-ID:

→ 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/…"}]}

Etwa zwanzig Sekunden vom Aufruf bis zur Datei. Hier genau dieses Ergebnis, erster Versuch:

Eine ehrliche Anmerkung, bevor du so etwas veröffentlichst: Zoom hinein, und die „Terminalausgabe“ auf dem Bildschirm entpuppt sich als plausibel aussehender Kauderwelsch. In README-Breite wird das nie jemand bemerken. Als randloser Doku-Hero, auf dem Text lesbar ist, vielleicht schon. Lesbarer UI-Text in generierten Bildern ist bei allen fotorealistischen Modellen immer noch eine Schwachstelle, halte Bildschirme also klein oder verlange stattdessen einen abstrakten Bildschirm.

Das Bild für den Doku-Quickstart ist derselbe Handgriff mit einem ruhigeren Briefing: Flat Lay von oben, Tastatur, ein ausgedrucktes Diagramm mit Haftnotizen, Tee. Ein Aufruf, $0.11:

Beide Demos liefen auf Nano Banana Pro, weil sie auf dieser Seite veröffentlicht werden. Für interne Wikis und Issue-Vorlagen würde ich ohne zu zögern auf nano-banana-2-lite für $0.03 heruntergehen; der Lite-Leitfaden zeigt, wo das günstige Modell ausreicht. Signierte Datei-URLs bleiben 24 Stunden gültig, und ein neuer get_result-Aufruf stellt sie neu aus.

Video geht aus demselben Chat. generate_video berechnet beim ersten Aufruf nie etwas: Es liefert ein Angebot, und der Agent muss den Aufruf mit confirm_cost wiederholen und damit genau diesen Betrag akzeptieren. Ein 720p-Clip ohne Ton beginnt bei $0.10; Omni Flash mit Ton kostet $0.10 pro Sekunde, also $0.30 für einen drei Sekunden langen Take.

VS-Code-Eigenheiten, die du vor dem Rollout kennen solltest

Gesammelt beim Testen des Setups oben, in der Reihenfolge, in der sie dich wahrscheinlich erwischen.

1. Der oberste Schlüssel heißt servers, nicht mcpServers. Alle anderen großen Clients (Claude, Cursor, Windsurf) nutzen mcpServers, Configs aus der Doku eines anderen Tools scheitern in VS Code also, und die Hinweise des JSON-Schemas übersieht man leicht. Dieselbe Falle gibt es umgekehrt, wenn du VS-Code-Snippets anderswo einfügst. Auch das Feld type: "http" solltest du bei Remote-Servern ausdrücklich angeben.

2. Einen gespeicherten Input-Wert zu ändern ist seltsam umständlich. Die erste Abfrage legt deinen Schlüssel in verschlüsseltem Speicher ab, und danach gibt es keinen offensichtlichen „Secret bearbeiten“-Button. Der Weg, der funktioniert: .vscode/mcp.json öffnen, mit der Maus über den Server fahren und mit den Inline-Steuerelementen mit geleerten Inputs neu starten – oder die gespeicherten Werte löschen: MCP: List Servers → Server → trennen und neu hinzufügen. Über Remote SSH ist es noch holpriger, dort hat die erneute Abfrage laut VS-Code-Issue-Tracker bekannte Probleme. Einen widerrufenen Schlüssel auszutauschen kostet dich also eine Minute Klickerei, die du nicht eingeplant hattest.

3. Bei Copilot Business oder Enterprise ist MCP aus, bis ein Admin eine Richtlinie umstellt. Die Richtlinie „MCP servers in Copilot“ ist für Plätze, die eine Organisation vergibt, standardmäßig deaktiviert, siehe GitHubs Richtlinien-Doku. Verwirrend ist die Art, wie es scheitert: Der Server startet problemlos, die Config ist gültig, und die Tools tauchen im Chat einfach nie auf. Mit einem persönlichen Copilot-Tarif (auch Free) betrifft dich nichts davon.

4. Pro Chat-Anfrage gibt es eine harte Grenze von 128 Tools. Eingebaute Tools, Tools von Erweiterungen und jeder aktivierte MCP-Server zählen dazu, siehe Doku zu Agent-Tools. Unser Server bringt zehn mit, was allein nichts ist – aber kommen ein paar gesprächige Server dazu, scheitern Anfragen, bis du ganze Server in der Tool-Auswahl abwählst. VS Code kann Überzählige hinter virtuellen Tools gruppieren; meiner Erfahrung nach ist es trotzdem besser, nur die Server aktiviert zu lassen, die du wirklich nutzt.

5. Tools laufen im Agent-Modus, und jeder Aufruf fragt nach Bestätigung. Im einfachen Ask-Modus werden MCP-Tools nicht aufgerufen. Wenn das Modell also ständig Bilder beschreibt, statt sie zu erzeugen, schau zuerst ins Modus-Dropdown. Bestätigungen haben ein Dropdown, um ein Tool für die Session, den Workspace oder immer zu erlauben. Für kostenlose Tools wie list_models und get_result ist „immer“ in Ordnung. Für generate_image würde ich die Bestätigung pro Aufruf anlassen, weil jeder Aufruf echtes Geld kostet; Video ist bei uns durch confirm_cost ohnehin doppelt gesichert.

Was haben die Demo-Medien dieses Artikels gekostet?

Normale Preise pro Generierung, dieselben Zahlen, die list_models dem Agenten meldet:

Diesmal hat alles beim ersten Versuch geklappt. Das wird nicht immer so sein, plane also bei allem mit sichtbaren Bildschirmen oder Objektgeometrie eine Neugenerierung ein und schau dir Ergebnisse in voller Größe an, bevor sie im Main-Branch landen.

Wenn du diesen Server schon in einem anderen Editor nutzt, ist die .vscode/mcp.json oben das einzig Neue: gleicher Schlüssel, gleiches Guthaben, gleicher Generierungsverlauf. Fängst du bei null an, zeigt die Anleitung für Claude Code vier weitere Anwendungsfälle, die sich fast wortgleich übertragen lassen. Bereit, wenn du es bist: Erstelle einen Schlüssel und bitte Copilot um dein erstes README-Banner.

FAQ

Unterstützt VS Code Remote-MCP-Server mit Authorization-Header?

Ja, nativ. Ein Remote-Server besteht in mcp.json aus type: "http" plus url und einem optionalen headers-Objekt, und ${input:…}-Referenzen halten das Secret aus der Datei heraus – geprüft gegen die offizielle VS-Code-MCP-Doku am 11. Juli 2026. VS Code unterstützt für Remote-Server auch OAuth; unser Endpunkt authentifiziert seit dem 1. August 2026 sowohl per OAuth 2.1 als auch per Bearer-Schlüssel.

Kann ich .vscode/mcp.json gefahrlos in Git committen?

Ja, wenn der Schlüssel in einer inputs-Referenz steckt statt in der Datei. Das committete JSON enthält nur den Platzhalter; VS Code fragt jede Entwicklerin beim ersten Start nach ihrem eigenen Wert und legt ihn in verschlüsseltem Speicher ab. Diese Trennung pro Person lohnt sich ohnehin: Jeder Schlüssel bekommt ein eigenes Nutzungsprotokoll und optional ein tägliches USD-Limit unter Profil → MCP-API-Schlüssel, und beim Offboarding reicht ein Klick zum Widerrufen, der sonst niemanden betrifft.

Warum tauchen die MCP-Tools nicht in Copilot Chat auf?

Drei Ursachen decken die meisten Fälle ab. Du bist nicht im Agent-Modus, und andere Chat-Modi stellen keine MCP-Tools bereit. Der Server wurde nie gestartet – führ MCP: List Servers aus und prüf seinen Status. Oder dein Copilot-Platz kommt von einer Organisation, und die Richtlinie „MCP servers in Copilot“ ist noch deaktiviert, was stillschweigend scheitert; aktivieren kann sie nur ein Admin der Organisation. Tauchen die Tools auf, aber Aufrufe liefern 401, ist der Schlüssel selbst falsch oder widerrufen, und eine direkte Anfrage aus dem Snippet auf der MCP-Server-Seite bestätigt das in Sekunden.

Brauche ich ein eigenes Cloud-Konto, um in VS Code Bilder zu generieren?

Nein. Lokal laufende Bild-MCP-Server sprechen direkt mit einem Upstream-Anbieter, also mit deinem eigenen API-Schlüssel, deinen Quoten und deiner Abrechnung. Der Remote-Server generiert über BananaBananas verwalteten Schlüsselpool, und deine einzige Zugangsinformation ist der bb_live_-Schlüssel aus deinem Profil: Preise pro Generierung, kein Mindestumsatz, ein Prepaid-Guthaben, das du mit der Web-App teilst.

Kann GitHub Copilot über denselben Server auch Videos generieren?

Ja, mit einem Schritt zur Kostenbestätigung. generate_video liefert zuerst ein Angebot, und der Agent muss den Aufruf mit confirm_cost in exakt diesem Betrag wiederholen, bevor etwas berechnet wird. Die Preise reichen von $0.10 für einen kurzen 720p-Clip ohne Ton bis $4.40 für ein Top-Rendering auf Veo 3.1 mit Ton, und Omni Flash mit Ton kostet $0.10 pro Sekunde ($0.30–$1.00 pro Clip). Clips brauchen eine bis zehn Minuten, der Agent fragt also get_result ab, während er an deinem Code weiterarbeitet.