Menghasilkan Gambar di VS Code: Panduan Pengaturan Copilot MCP

Server MCP untuk VS Code adalah kotak perkakas eksternal yang dapat dipanggil oleh mode agent GitHub Copilot dari obrolan: cukup satu file JSON di repositori Anda, dan Copilot mendapatkan alat yang tidak dimiliki oleh model bawaannya, termasuk pembuatan gambar. Copilot dapat menulis komponen dan merefaktor pengujian sepanjang hari, tetapi tidak ada model di belakangnya yang bisa menghasilkan file gambar secara langsung. Tambahkan server pembuat gambar dan instruksi obrolan seperti "buat spanduk 16:9 untuk README ini" akan langsung menghasilkan file nyata di direktori assets/.

Berikut adalah seluruh konfigurasi jika itu satu-satunya hal yang Anda cari. Buat API key di profil BananaBanana Anda, lalu masukkan kode berikut ke .vscode/mcp.json di root repositori:

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

Mulai server (VS Code menampilkan petunjuk Start langsung di dalam file), tempel key Anda sekali saat diminta, dan selesai. File ini tidak berisi rahasia apa pun, sehingga aman untuk di-commit. Tanpa proses lokal, tanpa akun Google Cloud, tanpa langganan: pembuatan gambar dikenakan biaya mulai dari $0.03 dari saldo prabayar Anda, sedangkan video mulai dari $0.10. Kedua gambar demo di bawah ini dihasilkan menggunakan key aktif melalui endpoint HTTP yang sama dengan yang ditunjuk konfigurasi ini, tepat saat saya menulis teks ini; trace (rekam jejak) dan tagihan media sebesar $0.55 dibahas lebih lanjut di bagian bawah.

Mengapa mengajarkan GitHub Copilot untuk menghasilkan gambar?

Karena repositori sering kali membutuhkan gambar di saat-saat yang paling tidak terduga. Misalnya, gambar utama (hero image) README agar halaman proyek tidak langsung menyuguhkan dinding penuh badge (shields). Atau spanduk untuk situs dokumentasi. Di luar tangkapan layar, pembuatan gambar seperti ini biasanya membutuhkan proses yang berbelit-belit: membuka tab browser, menulis prompt, mengunduh, mengubah nama file, menyeretnya ke repositori, lalu kembali ke editor. Proses ini bisa memakan waktu sepuluh menit per aset jika tidak ada kendala.

Dengan server MCP, Copilot menjalankan seluruh siklus tersebut dalam mode agent. Copilot akan menulis prompt, memanggil generate_image, menarik file ke dalam folder yang Anda tentukan, dan mengedit referensi markdown-nya. Anda hanya perlu meninjau perbedaan kode (diff).

Alasan yang lebih besar adalah dari sudut pandang tim, dan itulah alasan mengapa panduan ini dibuat sebagai artikel terpisah, bukan hanya sekadar paragraf dalam panduan Cursor. .vscode/mcp.json adalah file ruang kerja (workspace). Cukup commit sekali dan setiap pengembang yang mengkloning repositori akan langsung mendapatkan kotak perkakas gambar saat pertama kali membukanya, di mana VS Code akan meminta key masing-masing pengembang. Satu konfigurasi, satu key per orang, dan nol rahasia di git.

Server MCP lokal untuk pembuatan gambar juga tersedia, dan itu tidak masalah jika Anda senang menjalankan proses Node dan menggunakan Google API key Anda sendiri beserta kuotanya. Opsi server jarak jauh melewati semua kerumitan tersebut: endpoint sudah berjalan di sisi kami, menggunakan pipeline yang sama dengan BananaBanana web generator, dan satu-satunya kredensial Anda adalah key bb_live_ yang dapat dicabut kapan saja.

Bagaimana cara mengatur mcp.json di VS Code?

Detail konfigurasi telah disesuaikan dengan dokumentasi resmi VS Code MCP per 11 Juli 2026. Hanya ada tiga langkah.

Pertama, daftar dan buka Profil → MCP API Keys. Key hanya ditampilkan sekali dan disimpan dalam bentuk hash di sisi kami, jadi segera salin. Akun baru dimulai dengan saldo sebesar $0.20; itu cukup untuk membuat enam gambar uji coba pada model termurah.

Kedua, buat konfigurasi. Ada dua lokasi yang didukung:

