Kembali ke blog
BananaBanana Teamtutorialmcpclaude

Hasilkan Gambar di Claude Code: Setup MCP 2 Menit

Hasilkan gambar di Claude Code atau Claude Desktop via server MCP remote: tanpa instalasi lokal, tanpa API key Google, gambar mulai $0.03. Biaya & setup nyata.

Hasilkan Gambar di Claude Code: Setup MCP 2 Menit

Server MCP penghasil gambar adalah kepingan puzzle yang hilang yang memungkinkan Claude membuat gambar: Claude menulis prompt dan memanggil tool generate_image, lalu server me-render hasilnya pada model sungguhan (dalam kasus kami, keluarga Nano Banana dari Google), dan mengembalikan sebuah URL. Claude sendiri tidak bisa menggambar. Anthropic belum pernah merilis model gambar, jadi Claude Code dan Claude Desktop bisa membaca gambar dengan sangat baik tetapi tidak bisa memproduksinya.

Jawaban singkatnya, jika hanya itu yang Anda cari: buat API key di profil BananaBanana Anda, lalu jalankan satu perintah di terminal Anda:

claude mcp add --transport http bananabanana https://bananabanana.pro/api/mcp \
  --header "Authorization: Bearer bb_live_YOUR_KEY"

Itulah seluruh proses instalasinya. Tanpa server lokal, tanpa akun Google Cloud, tanpa langganan. Biaya gambar mulai dari $0.03 per buah dari saldo prabayar, sedangkan video mulai dari $0.10. Dan agar panduan ini tetap jujur: setiap ilustrasi dalam artikel ini dihasilkan oleh Claude Code melalui server yang sama persis ini saat sedang menulis teksnya. Total biaya media mencapai $1.29, sudah termasuk satu kali generate ulang (reroll), dengan rincian bukti pembayaran di bagian akhir.

Mengapa Claude tidak bisa menghasilkan gambar sendiri?

Anthropic fokus membangun model teks dan penalaran. Kemampuan vision-nya hanya satu arah: Claude bisa melihat screenshot dan foto Anda, tetapi tidak ada generator gambar di mana pun dalam keluarga modelnya, dan belum ada yang diumumkan. ChatGPT hadir dengan model gambar bawaan. Sedangkan Claude tidak.

Solusi dari komunitas sejauh ini adalah server MCP lokal — GitHub punya segudang server seperti ini, dan semuanya berfungsi. Namun, "instalasi" di sana berarti: menjalankan proses lokal Anda sendiri, menjaga Node atau Python tetap aktif, menghubungkan server ke file konfigurasi di setiap mesin, dan—ini kendala utamanya—menyediakan API key Google Anda sendiri. Tagihan akan masuk ke akun Google Anda dengan kuota dan dasbornya sendiri. Bagi developer yang sekadar mencoba-coba di satu laptop, itu tidak masalah. Namun bagi orang lain, ini seperti proyek infrastruktur kecil.

Server MCP remote membalikkan keadaan tersebut. Servernya sudah berjalan di sisi kami; pipeline di baliknya sama dengan yang melayani generator BananaBanana. Anda mengautentikasi dengan satu kunci, membayar per pembuatan gambar dari saldo prabayar, dan setup-nya identik baik di Claude Code pada laptop, di Claude Desktop pada mesin rekan kerja, maupun di claude.ai pada browser. Sama sekali tidak ada yang perlu dirawat.

Ilustrasi editorial tentang robot penulis yang menyerahkan catatan kepada robot pelukis di depan kanvas, sebuah metafora untuk Claude yang mendelegasikan pembuatan gambar ke server MCP

Bagaimana cara menghubungkan Claude Code ke server MCP penghasil gambar?

Dua menit, tiga langkah. Pertama, daftar dan buka Profil → MCP API Keys. Buat sebuah kunci: kunci ini hanya ditampilkan sekali, diawali dengan bb_live_, dan disimpan dalam bentuk hash di sisi kami, jadi segera salin. Akun baru dilengkapi dengan saldo awal senilai $0.20, cukup untuk enam gambar uji coba pada model termurah sebelum Anda memutuskan untuk melakukan top up.

Claude Code

Satu perintah, seperti di atas:

claude mcp add --transport http bananabanana https://bananabanana.pro/api/mcp \
  --header "Authorization: Bearer bb_live_YOUR_KEY"

Flag yang digunakan didokumentasikan di dokumentasi MCP Claude Code; HTTP adalah transport yang direkomendasikan untuk server remote. Jalankan /mcp di dalam sesi untuk memastikan koneksi aktif: Anda akan melihat tujuh tool, mulai dari list_models hingga get_result. Sejak saat itu, perintah "buat gambar hero 16:9 untuk postingan ini" adalah instruksi yang benar-benar bisa dijalankan oleh Claude Code.

Claude Desktop dan claude.ai

Di Claude Desktop dan claude.ai, jalurnya adalah Settings → Connectors → Add custom connector, lalu tempel https://bananabanana.pro/api/mcp sebagai URL server. Untuk kuncinya, buka bagian Request headers dan tambahkan header Authorization dengan nilai Bearer bb_live_YOUR_KEY. Masukkan nilai lengkapnya termasuk kata Bearer dan spasi; menurut dokumentasi konektor Anthropic, Claude mengirimkan header tersebut persis seperti yang diketik dan tidak menambahkan awalan apa pun.

Satu catatan jujur: autentikasi request-header pada konektor saat ini masih dalam versi beta dan Anthropic meluncurkannya secara bertahap, sehingga akun Anda mungkin belum menampilkan bagian tersebut. Solusi alternatifnya berfungsi di semua tempat Claude Desktop berjalan: tambahkan server melalui bridge mcp-remote di claude_desktop_config.json (Settings → Developer → Edit Config), yang membutuhkan Node.js terinstal:

{
  "mcpServers": {
    "bananabanana": {
      "command": "npx",
      "args": [
        "-y", "mcp-remote", "https://bananabanana.pro/api/mcp",
        "--header", "Authorization: Bearer bb_live_YOUR_KEY"
      ]
    }
  }
}

Kedua varian tersebut, ditambah contoh JSON-RPC mentah untuk platform lainnya, tersedia di halaman server MCP:

Bagian quick start pada halaman dokumentasi MCP BananaBanana yang menampilkan cuplikan setup Claude Code dan Claude Desktop

Apakah ini berfungsi di luar Claude?

Ya. MCP adalah protokol terbuka, jadi klien mana pun yang mendukung Streamable HTTP dan dapat menyertakan header Authorization bisa terhubung ke endpoint yang sama: Gemini CLI, ZCode dari Z.ai untuk GLM-5.2, editor agent seperti Cursor atau VS Code, dan — melalui dukungan remote MCP dari Codex — aplikasi desktop ChatGPT, Codex CLI, serta ekstensi IDE juga bisa, melalui satu entri config.toml bersama (url ditambah bearer_token_env_var, sesuai dengan dokumentasi MCP Codex). API xAI menghubungkan server MCP per permintaan dengan server_url. Pengecualiannya adalah dialog web yang dibuat menggunakan OAuth alih-alih kunci yang ditempel — konektor web ChatGPT, dan kemungkinan konektor kustom berbasis URL milik grok.com. Kami selalu memperbarui tabel per-klien resmi beserta cuplikan setup di halaman server MCP; sedangkan artikel ini tetap fokus pada Claude.

Kasus Penggunaan 1: Gambar hero untuk postingan yang sedang Anda tulis

Kasus yang biasa ditemui sehari-hari. Anda sedang menyusun postingan blog di Claude Code dan butuh gambar header. Anda cukup berkata: "buatkan gambar hero editorial 16:9 tentang database caching, dengan metafora perpustakaan." Claude akan menyusun prompt dan melakukan pemanggilan tool:

→ generate_image {"prompt": "Editorial illustration for a developer blog post
   about database caching: a small librarian robot placing three glowing books
   onto a tiny fast bookshelf in the foreground, a huge dim archive hall
   stretching far behind it, soft pastel background, dark ink details, accents
   of violet and warm amber, clean minimal composition, generous negative
   space, no text", "model": "nano-banana-pro", "aspect_ratio": "16:9"}
← {"job_id": "cmxq…", "status": "processing", "cost_charged_usd": 0.11,
   "balance_remaining_usd": 4.89}
→ get_result {"job_id": "cmxq…"}
← {"status": "completed", "files": [{"url": "https://bananabanana.pro/api/files/…"}]}

Berikut adalah hasil keluaran dari prompt persis di atas, percobaan pertama, tanpa generate ulang:

Gambar hero buatan AI tentang robot pustakawan yang menaruh buku-buku bersinar di rak kecil di depan arsip yang luas, dibuat oleh Claude Code via MCP

Biaya: $0.11 pada Nano Banana Pro pada resolusi 1K. Agent mengunduh file dari URL yang ditandatangani (signed URL), memasukkannya ke dalam repositori, dan menulis teks alt. Tautan tetap valid selama 24 jam; setelah itu, get_result akan mengeluarkan tautan baru.

Kasus Penggunaan 2: Foto produk tanpa fotografer

Mockup pemasaran adalah tempat di mana gaya penulisan prompt ala fotografi benar-benar membuahkan hasil. Deskripsikan bidikan gambar sebagaimana seorang fotografer memberikan pengarahan: subjek, permukaan, sumber cahaya, dan lensa.

→ generate_image {"prompt": "A photorealistic product photo of a matte
   sage-green ceramic pour-over coffee set on a pale linen tablecloth, soft
   diffused daylight from a window on the left, gentle shadows, shallow depth
   of field, eye-level shot with a 50mm lens, minimal warm styling, no text",
   "model": "nano-banana-pro", "aspect_ratio": "1:1"}

Foto produk AI fotorealistik dari set kopi pour-over keramik berwarna hijau sage matte di atas taplak meja linen dalam cahaya jendela yang lembut, dihasilkan melalui server MCP

Pengakuan jujur: bidikan ini membutuhkan dua kali percobaan. Render pertama tampak pas sekilas, tetapi setelah diperiksa lebih dekat, cangkirnya menyatu dengan piring tatakan menjadi satu bagian berbentuk penutup — geometri objek adalah area di mana model fotorealistik terkadang masih melakukan kesalahan, dan pekerjaan produk adalah bagian di mana Anda harus melakukan zoom sebelum merilisnya. Satu kali generate ulang (reroll) dengan prompt yang sama berhasil memperbaikinya: total $0.22 untuk sepasang gambar alih-alih $0.11. Bagian yang paling saya sukai bukanlah bidikan itu sendiri, melainkan apa yang terjadi selanjutnya: tool edit_image mengambil job_id dari gambar yang sudah jadi ditambah instruksi seperti "buat latar belakang menjadi putih bersih dan tambahkan bayangan lembut." Penyempurnaan multi-percakapan (multi-turn) tanpa harus mendeskripsikan ulang pemandangan, di mana setiap langkah ditagih sebagai satu gambar. Untuk pekerjaan pembuatan katalog, perulangan semacam itu adalah pembeda antara alat profesional dengan mainan biasa.

Kasus Penggunaan 3: Karakter yang konsisten di berbagai gambar

Maskot merek, panel komik, atau papan cerita (storyboard) semuanya membutuhkan karakter yang sama agar tetap konsisten dari satu gambar ke gambar berikutnya. Melalui MCP, metode kerjanya adalah menggunakan lembar karakter (character sheet): blok deskripsi tetap yang ditempelkan agent ke setiap prompt. Milik kami adalah "robot kurir kecil dengan kepala bulat berwarna teal matte, satu mata besar kuning ramah, tubuh kotak putih krem dengan sekrup kuningan yang terlihat, dan tas kurir kanvas dengan gesper kuningan." Dua pemandangan, dua pemanggilan, masing-masing seharga $0.11:

Robot kurir buatan AI dengan kepala teal dan tas kurir kanvas sedang menyortir paket di depot yang bermandikan cahaya matahari, gambar pertama dari seri karakter yang konsisten

Karakter robot kurir AI yang sama sedang mengendarai sepeda kargo melewati jalan yang diguyur hujan saat senja, gambar kedua dari seri tersebut

Saya akan berterus terang mengenai hasilnya: ini bagus, tetapi tidak sempurna. Tas, mata kuning ramah, dan tubuh krem dengan sekrup kuningan semuanya berhasil dipertahankan. Namun kepalanya bergeser dari bentuk bola menjadi mirip helm, dan pemandangan senja kembali dengan gaya garis yang lebih grafis. Itulah batas kemampuan dari penentuan karakter yang hanya menggunakan teks (text-only anchoring). Gambar referensi dapat memperbaikinya dengan benar, dan generator web menerima hingga 5 referensi karakter pada Nano Banana Pro; sedangkan tool MCP generate_image belum mendukung input gambar saat ini. Panduan lapangan konsistensi karakter kami membahas kedua metode tersebut, termasuk fitur mana saja yang biasanya bergeser terlebih dahulu.

Kasus Penggunaan 4: Klip video dari obrolan yang sama

Video berjalan melalui server yang sama, dengan satu pengaman tambahan. Klip video berbiaya lebih mahal daripada gambar (hingga $4.40 untuk render kelas atas Veo 3.1), sehingga generate_video tidak pernah menagih biaya pada pemanggilan pertama. Tool ini akan mengembalikan penawaran harga, dan agent harus mengulangi pemanggilan dengan menyetujui jumlah persis tersebut:

→ generate_video {"prompt": "Aerial drone shot rising slowly over terraced tea
   fields at sunrise, thin mist drifting in the valleys, golden light catching
   the ridges, smooth cinematic camera motion, wide shot",
   "model": "veo-3.1-fast", "duration": 6, "resolution": "720p"}
← {"status": "confirmation_required", "quoted_cost_usd": 0.52, …}
→ generate_video {…same arguments…, "confirm_cost": 0.52}
← {"job_id": "cmxr…", "status": "processing", "cost_charged_usd": 0.52}

Hasilnya, enam detik hening resolusi 720p dari Veo 3.1 Fast, pengambilan pertama:

Pembuatan video membutuhkan waktu satu hingga sepuluh menit, sehingga agent akan melakukan polling pada get_result sembari melakukan pekerjaan lain. Jika Anda ingin suara, Omni Flash berjalan melalui tool yang sama dengan harga $0.10 per detik dengan audio selalu aktif, dan Anda bisa mengatur durasinya — dari 3 hingga 10 detik. Tool ini juga menerima gambar sebagai input: berikan job_id dari gambar yang sudah Anda hasilkan (atau tautan publik) sebagai frame pertama, tambahkan hingga sepuluh gambar referensi untuk menjaga karakter tetap konsisten, dan agent akan menganimasikannya. Frame terakhir dan looping masih memerlukan generator web.

Setiap gambar dalam postingan ini berasal dari alur kerja ini

Ini adalah bagian di mana saya pribadi ingin bukti jika saya adalah pembacanya, jadi inilah perulangan nyatanya. Claude Code menulis sebuah bagian dari artikel ini, menyusun prompt ilustrasi dalam gaya khas kami, memanggil tool pembuat gambar, menunggu sekitar dua puluh detik, memeriksa gambar yang dikembalikan, dan memasukkan markdown beserta teks alt sebelum melanjutkan penulisan. Delapan kali pemanggilan fungsi generasi untuk seluruh media yang Anda lihat di sini — enam gambar dan satu video berhasil pada percobaan pertama, dan set kopi membutuhkan satu kali generate ulang setelah pemeriksaan lebih dekat mendeteksi cangkir dan piring tatakan yang menyatu. Hanya satu kali pengulangan dari total delapan pemanggilan sungguh melampaui ekspektasi saya. Satu-satunya aset yang bukan hasil buatan AI adalah screenshot halaman dokumentasi, yang diambil menggunakan tool browser.

Gambar-gambarnya memang tidak sempurna (kepala robot kurir, seperti yang telah dicatat, seolah punya kehendaknya sendiri). Poin pentingnya adalah proses "ilustrasi" tidak lagi menjadi langkah produksi yang terpisah. Sesi obrolan yang sama yang menulis teks juga sekaligus merilis visualnya, dan seluruh biayanya kira-kira hanya seharga tiket bus.

Berapa biaya media artikel ini sebenarnya?

Semua yang ada di bawah ini ditagih dengan harga standar per generasi dari halaman harga kami, angka yang sama dengan yang dilaporkan oleh list_models ke agent. Tidak ada diskon staf.

AsetModelHarga
Gambar sampulNano Banana Pro, 1K$0.11
Ilustrasi penulis-dan-pelukisNano Banana Pro, 1K$0.11
Hero panduan caching (kasus penggunaan 1)Nano Banana Pro, 1K$0.11
Mockup set kopi, 2 kali pengambilan termasuk satu generate ulang (kasus penggunaan 2)Nano Banana Pro, 1K$0.22
Seri robot kurir, 2 gambar (kasus penggunaan 3)Nano Banana Pro, 1K$0.22
Klip kebun teh, 6 detik hening 720p (kasus penggunaan 4)Veo 3.1 Fast$0.52
Screenshot dokumentasibrowser, bukan hasil generate$0.00
Total$1.29

Kami menggunakan model gambar terbaik di setiap bagian karena gambar-gambar ini dirilis pada halaman publik. Menyusun draf menggunakan Nano Banana 2 Lite dengan tarif $0.03 akan memangkas pengeluaran bagian gambar dari $0.77 menjadi $0.21; panduan Lite kami membahas kapan model murah tersebut sudah cukup memadai.

Siap mencobanya? Hubungkan server MCP BananaBanana dan minta Claude membuat gambar pertama Anda.

FAQ

Apakah server MCP BananaBanana berfungsi dengan klien selain Claude?

Ya, dengan klien MCP mana pun yang mendukung Streamable HTTP dan memungkinkan Anda menyertakan header Authorization: Claude Code, Claude Desktop, Gemini CLI, ZCode dari Z.ai untuk GLM-5.2, editor agent seperti Cursor atau VS Code, dan — melalui dukungan remote MCP dari Codex — aplikasi desktop ChatGPT, Codex CLI, serta ekstensi IDE, yang berbagi satu entri config.toml dengan url dan bearer_token_env_var. API xAI menghubungkan server MCP per permintaan via server_url. Hal yang masih belum pasti: konektor web ChatGPT melakukan autentikasi lewat OAuth alih-alih kunci yang ditempel, dan dialog konektor kustom grok.com menerima URL tanpa kolom kunci yang terdokumentasi, sehingga keduanya mungkin memerlukan dukungan OAuth 2.1 yang direncanakan di sisi kami. Tabel per-klien yang diperbarui secara berkala beserta cuplikan setup dapat dilihat di halaman server MCP; apa pun yang Anda buat sendiri sudah dapat terhubung langsung melalui JSON-RPC.

Apakah saya memerlukan Google API key atau akun Google Cloud?

Tidak, dan itulah alasan utama mengapa server ini ada. Server MCP pembuat gambar lokal dari GitHub memanggil Gemini API secara langsung, sehingga mereka memerlukan kunci Google AI Studio Anda sendiri; Anda harus mengelola kuota dan tagihannya sendiri. Di sini, pembuatan gambar berjalan pada pool kunci Vertex AI yang dikelola oleh BananaBanana, dan satu-satunya kredensial Anda adalah kunci bb_live_ dari profil Anda. Anda tidak perlu menyentuh konsol Google sama sekali, dan Google tidak akan pernah menagih Anda. Kelebihan dan kekurangannya adil: Anda melepaskan penawaran harga API mentah Google serta akses parameter langsung, dan sebagai gantinya Anda mendapatkan harga per generasi tanpa pembelanjaan minimum, rotasi kunci otomatis, serta satu saldo yang digunakan bersama antara server MCP, generator web, dan aplikasi Telegram. Membatalkan kunci yang bocor hanya memerlukan satu klik tanpa mengganggu apa pun.

Bagaimana cara kerja penagihan pada server MCP?

Menggunakan saldo prabayar, harga per generasi, tanpa biaya langganan. Anda melakukan top up, dan setiap pembuatan gambar/video akan memotong saldo sesuai harga yang tertera: gambar $0.03 hingga $0.20 tergantung pada model dan resolusi, video $0.10 hingga $4.40 tergantung pada model, durasi, resolusi, dan audio. Agent mengetahui setiap harga terlebih dahulu: list_models menyajikan angka langsung secara real-time, dan setiap pemanggilan pembuatan video (ditambah pembuatan gambar massal) harus menerima penawaran harga terlebih dahulu dan mengonfirmasinya dengan confirm_cost sebelum saldo dipotong sepeser pun. Setiap hasil akan melaporkan cost_charged_usd dan balance_remaining_usd, sehingga pelacakan biaya sudah terintegrasi langsung dalam obrolan. Pembuatan yang gagal akan dikembalikan dananya secara otomatis (refund). Jika Anda khawatir tentang agent yang berjalan tanpa kendali (runaway), Anda dapat mengatur batas harian (cap) dalam USD per kunci di Profil → MCP API Keys serta mengaudit log penggunaan per kunci yang mencatat tool, model, biaya, dan cuplikan prompt.

Apa yang terjadi jika saldo saya habis di tengah-tengah pengerjaan tugas?

Pemanggilan paid tool berikutnya akan gagal secara otomatis dengan error INSUFFICIENT_BALANCE yang menyertakan tautan top-up, lalu agent akan meneruskannya kepada Anda. Saldo tidak akan menjadi minus; tidak ada cerukan (overdraft) atau tagihan kejutan. Tool gratis (list_models, get_account, get_result, list_generations) akan tetap berfungsi, sehingga semua yang telah dihasilkan tetap dapat diakses, dan proses pembuatan yang telah dimulai sebelum saldo habis akan diselesaikan secara normal karena pemotongan saldo hanya terjadi sekali di awal. Dalam praktiknya, Claude hanya melaporkan pemanggilan yang gagal beserta URL top-up dan melanjutkan sisa tugas lainnya. Sebagai cadangan agar tidak langsung terhenti, Anda dapat memantau balance_remaining_usd pada setiap hasil atau meminta agent memeriksa get_account sebelum menjalankan tugas massal (batch).

Apa saja yang diblokir oleh filter konten, dan apakah saya harus membayar untuk prompt yang terkena filter?

Model Google hulu menerapkan filter keamanannya sendiri; ketika pembuatan gambar ditolak, server akan mengembalikan satu kode SAFETY_FILTERED terpadu alih-alih setengah lusin varian internal milik Google. Kategori yang diblokir adalah apa yang Anda harapkan dari kebijakan Gemini dan Veo: konten seksual yang melibatkan anak di bawah umur, kekerasan eksplisit, deepfake orang nyata, dan sejenisnya. Filter tersebut terkadang juga menghasilkan kesalahan deteksi (false positive) pada prompt yang tidak bersalah, hal ini di luar kendali kami dan kami tidak akan menutup-nutupinya. Sistem penagihannya sederhana: pembuatan yang sepenuhnya terkena filter akan dikembalikan dananya (refund) secara otomatis, dan untuk video, di mana Google terkadang hanya memfilter sebagian output, pengembalian dananya akan dihitung secara proporsional. Anda hanya membayar untuk media yang benar-benar Anda terima. Jika suatu prompt terus memicu filter, ubah susunan kata detail spesifik yang memicunya daripada mencoba ulang teks yang sama persis.

Siapa pemilik gambar yang saya hasilkan melalui server MCP?

Anda pemiliknya. Berdasarkan ketentuan kami, gambar dan video yang dihasilkan adalah milik Anda untuk penggunaan pribadi maupun komersial, tunduk pada ketentuan penyedia model dasar; kami tidak mengklaim kepemilikan atas konten Anda, dan prompt yang Anda kirimkan tetap menjadi milik Anda. Dua detail penyimpanan sangat penting dalam praktiknya. URL yang dikembalikan oleh get_result adalah tautan bertanda tangan (signed link) yang valid selama 24 jam, jadi unduh apa yang penting bagi Anda atau panggil get_result lagi untuk mendapatkan tautan baru. Media yang dihasilkan akan disimpan selama 30 hari, kemudian dihapus secara permanen: server MCP adalah pipeline pembuatan, bukan sebuah arsip penyimpanan jangka panjang. Semua media yang dibuat melalui MCP juga akan masuk ke riwayat pembuatan akun web Anda, sehingga Anda dapat menjelajahi dan mengunduhnya kembali dari situs web selama jendela penyimpanan masih aktif.

tutorialmcpclaude