VS Code'da Görsel Üretin: Copilot MCP Kurulum Kılavuzu

VS Code için bir MCP sunucusu, GitHub Copilot'ın agent modunun sohbet penceresinden çağırabileceği harici bir araç kutusudur: Deponuzda tek bir JSON dosyası ile Copilot, modellerinde bulunmayan, görsel üretimi de dahil olmak üzere yeni araçlar kazanır. Copilot gün boyu bileşenler yazabilir ve testleri refaktör edebilir, ancak arkasındaki hiçbir model doğrudan bir görsel dosyası üretemez. Kuruluma bir görsel üretim sunucusu eklediğinizde, "bu README için 16:9 boyutlarında bir afiş hazırla" demek, assets/ klasöründe gerçek bir dosyayla sonuçlanan basit bir sohbet talimatına dönüşür.

Eğer sadece bunun için geldiyseniz, kurulumun tamamı burada. BananaBanana profilinizden bir API anahtarı oluşturun ve ardından bunu deponun kök dizinindeki .vscode/mcp.json dosyasına yerleştirin:

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

Sunucuyu başlatın (VS Code, dosyanın tam içinde bir Start ipucu gösterir), istendiğinde anahtarınızı bir kez yapıştırın ve bitti. Dosya herhangi bir gizli bilgi içermediğinden, bunu deponuza commitlemek güvenlidir. Yerel işlem yok, Google Cloud hesabı yok, abonelik yok: görseller ön ödemeli bakiyeden $0.03, videolar ise $0.10'dan başlayan fiyatlarla ücretlendirilir. Aşağıdaki her iki demo görseli de ben bu metni yazarken, bu yapılandırmanın işaret ettiği aynı HTTP uç noktası üzerinden aktif bir anahtarla üretildi; izler (traces) ve $0.55 tutarındaki medya faturası daha aşağıda yer alıyor.

Neden GitHub Copilot'a görsel üretmeyi öğretmelisiniz?

Çünkü depoların en olmadık zamanlarda görsellere ihtiyacı olur. Proje sayfasının bir rozet yığınıyla açılmasını önleyecek bir README tanıtım görseli (hero). Dokümantasyon sitesi için bir afiş. Ekran görüntülerini bir kenara bırakırsak, bunların her biri eskiden uzun bir dolambaçlı yol anlamına geliyordu: tarayıcı sekmesi, prompt yazma, indirme, yeniden adlandırma, depoya sürükleme ve editöre geri dönme. Hiçbir sorun çıkmasa bile varlık başına en az on dakika.

Bir MCP sunucusu ile Copilot, bu döngüyü agent modunda çalıştırır. Promptu yazar, generate_image fonksiyonunu çağırır, dosyayı belirttiğiniz klasöre çeker ve markdown referansını düzenler. Size sadece diff'i incelemek kalır.

Asıl büyük neden ise ekip boyutudur ve bu kılavuzun Cursor makalesinde bir paragraf olmak yerine ayrı bir makale olarak var olmasının sebebi de budur. .vscode/mcp.json bir çalışma alanı (workspace) dosyasıdır. Bunu bir kez commitlediğinizde, depoyu klonlayan her geliştirici ilk açılışta görsel araç kutusuna sahip olur ve VS Code her kişiden kendi anahtarını ister. Tek bir yapılandırma, kişi başına bir anahtar ve git geçmişinde sıfır gizli bilgi.

Görsel üretimi için yerel MCP sunucuları da mevcuttur; eğer bir Node süreci çalıştırmaktan ve kendi kotalarınızla kendi Google API anahtarınızı getirmekten keyif alıyorsanız bunlar gayet iyidir. Uzak seçenek ise tüm bunları atlar: uç nokta zaten bizim tarafımızda, BananaBanana web generator ile aynı işlem hattında çalışır ve tek kimlik bilginiz iptal edilebilir bir bb_live_ anahtarıdır.

VS Code'da mcp.json nasıl kurulur?

Yapılandırma ayrıntıları, 11 Temmuz 2026 itibarıyla resmi VS Code MCP dokümantasyonu ile doğrulanmıştır. Üç adım.

İlk olarak, kaydolun ve Profil → MCP API Keys sayfasını açın. Anahtar yalnızca bir kez gösterilir ve bizim tarafımızda hash'lenmiş olarak saklanır, bu yüzden hemen kopyalayın. Yeni hesaplar bakiyelerinde $0.20 ile başlar; bu da en ucuz modelde altı test görseli demektir.