• .vscode/mcp.json di dalam repositori, yang merupakan opsi terbaik untuk di-commit;
• mcp.json di tingkat pengguna (Command Palette → MCP: Open User Configuration) yang akan mengikuti Anda di setiap ruang kerja.

Cuplikan kode di bagian atas menggunakan mekanisme inputs, dan ini benar-benar penanganan rahasia paling elegan dari semua klien MCP yang pernah saya konfigurasikan. ${input:bb-api-key} memberi tahu VS Code untuk meminta nilai tersebut saat pertama kali server dinyalakan. "password": true akan menyamarkan apa yang Anda ketik, dan nilainya akan disimpan di penyimpanan terenkripsi, bukan di dalam file konfigurasi. Bandingkan dengan Cursor, di mana interpolasi ${env:…} bergantung pada kemampuan editor untuk melihat lingkungan shell Anda secara nyata (penyebab klasik kegagalan senyap pada aplikasi yang dijalankan via GUI). VS Code menghindari masalah tersebut sepenuhnya.

Ketiga, mulai server: Command Palette → MCP: List Servers → bananabanana → Start, atau klik petunjuk sebaris (inline hint) pada file JSON. Buka Copilot Chat dalam mode agent, periksa pemilih alat (tools picker), dan Anda akan melihat tujuh alat, mulai dari list_models hingga list_generations. Halaman dokumentasi server MCP kami menyediakan tabel kompatibilitas untuk setiap klien yang telah kami verifikasi; baris VS Code adalah bagian yang diperjelas dalam artikel ini:

Tidak ada yang muncul? Bagian kendala (quirks) membahas tiga penyebab umum, salah satunya adalah kebijakan organisasi GitHub yang tidak bisa Anda perbaiki dari dalam editor.

Kasus penggunaan: Aset README dan dokumen langsung ke repositori

Skenario yang saya gunakan sebagai landasan artikel ini: tim Anda merilis alat CLI sebagai sumber terbuka, dan repositori memerlukan gambar utama README serta gambar untuk panduan memulai cepat (quickstart) dokumentasi. Di Copilot Chat (mode agent), Anda meminta spanduk, dan agent akan menyusun prompt bergaya fotografi lalu memanggil alat tersebut. Ini adalah rekam jejak (trace) aslinya, lengkap dengan ID pekerjaan nyata:

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

Sekitar dua puluh detik dari pemanggilan alat hingga file siap digunakan. Berikut adalah hasil persisnya dari percobaan pertama:

Satu catatan jujur sebelum Anda merilis gambar seperti ini: jika Anda memperbesarnya, tampilan "terminal" di layar laptop sebenarnya hanyalah coretan acak (gibberish) yang sekilas tampak nyata. Pada lebar standar README, tidak ada yang akan menyadarinya. Namun, jika digunakan sebagai gambar utama dokumen berukuran penuh di mana teks dapat dibaca, pengguna mungkin akan menyadarinya. Menampilkan teks antarmuka (UI) yang mudah dibaca pada gambar buatan AI masih menjadi kelemahan bagi setiap model fotorealistik, jadi buat tampilan layar tetap kecil atau mintalah tampilan layar abstrak sebagai gantinya.

Gambar quickstart dokumen menggunakan langkah serupa dengan instruksi yang lebih tenang: tampilan flat-lay dari atas, keyboard, diagram arsitektur yang dicetak dengan catatan tempel (sticky notes), dan secangkir teh. Satu panggilan, seharga $0.11:

Kedua demo dijalankan pada Nano Banana Pro agar sesuai dengan kualitas halaman ini. Untuk wiki internal dan templat kendala (issue), saya akan langsung beralih ke nano-banana-2-lite seharga $0.03 tanpa ragu; panduan versi Lite kami menunjukkan di mana model murah ini sudah dirasa cukup. URL file bertanda tangan digital tetap berlaku selama 24 jam, dan panggilan get_result yang baru akan menerbitkannya kembali.

Video juga dapat dibuat dari obrolan yang sama. generate_video tidak pernah mengenakan biaya pada panggilan pertama: perintah ini mengembalikan penawaran biaya (quote), dan agent harus mengulangi panggilan dengan parameter confirm_cost untuk menyetujui jumlah tagihan yang tepat. Klip 720p tanpa suara dimulai dari $0.10; Omni Flash dengan suara dikenakan biaya $0.10 per detik, jadi $0.30 untuk video berdurasi tiga detik.

