Generate Gambar di Cursor: Panduan Setup Server MCP

Server MCP untuk Cursor adalah kotak perkakas eksternal yang bisa dipanggil oleh agen editor dari chat. Cukup tambahkan satu blok JSON ke mcp.json, dan Cursor akan mendapatkan kemampuan baru yang tidak dimiliki model dasarnya, termasuk pembuatan gambar. Agen Cursor bisa mengedit file dan menjalankan perintah terminal sepanjang hari, tetapi tidak ada model bawaannya yang bisa menghasilkan file gambar. Hubungkan server generasi gambar ini, dan instruksi biasa seperti "buatkan gambar hero 16:9 untuk landing page ini" akan langsung menghasilkan file asli di repositori Anda.

Berikut panduan setup lengkapnya jika Anda ingin langsung mulai. Buat API key di profil BananaBanana Anda, lalu tambahkan kode ini ke ~/.cursor/mcp.json (global) atau .cursor/mcp.json di dalam proyek Anda:

{
  "mcpServers": {
    "bananabanana": {
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer ${env:BB_API_KEY}"
      }
    }
  }
}

Ekspor BB_API_KEY=bb_live_YOUR_KEY di environment Anda, dan selesai. Tanpa proses server lokal, tanpa akun Google Cloud, tanpa biaya langganan. Biaya gambar mulai dari $0.03 yang dipotong dari saldo prabayar, dan video mulai dari $0.10. Kedua gambar demo dalam panduan ini dibuat menggunakan konfigurasi persis seperti di atas dengan key aktif saat saya menulis artikel ini. Detail trace proses dan tagihan media sebesar $0.55 bisa Anda lihat di bawah.

Mengapa perlu memasang generator gambar di Cursor?

Karena saat ngoding frontend, kita sering kali butuh gambar mendadak di tengah-tengah menulis kode. Gambar hero untuk landing page, placeholder kartu produk agar grid tidak tampil kosong dengan kotak abu-abu, atau gambar OG untuk postingan blog yang baru saja Anda buat. Semua ini sebenarnya tidak sulit, tapi biasanya kita harus repot melakukan alur yang sama: buka generator gambar di tab browser baru, ketik prompt, download, ganti nama file, seret ke folder public/, kembali ke editor, lalu tulis tag <img>. Alur kerja manual ini memakan waktu sekitar sepuluh menit per aset, dan sering kali memecah fokus Anda dari komponen yang sedang dikerjakan.

Dengan server MCP, agen Cursor akan menangani seluruh alur tersebut. Agen akan menulis prompt (biasanya lebih bagus daripada draf pertama saya yang asal-asalan), memanggil generate_image, mengunduh hasilnya ke folder yang tepat, dan langsung menulis markup lengkap dengan teks alt. Anda tinggal memeriksa perubahan kode (diff) alih-alih melakukan pekerjaan kasar tersebut secara manual.

Kelebihan lainnya adalah kepraktisannya. Server MCP lokal untuk membuat gambar memang ada dan berfungsi, tetapi Anda harus menjalankan proses Node atau Python sendiri serta menggunakan Google API key Anda sendiri, lengkap dengan kuota dan tagihan di akun Google Anda. Dengan server remote, Anda tidak perlu pusing memikirkan itu semua. Endpoint sudah berjalan di sisi kami, menggunakan pipeline yang sama dengan generator BananaBanana, dan satu-satunya kredensial yang Anda butuhkan hanyalah satu key bb_live_.

Bagaimana cara menambahkan server MCP ke Cursor?

Cukup tiga langkah, sekitar dua menit. Detail konfigurasi di bawah ini telah disesuaikan dengan dokumentasi resmi Cursor MCP per 11 Juli 2026.

Pertama, silakan mendaftar and buka Profil → MCP API Keys. Buat sebuah key baru. Key ini hanya akan ditampilkan sekali, diawali dengan bb_live_, dan disimpan dalam bentuk terenkripsi (hash) di sisi kami, jadi segera salin key tersebut. Akun baru akan mendapatkan saldo awal sebesar $0.20, cukup untuk mencoba membuat enam gambar tes menggunakan model termurah.

Kedua, tentukan lokasi file konfigurasi Anda. Cursor membaca konfigurasi dari dua lokasi:

• ~/.cursor/mcp.json — global, server MCP akan aktif di setiap proyek yang Anda buka.
• .cursor/mcp.json di root repositori — khusus untuk proyek tersebut, dan aman untuk di-commit jika Anda tidak memasukkan key langsung ke dalamnya.