İkinci olarak, yapılandırmayı oluşturun. İki konum kullanılabilir:

• depodaki .vscode/mcp.json (commitlemeye değer olan budur);
• girdiğiniz her çalışma alanında sizi takip eden kullanıcı düzeyinde bir mcp.json (Komut Paleti → MCP: Open User Configuration).

Yukarıdaki kod parçası inputs mekanizmasını kullanıyor ve bu, şimdiye kadar yapılandırdığım tüm MCP istemcileri arasındaki açık ara en şık gizli bilgi yönetimi yöntemi. ${input:bb-api-key}, sunucu ilk kez başladığında VS Code'a bu değeri sormasını söyler. "password": true yazdıklarınızı maskeler ve değer dosyaya değil, şifrelenmiş depolama alanına gider. Bunu, ${env:…} interpolasyonunun editörün kabuk ortamınızı (GUI üzerinden başlatılan uygulamalar için klasik bir sessiz hata) gerçekten görmesine bağlı olduğu Cursor ile karşılaştırın. VS Code bu sorunu tamamen ortadan kaldırıyor.

Üçüncü olarak, sunucuyu başlatın: Komut Paleti → MCP: List Servers → bananabanana → Start seçeneğini seçin veya JSON dosyasındaki satır içi ipucuna tıklayın. Copilot Chat'i agent modunda açın, araç seçiciyi kontrol edin; list_models fonksiyonundan list_generations fonksiyonuna kadar yedi araç görmelisiniz. MCP sunucu sayfamız doğruladığımız her istemci için bir uyumluluk tablosu sunar; VS Code satırı, bu makalenin detaylandırdığı satırdır:

Hiçbir şey görünmüyor mu? Tuhaflıklar bölümü en yaygın üç nedeni kapsıyor ve bunlardan biri editörün içinden düzeltemeyeceğiniz bir GitHub organizasyon politikasıdır.

Kullanım senaryosu: Doğrudan depoya giren README ve dokümantasyon varlıkları

Bu makaleyi etrafında kurguladığım senaryo: ekibiniz açık kaynaklı bir CLI aracı yayınlıyor ve deponun bir README tanıtım görseline ve dokümantasyon hızlı başlangıç kılavuzu için bir görsele ihtiyacı var. Copilot Chat'te (agent modu) afişi istersiniz, agent fotoğrafçılık tarzında bir prompt hazırlar ve aracı çağırır. İşte gerçek iş kimliği (job id) dahil olmak üzere gerçek izleme kaydı (trace):

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

Çağrıdan dosyaya yaklaşık yirmi saniye. İşte ilk denemedeki o çıktının aynısı:

Bunun gibi bir şeyi yayınlamadan önce dürüst bir not: Yakınlaştırdığınızda ekrandaki "terminal çıktısı" kulağa mantıklı gelen anlamsız karakterlerden ibarettir. README genişliğinde bunu kimse fark etmeyecektir. Ancak metnin okunabilir olduğu tam genişlikte bir dokümantasyon görseli olarak fark edilebilir. Üretilen görsellerde okunabilir arayüz metinleri, tüm fotogerçekçi modeller için hala zayıf bir noktadır; bu nedenle ekranları küçük tutun veya bunun yerine soyut bir ekran isteyin.

Dokümantasyon hızlı başlangıç görseli ise daha sade bir özetle aynı hamledir: üstten düz görünüm (flat-lay), klavye, yapışkan notlar içeren basılı bir şema ve çay. Tek bir çağrı, $0.11:

Her iki demo da bu sayfada sunuldukları için Nano Banana Pro üzerinde çalıştırıldı. Dahili vikiler ve hata şablonları için hiç düşünmeden $0.03 fiyatındaki nano-banana-2-lite modeline düşerdim; Lite kılavuzu ucuz modelin nerelerde yeterli olduğunu gösteriyor. İmzalı dosya URL'leri 24 hours boyunca geçerli kalır ve yeni bir get_result çağrısı bunları yeniden düzenler.

Video üretimi de aynı sohbetten çalışır. generate_video ilk çağrıda asla ücret almaz: bir teklif döndürür ve agent'ın tam tutarı kabul eden confirm_cost parametresiyle çağrıyı tekrarlaması gerekir. Sessiz bir 720p klip $0.10'dan başlar; sesli Omni Flash ise saniye başına $0.10 tutarındadır (üç saniyelik bir çekim için $0.30).