Kendala VS Code yang perlu diketahui sebelum Anda menerapkannya

Daftar kendala yang dikumpulkan selama pengujian konfigurasi di atas, diurutkan berdasarkan seberapa sering kendala tersebut memicu masalah.

1. Key tingkat atas adalah servers, bukan mcpServers. Setiap klien utama lainnya (Claude, Cursor, Windsurf) menggunakan mcpServers, sehingga konfigurasi yang disalin dari dokumentasi alat lain akan gagal di VS Code, dan petunjuk skema JSON-nya sangat mudah diabaikan. Jebakan yang sama juga berlaku sebaliknya ketika Anda menyalin cuplikan konfigurasi VS Code ke tempat lain. Kolom type: "http" juga sebaiknya ditulis secara eksplisit untuk server jarak jauh.

2. Mengubah nilai input yang tersimpan sangatlah sulit. Prompt pertama akan menyimpan key Anda di penyimpanan terenkripsi, dan tidak ada tombol "edit rahasia" yang jelas setelahnya. Langkah yang dapat dilakukan: buka .vscode/mcp.json, arahkan kursor ke server, dan gunakan kontrol sebaris (inline controls) untuk memulai ulang dengan input yang dibersihkan, atau hapus nilai yang tersimpan via MCP: List Servers → server → disconnect dan tambahkan kembali. Proses ini lebih rumit melalui Remote SSH, di mana permintaan input ulang memiliki masalah yang sudah diketahui menurut pelacak masalah VS Code. Mengganti key yang dicabut memerlukan waktu satu menit untuk melakukan klik yang tidak Anda rencanakan sebelumnya.

3. Pada akun Copilot Business atau Enterprise, MCP dinonaktifkan sampai admin mengubah kebijakan. Kebijakan "MCP servers in Copilot" dinonaktifkan secara bawaan untuk akun yang diterbitkan oleh organisasi, menurut dokumentasi kebijakan GitHub. Bagian yang membingungkan adalah perilakunya saat gagal: server berjalan normal, konfigurasi tervalidasi dengan baik, tetapi alat-alat tersebut tidak pernah muncul dalam obrolan. Jika Anda menggunakan paket Copilot pribadi (termasuk versi Free), batasan ini tidak berlaku.

4. Ada batas keras sebanyak 128 alat per permintaan obrolan. Alat bawaan, alat ekstensi, dan setiap server MCP yang diaktifkan semuanya dihitung dalam batas ini, sesuai dengan dokumentasi alat agent. Server kami menambahkan tujuh alat, yang sebenarnya tidak banyak secara tersendiri, tetapi menumpuk beberapa server yang memiliki banyak alat akan menyebabkan permintaan mulai gagal hingga Anda mematikan beberapa server di pemilih alat. VS Code dapat mengelompokkan alat yang melimpah di balik alat virtual; namun menurut pengalaman saya, lebih baik hanya mengaktifkan server yang benar-benar Anda gunakan saja.

5. Alat berjalan dalam mode agent, dan setiap pemanggilan memerlukan konfirmasi. Alat MCP tidak berjalan dalam mode obrolan biasa (ask mode), jadi jika model terus mendeskripsikan gambar alih-alih membuatnya, periksa menu dropdown mode terlebih dahulu. Konfirmasi memiliki pilihan dropdown untuk mengizinkan alat selama sesi obrolan berjalan, ruang kerja saja, atau selalu diizinkan (always). Untuk alat gratis seperti list_models dan get_result, memilih "always" adalah hal yang wajar. Namun untuk generate_image, saya sarankan tetap mengaktifkan konfirmasi per panggilan, karena setiap panggilan menggunakan saldo riil; pembuatan video juga diamankan secara ganda melalui langkah confirm_cost di sisi kami.

Berapa biaya media demo untuk artikel ini?

Harga standar per generasi, angka yang sama dengan yang dilaporkan list_models kepada agent:

Kali ini semua aset langsung berhasil pada percobaan pertama. Namun, hal itu tidak selalu terjadi, jadi siapkan anggaran tambahan untuk pembuatan ulang (reroll) pada aset yang menampilkan layar atau bentuk geometri objek yang rumit, dan selalu lihat hasilnya dalam ukuran penuh sebelum menggabungkannya ke cabang utama (main branch).