Kata "jika" di atas diselesaikan dengan interpolasi ${env:BB_API_KEY} pada contoh kode sebelumnya. Cursor akan mengganti variabel environment ke dalam nilai mcp.json saat dimuat, sehingga file konfigurasi itu sendiri tidak menyimpan rahesai apa pun. Menurut dokumentasi resmi, sintaksis yang sama juga mendukung ${workspaceFolder} dan beberapa variabel lainnya.

Ketiga, restart atau muat ulang Cursor, lalu buka Pengaturan Cursor → MCP. Server seharusnya muncul dengan indikator hijau dan menampilkan daftar tujuh tool, mulai dari list_models hingga list_generations. Halaman server MCP kami menyediakan cuplikan kode yang sama beserta tabel kompatibilitas untuk setiap klien lain yang sudah kami verifikasi:

Jika server tidak muncul, silakan langsung lompat ke bagian kendala umum di bawah. Penyebabnya hampir selalu karena masalah variabel environment, bukan kesalahan konfigurasi.

Studi Kasus: Membuat gambar hero landing page dan foto produk tanpa keluar dari chat

Skenario yang kami gunakan untuk artikel ini: Anda adalah seorang developer frontend yang sedang menyusun landing page untuk merek perlengkapan outdoor, dan desainnya membutuhkan gambar hero lebar bertema camping di waktu fajar. Anda cukup memintanya di kolom chat Cursor, lalu agen akan menyusun prompt bergaya fotografi dan memanggil tool tersebut. Berikut adalah trace asli dari sesi saya, lengkap dengan job id rilnya:

→ generate_image {"prompt": "A photorealistic wide hero shot for an outdoor
   gear brand landing page: a lone orange tent glowing softly on the shore of
   a still alpine lake at dawn, mist over the water, sharp granite peaks
   catching the first pink light, generous empty sky for headline text, low
   angle, 35mm lens, no text", "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmrgox3xj000s…", "status": "processing",
   "cost_charged_usd": 0.11, "balance_remaining_usd": 1554.40}