Bunu kullanıma sunmadan önce bilmeniz gereken VS Code tuhaflıkları

Yukarıdaki kurulumu test ederken, muhtemelen canınızı sıkacakları sırayla toplanmıştır.

1. Üst düzey anahtar mcpServers değil, servers'tır. Diğer tüm büyük istemciler (Claude, Cursor, Windsurf) mcpServers kullanır, bu nedenle başka bir aracın dokümantasyonundan kopyalanan yapılandırmalar VS Code'da başarısız olur ve JSON şeması ipuçlarını gözden kaçırmak kolaydır. VS Code kod parçacıklarını başka bir yere kopyaladığınızda da tersi bir tuzak söz konusudur. type: "http" alanını da uzak sunucular için açık tutmakta fayda var.

2. Saklanan bir girdi değerini değiştirmek tuhaf bir şekilde zordur. İlk istem, anahtarınızı şifreli depolama alanında saklar ve sonrasında görünür bir "gizli bilgiyi düzenle" düğmesi yoktur. Çalışan yöntem: .vscode/mcp.json dosyasını açın, sunucunun üzerine gelin ve girdileri temizlenmiş olarak yeniden başlatmak için satır içi kontrolleri kullanın veya saklanan değerleri MCP: List Servers → sunucu → bağlantıyı kes ve yeniden ekle adımlarıyla silin. Yeniden sorma işlemlerinin VS Code sorun takipçisinde bilinen sorunları olduğu Remote SSH üzerinde bu durum daha da zordur. İptal edilmiş bir anahtarı yenilemek, planlamadığınız bir dakikalık tıklama süreci gerektirir.

3. Copilot Business veya Enterprise kullanıyorsanız, bir yönetici politikayı değiştirene kadar MCP kapalıdır. "MCP servers in Copilot" politikası, GitHub'ın politika belgelerine göre kuruluş tarafından sağlanan lisanslar için varsayılan olarak devre dışıdır. Kafa karıştırıcı olan kısım ise hata verme şeklidir: sunucu sorunsuz başlar, yapılandırma doğrulanır ancak araçlar sohbette asla görünmez. Kişisel bir Copilot planındaysanız (Ücretsiz dahil), bunların hiçbiri geçerli değildir.

4. Sohbet isteği başına 128 araçlık sert bir sınır vardır. Agent araçları belgelerine göre, yerleşik araçlar, uzantı araçları ve etkinleştirilen her MCP sunucusu bu sınıra dahil edilir. Sunucumuz kendi başına çok fazla olmayan yedi araç ekler, ancak çok sayıda araç sunan birkaç sunucuyu üst üste eklediğinizde, araç seçiciden bazı sunucuların seçimini kaldırana kadar istekler başarısız olmaya başlar. VS Code taşmaları sanal araçların arkasında gruplayabilir; benim deneyimime göre, yalnızca gerçekten kullandığınız sunucuları etkin tutmak en iyisidir.

5. Araçlar agent modunda çalışır ve her çağrı onay ister. MCP araçları düz soru sorma (ask) modundan tetiklenmez, bu nedenle model görseller üretmek yerine onları tanımlamaya devam ediyorsa önce mod açılır menüsünü kontrol edin. Onaylar; bir araca oturum için, çalışma alanı için veya her zaman izin vermenizi sağlayan bir açılır menüye sahiptir. list_models ve get_result gibi ücretsiz araçlar için "always" (her zaman) seçeneği uygundur. generate_image için her çağrıda onay alma seçeneğini açık tutmanızı öneririm çünkü her çağrı gerçek para harcar; video ise her halükarda bizim tarafımızdaki confirm_cost ile çift kilitlidir.

Bu makalenin demo medyası ne kadara mal oldu?

Üretim başına standart fiyatlar, list_models fonksiyonunun agent'a rapor ettiği sayıların aynısı:

Bu sefer her şey ilk denemede yerine oturdu. Bu her zaman gerçekleşmez, bu nedenle görünür ekranları veya nesne geometrisi olan her şey için bütçenizi bir yeniden denemeye göre ayarlayın ve sonuçları ana dala (main branch) göndermeden önce tam boyutta inceleyin.