Jika Anda sudah menggunakan server ini di editor lain, konfigurasi .vscode/mcp.json di atas adalah satu-satunya bagian baru: key yang sama, saldo yang sama, dan riwayat pembuatan yang sama. Bagi Anda yang baru memulai, panduan Claude Code memiliki empat kasus penggunaan lainnya yang dapat disalin hampir secara langsung. Jika Anda sudah siap: buat key dan minta Copilot untuk membuat spanduk README pertama Anda.

FAQ

Apakah VS Code mendukung server MCP jarak jauh dengan header Authorization?

Ya, secara bawaan (natively). Server jarak jauh didefinisikan sebagai type: "http" ditambah url dan objek headers opsional di dalam mcp.json, serta penggunaan ${input:…} untuk menjaga kerahasiaan key agar tidak tertulis langsung dalam file, yang telah divalidasi terhadap dokumen resmi VS Code MCP per 11 Juli 2026. VS Code juga mendukung OAuth untuk server jarak jauh; endpoint kami saat ini menggunakan metode autentikasi Bearer key, dengan rencana integrasi OAuth 2.1 sebagai opsi kedua di masa mendatang.

Apakah aman untuk melakukan commit file .vscode/mcp.json ke git?

Ya, aman jika key Anda diletakkan dalam referensi inputs dan bukan langsung ditulis di dalam file. File JSON yang di-commit hanya membawa tempat penampung (placeholder); VS Code akan meminta setiap pengembang untuk memasukkan nilai mereka masing-masing pada awal penggunaan dan menyimpannya di ruang penyimpanan terenkripsi lokal mereka. Pemisahan per pengguna ini sangat praktis: setiap key memiliki log penggunaan dan batas USD harian opsional di Profil → MCP API Keys, dan proses pemberhentian akses pengembang dapat dilakukan hanya dengan sekali klik untuk mencabut akses tanpa memengaruhi pengguna lainnya.

Mengapa alat MCP tidak muncul di Copilot Chat?

Tiga penyebab umum yang biasanya memicu masalah ini. Pertama, Anda belum berada dalam mode agent, karena mode obrolan lainnya tidak menyediakan akses ke alat MCP. Kedua, server belum dijalankan, jadi jalankan perintah MCP: List Servers dan periksa statusnya. Ketiga, akun Copilot Anda diterbitkan oleh organisasi dan kebijakan "MCP servers in Copilot" masih dinonaktifkan (kegagalan ini terjadi secara senyap); hanya administrator organisasi yang dapat mengaktifkannya. Jika alat muncul tetapi panggilan menghasilkan kesalahan status 401, maka key tersebut salah atau telah dicabut, dan permintaan mentah dari contoh cuplikan kode di halaman server MCP kami dapat mengonfirmasi hal tersebut dalam hitungan detik.

Apakah saya memerlukan Google API key untuk menghasilkan gambar di VS Code?

Tidak. Server MCP pembuat gambar yang dijalankan secara lokal berkomunikasi langsung dengan Gemini API, yang berarti Anda harus menggunakan key, batasan kuota, dan sistem penagihan Google Anda sendiri. Sementara itu, server jarak jauh kami menjalankan pembuatan gambar di atas Vertex AI key BananaBanana yang dikelola secara terpusat, dan satu-satunya kredensial Anda adalah key bb_live_ dari profil Anda: biaya dihitung per generasi, tanpa batas minimum pengeluaran, dan menggunakan satu saldo prabayar yang dibagikan bersama dengan aplikasi web.

Bisakah GitHub Copilot membuat video melalui server yang sama?

Ya, dengan langkah konfirmasi biaya tambahan. generate_video pertama-tama akan mengembalikan estimasi biaya, dan agent harus mengulangi panggilan dengan parameter confirm_cost yang sesuai dengan jumlah biaya tersebut sebelum saldo Anda terpotong. Harga berkisar dari $0.10 untuk klip 720p pendek tanpa suara hingga $4.40 untuk pembuatan video tingkat atas menggunakan Veo 3.1 dengan suara, sedangkan Omni Flash dengan suara dikenakan biaya $0.10 per detik ($0.30–$1.00 per klip). Pembuatan klip video memakan waktu satu hingga sepuluh menit, sehingga agent akan melakukan polling ke fungsi get_result di latar belakang sembari tetap melanjutkan pengerjaan kode Anda.