→ get_result {"job_id": "cmrgox3xj000s…"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

Hanya delapan belas detik dari pemanggilan tool hingga file selesai dibuat. Berikut adalah hasil aslinya pada percobaan pertama, tanpa perlu di-generate ulang:

Agen kemudian akan menarik file dari URL bertanda tangan (signed URL) tersebut ke dalam folder public/ dan langsung menulis kodenya. Tautan gambar ini tetap valid selama 24 jam; setelah itu, pemanggilan ulang get_result akan memperbarui tautan tersebut.

Untuk placeholder produk, langkahnya sama saja namun dengan format rasio gambar kotak. Di bagian grid kartu produk, saya meminta gambar botol air minum seperti memberikan arahan kepada fotografer profesional: subjek, permukaan, pencahayaan, dan lensa. Cukup satu panggilan tool, biaya $0.11, selesai dalam dua puluh detik:

Kedua demo di atas dijalankan menggunakan model Nano Banana Pro karena ditampilkan di halaman ini. Untuk gambar pengisi sementara, saya biasanya menyarankan untuk menggunakan nano-banana-2-lite dengan biaya hanya $0.03, lalu upgrade ke model yang lebih bagus hanya untuk gambar-gambar yang lolos tinjauan desain. Panduan model Lite kami mengulas skenario apa saja yang cocok menggunakan model murah ini. Dan jika Anda membutuhkan maskot yang sama di beberapa gambar sekaligus, teknik penulisan prompt jauh lebih menentukan ketimbang klien yang Anda gunakan, jadi silakan pelajari panduan konsistensi karakter kami.

Pembuatan video juga bisa dilakukan langsung dari chat yang sama. Tool generate_video tidak akan pernah langsung memotong saldo pada panggilan pertama: ia hanya akan mengembalikan penawaran harga (quote), dan agen harus memanggil ulang dengan menyertakan parameter confirm_cost untuk menyetujui nominal tersebut. Klip bisu beresolusi 720p Veo 3.1 Lite dimulai dari $0.10; Omni Flash dengan suara dikenakan $0.10 per detik, jadi $0.30 untuk rekaman tiga detik.

Kendala unik Cursor yang perlu Anda ketahui sebelum mulai

Setiap klien editor memiliki kendala uniknya masing-masing. Berikut adalah beberapa poin penting yang biasanya saya bagikan kepada rekan tim, dirangkum saat menguji setup di atas.

1. ${env:…} hanya berfungsi jika Cursor bisa membaca variabel tersebut. Perintah export di file .zshrc Anda hanya akan terbaca jika Anda membuka Cursor dari terminal. Aplikasi GUI yang dibuka langsung dari Dock atau launcher desktop tidak membaca profil shell Anda, sehingga konfigurasi tersebut akan gagal secara diam-diam. Berdasarkan pengalaman saya, ini adalah penyebab nomor satu mengapa server gagal terhubung di macOS. Solusinya: atur variabel environment di tingkat sistem operasi (launchctl setenv di macOS, atau Environment Variables sistem di Windows), atau jalankan Cursor sekali dari terminal untuk memastikan konfigurasi Anda sudah benar.

2. Konfigurasi proyek adalah fitur tim, gunakan satu key per orang. Commit file .cursor/mcp.json dengan placeholder ${env:BB_API_KEY}, maka setiap rekan tim Anda akan langsung mendapatkan akses ke server MCP setelah melakukan git clone, masing-masing dengan key mereka sendiri. Pemisahan ini sangat penting: pendaftaran key gratis, dan setiap key memiliki log penggunaan sendiri (tool, model, biaya, pratinjau prompt) serta batas harian opsional dalam mata uang USD yang dapat diatur di Profil → MCP API Keys. Jika ada anggota tim yang keluar, Anda cukup mencabut key miliknya, dan anggota tim lainnya tidak akan terganggu. Paket bisnis Cursor juga memungkinkan distribusi server MCP melalui dashboard tim, namun file konfigurasi yang di-commit ini dapat bekerja di paket mana saja.

3. Cursor meminta konfirmasi sebelum setiap pemanggilan tool, dan sebaiknya Anda biarkan fitur ini tetap aktif. Secara default, setiap panggilan MCP akan menunggu persetujuan Anda, dengan parameter argumen yang dapat dilihat di bawah ikon panah kecil di sebelah nama tool. Dalam mode auto-run, tool yang masuk dalam daftar aman (allowlist) akan langsung dieksekusi. Klik konfirmasi sampai dua puluh kali saat memproses banyak gambar memang terasa membosankan, namun untuk tool yang menggunakan uang riil per pemanggilan, saya menyarankan untuk tetap mengaktifkan konfirmasi manual ini. Biarkan hanya tool gratisan seperti list_models and get_result yang berjalan otomatis. Khusus pembuatan video, kami juga menyediakan sistem pengaman ganda di sisi server: kami tidak akan menagih biaya apa pun di atas harga penawaran tanpa adanya parameter confirm_cost.

4. Anda bisa melihat hasil render langsung di dalam chat. Sesuai dokumentasi Cursor, gambar yang dikembalikan oleh tool MCP akan langsung dilampirkan ke dalam obrolan chat, dan model berkemampuan visi (vision model) dapat langsung menganalisisnya. Pemanggilan get_result kami menyertakan pratinjau format webp kecil beserta URL gambarnya, sehingga agen (dan Anda) dapat langsung menilai hasil render tanpa perlu membuka browser. Ini juga berarti agen Cursor dapat mengoreksi dirinya sendiri: Anda bisa memintanya memeriksa gambar dan memproses ulang jika, misalnya, posisi tenda menghalangi teks judul utama.

5. Tautan instalasi sekali klik memang tersedia, tapi jangan simpan key Anda di dalamnya. Cursor mendukung deeplink cursor:// untuk menginstal server MCP dari konfigurasi berkode base64, sesuai dengan dokumentasi install-links. Fitur ini sangat praktis untuk server publik, namun tidak aman untuk server yang membutuhkan autentikasi. Pasalnya, konfigurasi yang dienkode tersebut akan membawa key asli Anda secara terang-terangan, dan siapa pun yang mendapatkan tautan tersebut bisa menggunakan saldo Anda. Itulah mengapa tombol di situs kami berupa cuplikan kode copy-paste dengan placeholder environment, bukan tautan instan Add-to-Cursor. Cukup salin, ekspor variabelnya, dan selesai.

Ada satu batasan produk yang perlu kami sampaikan secara jujur: tool MCP generate_image belum mendukung gambar input untuk saat ini, sehingga pembuatan gambar berbasis referensi (image-to-image) serta pembuatan video dari gambar (image-to-video) masih harus dilakukan melalui generator web kami. Namun, fitur teks-ke-gambar (text-to-image), penyempurnaan gambar bertahap (edit_image), serta teks-ke-video (text-to-video) semuanya sudah berfungsi penuh lewat MCP saat ini.

Berapa biaya pembuatan media demo di artikel ini?

Harga standar per generasi gambar, sama dengan angka yang dilaporkan oleh list_models ke agen, tanpa diskon khusus internal:

Semua proses pembuatan gambar kali ini langsung berhasil dalam sekali coba. Hal ini tentu tidak selalu terjadi, jadi ada baiknya Anda menyiapkan sedikit anggaran cadangan untuk satu atau dua kali pembuatan ulang (reroll) terutama pada foto produk, serta lakukan zoom-in sebelum menggunakannya karena geometri objek masih menjadi kelemahan model fotorealistik saat ini.

Jika Anda sudah menjalankan server ini di Claude, konfigurasi Cursor di atas adalah satu-satunya bagian baru yang Anda perlukan. Key, saldo, dan riwayat penggunaan Anda tetap sama. Jika Anda baru memulai dari nol, panduan Claude Code kami membahas empat studi kasus tambahan yang langkah-langkahnya hampir sama persis untuk diterapkan di Cursor. Siap mencoba? Buat key baru dan minta Cursor membuatkan gambar hero pertama Anda.

FAQ

Apakah Cursor mendukung server MCP remote dengan header Authorization?

Ya, secara native. Sejak Cursor menambahkan dukungan transport Streamable HTTP, server remote kini cukup dikonfigurasi menggunakan parameter url serta objek opsional headers di dalam mcp.json. Tidak perlu lagi proses jembatan (bridge) lokal, dan interpolasi ${env:VAR} menjaga agar key rahasia Anda tetap aman di luar file. Konfigurasi itulah yang kami gunakan dalam panduan ini, yang telah diverifikasi sesuai dokumentasi resmi Cursor MCP per 11 Juli 2026. Cursor also supports OAuth for remote servers; our endpoint currently authenticates with Bearer keys, with OAuth 2.1 planned as a second option.

Apakah saya memerlukan Google API key untuk membuat gambar di Cursor?

Tidak. Server MCP gambar yang dijalankan secara lokal memanggil Gemini API secara langsung, sehingga memerlukan Google key Anda sendiri lengkap dengan kuota dan tagihan Anda sendiri. Dengan menggunakan server remote, pembuatan gambar diproses menggunakan pool terkelola key Vertex AI milik BananaBanana, dan satu-satunya kredensial yang Anda butuhkan adalah key bb_live_ dari profil Anda. Ini adalah alternatif praktis jika Anda tidak ingin repot mengelola akses langsung ke API mentah milik Google, dengan sistem pembayaran per generasi gambar tanpa pengeluaran minimum, satu saldo prabayar yang praktis, serta key yang bisa dinonaktifkan dalam sekali klik.

Apakah konfigurasi MCP sebaiknya dibuat global atau per proyek?

Keduanya bisa digunakan; perbedaannya terletak pada cakupan dan kemudahan berbagi. File ~/.cursor/mcp.json akan selalu aktif di setiap repositori yang Anda buka, sangat cocok untuk penggunaan pribadi. Sedangkan .cursor/mcp.json di root proyek akan ikut tersimpan di dalam repositori, sehingga seluruh anggota tim langsung mendapatkan akses server MCP setelah melakukan git clone. Pastikan untuk selalu mereferensikan key menggunakan ${env:…} agar file tersebut aman untuk di-commit. Rekomendasi saya adalah menggunakan konfigurasi tingkat proyek untuk setiap pekerjaan tim, karena konfigurasi yang di-commit dipadukan dengan key masing-masing developer memudahkan pemantauan log penggunaan serta pencabutan akses per individu jika diperlukan.

Apakah Cursor bisa membuat video melalui server yang sama?

Ya, dengan langkah konfirmasi biaya tambahan. Tool generate_video akan selalu memberikan penawaran harga (quote) terlebih dahulu, dan agen harus memanggil ulang tool tersebut dengan parameter confirm_cost yang sesuai dengan nilai penawaran sebelum saldo Anda dipotong. Biaya pembuatan video berkisar dari $0.10 untuk klip bisu berdurasi 4 detik beresolusi 720p menggunakan Veo 3.1 Lite, hingga $4.40 untuk render kualitas tinggi Veo 3.1 lengkap dengan audio, sementara model Omni Flash dengan suara dikenakan biaya $0.10 per detik ($0.30–$1.00 per klip). Proses pembuatan video memakan waktu satu hingga sepuluh menit, jadi agen akan melakukan polling ke get_result secara berkala selagi terus menulis kode Anda.

Mengapa server saya tidak muncul di Cursor setelah mengedit mcp.json?

Terdapat tiga penyebab umum, diurutkan berdasarkan potensi masalah yang paling sering terjadi. Pertama, variabel environment tidak terbaca oleh proses Cursor. Aplikasi yang dibuka langsung dari GUI tidak membaca profil shell Anda, jadi pastikan Anda mengatur variabel tersebut di tingkat sistem operasi atau coba jalankan Cursor melalui terminal. Kedua, konfigurasi belum dimuat ulang. Coba restart Cursor sepenuhnya atau gunakan tombol refresh pada pengaturan MCP. Ketiga, ada format JSON yang tidak valid, biasanya disebabkan oleh koma gantung (trailing comma). Jika server muncul namun pemanggilan tool gagal dengan eror 401, artinya key Anda salah atau telah dicabut. Anda bisa mengujinya menggunakan request langsung lewat contoh kode yang ada di halaman server MCP.