Bu sunucuyu zaten başka bir editörde kullanıyorsanız, yukarıdaki .vscode/mcp.json tek yeni parçadır: aynı anahtar, aynı bakiye, aynı üretim geçmişi. Sıfırdan başlıyorsanız, Claude Code rehberi neredeyse kelimesi kelimesine aktarabileceğiniz dört kullanım senaryosu daha sunuyor. Hazır olduğunuzda: bir anahtar oluşturun ve Copilot'tan ilk README afişinizi isteyin.

SSS

VS Code, Authorization başlığına sahip uzak MCP sunucularını destekliyor mu?

Evet, yerel olarak destekliyor. Uzak sunucu, mcp.json içindeki type: "http" ve url değerlerinin yanı sıra isteğe bağlı bir headers nesnesidir; ayrıca 11 Temmuz 2026 tarihindeki resmi VS Code MCP belgeleriyle doğrulandığı üzere ${input:…} referansları gizli bilgiyi dosyanın dışında tutar. VS Code ayrıca uzak sunucular için OAuth desteği de sunar; uç noktamız şu anda Bearer anahtarları ile kimlik doğrulaması yapmaktadır, ikinci bir seçenek olarak ise OAuth 2.1 planlanmaktadır.

.vscode/mcp.json dosyasını git'e commitlemek güvenli mi?

Evet, eğer anahtar dosya yerine bir inputs referansında yer alıyorsa. Commitleşen JSON yalnızca yer tutucuyu taşır; VS Code her geliştiriciye ilk başlatmada kendi değerini sorar ve bunu şifreli depolamada saklar. Bu kişi bazlı ayrım her halükarda faydalıdır: her anahtar, Profil → MCP API Keys menüsünde kendi kullanım günlüğünü ve isteğe bağlı günlük USD sınırını alır; ayrıca ekipten çıkarma işlemi, başka hiç kimseyi etkilemeyen tek tıklamayla iptal etme işleminden ibarettir.

MCP araçları neden Copilot Chat'te görünmüyor?

Çoğu durumu üç neden açıklar. Agent modunda değilsinizdir ve diğer sohbet modları MCP araçlarını göstermez. Sunucu hiç başlatılmamıştır, bu nedenle MCP: List Servers komutunu çalıştırın ve durumunu kontrol edin. Veya Copilot üyeliğiniz bir kuruluştan geliyordur ve sessizce başarısız olan "MCP servers in Copilot" politikası hala devre dışıdır; bunu yalnızca bir organizasyon yöneticisi etkinleştirebilir. Araçlar görünüyor ancak çağrılar 401 hatası döndürüyorsa anahtarın kendisi yanlıştır veya iptal edilmiştir; MCP sunucu sayfasındaki kod parçacığından yapılacak doğrudan bir istek bunu saniyeler içinde doğrulayacaktır.

VS Code'da görsel üretmek için bir Google API anahtarına ihtiyacım var mı?

Hayır. Yerel olarak çalıştırılan görsel MCP sunucuları doğrudan Gemini API ile konuşur; bu da kendi Google anahtarınız, kotalarınız ve faturalandırmanız anlamına gelir. Uzak sunucu ise görsel üretimini BananaBanana'nın Vertex AI anahtarlarından oluşan yönetilen havuzunda çalıştırır ve tek kimlik bilginiz profilinizdeki bb_live_ anahtarıdır: üretim başına fiyatlandırma, minimum harcama limiti yok ve web uygulamasıyla paylaşılan tek bir ön ödemeli bakiye.

GitHub Copilot aynı sunucu üzerinden video üretebilir mi?

Evet, bir maliyet onay adımı ile birlikte. generate_video ilk olarak bir teklif döndürür ve herhangi bir ücret alınmadan önce agent'ın tam tutarla eşleşen confirm_cost ile çağrıyı tekrarlaması gerekir. Fiyatlar, kısa ve sessiz bir 720p klip için $0.10'dan başlar, sesli üst düzey bir Veo 3.1 işlemesi için $4.40'a kadar çıkar; sesli Omni Flash ise saniye başına $0.10 ($0.30–$1.00/klip) olarak faturalandırılır. Kliplerin tamamlanması bir ila on dakika sürer, bu nedenle agent siz kodunuz üzerinde çalışmaya devam ederken get_result fonksiyonunu sorgular.