Server MCP Cline: Generate Gambar Langsung dari Editor Anda

Remote MCP server di Cline adalah kumpulan alat terkelola yang dipanggil oleh agen melalui HTTP: Anda cukup menambahkan satu blok ke JSON pengaturan MCP, dan Cline dapat melakukan hal-hal yang tidak bisa dilakukan sendiri oleh model bahasa mana pun. Menghasilkan file gambar adalah contoh yang paling nyata. Cline akan merefaktor komponen Anda, menjalankan pengujian, dan menulis migrasi database, lalu berhenti total saat tiba di bagian «dan di sinilah foto produk dimasukkan».

Berikut pengaturan lengkapnya bagi yang ingin langsung mulai. Buat kunci API di profil BananaBanana Anda, buka pengaturan MCP Cline, lalu tambahkan:

{
  "mcpServers": {
    "bananabanana": {
      "type": "streamableHttp",
      "url": "https://bananabanana.pro/api/mcp",
      "headers": {
        "Authorization": "Bearer bb_live_YOUR_KEY"
      },
      "disabled": false,
      "autoApprove": ["list_models", "get_account", "get_result"]
    }
  }
}

Sepuluh alat akan muncul. Biaya gambar mulai dari $0.03 per gambar dari saldo prabayar Anda, dan video mulai dari $0.10. Baris type bersifat wajib, dan alasannya adalah mode kegagalan yang cukup membingungkan yang akan saya jelaskan nanti.

Mengapa menambahkan generator gambar ke Cline?

Alur kerja Cline pada dasarnya adalah «jelaskan hasil yang diinginkan, biarkan agen yang mengerjakannya». Ini bekerja sempurna sampai hasilnya memerlukan sebuah gambar. Di titik itulah alur kerja terputus dan Anda harus melakukan pekerjaan manual: buka tab browser, ketik prompt, unduh, ganti nama, pindahkan ke public/, kembali ke editor, dan mencari kembali konteks pekerjaan Anda. Lima menit per aset, dan gangguan fokus tersebut merugikan lebih dari sekadar lima menit itu.

Dengan alat MCP, agen menangani seluruh siklus tersebut. Agen menulis prompt, memanggil generate_image, mengunduh file yang sudah jadi ke folder yang Anda tentukan, dan memperbarui markup kode. Yang perlu Anda tinjau hanyalah sebuah diff.

Model ekonominya juga sangat cocok untuk pengguna Cline. Cline menggunakan konsep bawa-model-sendiri (bring-your-own-model), sehingga para penggunanya sudah terbiasa membayar berdasarkan pemakaian daripada langganan bulanan. Harga pembuatan gambar bekerja dengan cara yang sama. Tanpa paket langganan, tanpa biaya per pengguna, tanpa batas minimum bulanan. Gambar mulai dari $0.03, video mulai dari $0.10, dari saldo yang bisa Anda isi ulang kapan saja.

Alternatif lainnya adalah menjalankan MCP server lokal, yang berarti proses Node atau Python harus berjalan di komputer Anda ditambah kunci API penyedia Anda sendiri, lengkap dengan kuota dan tagihan terpisah. Endpoint terkelola menghilangkan kedua kerumitan tersebut. Pembuatan gambar terjadi di sisi kami melalui pipeline yang sama dengan web generator, dan satu-satunya kredensial Anda adalah sebuah kunci yang dapat dicabut kapan saja.

Bagaimana cara menambahkan remote MCP server di Cline?

Ada tiga cara dengan hasil yang sama. Rincian di bawah ini diverifikasi berdasarkan dokumentasi resmi Cline MCP per 20 Agustus 2026.

Melalui antarmuka visual. Klik ikon MCP Servers di toolbar panel Cline, buka tab Remote Servers, isi nama server, masukkan URL https://bananabanana.pro/api/mcp, dan pilih Streamable HTTP sebagai transport. Klik Add Server. Kemudian kembali dan tambahkan header Authorization: form adalah cara tercepat untuk mendaftar, tetapi kredensial disimpan di dalam JSON.

Dengan mengedit JSON. Klik ikon yang sama, tab Configure, lalu klik tombol Configure MCP Servers untuk membuka file pengaturan ekstensi. File tersebut berada di penyimpanan global VS Code, di bawah folder bernama saoudrizwan.claude-dev (ID ekstensi masih menggunakan nama pembuat aslinya, yang sering membingungkan pengguna saat mencari folder bernama «cline»). Di CLI jalurnya adalah ~/.cline/mcp.json, dan perintah cline mcp membuka wizard interaktif.

Dari terminal. Perintah cline config mcp --json mencetak konfigurasi yang saat ini dimuat, yang merupakan cara tercepat untuk memastikan perubahan Anda telah diterapkan.

Metode apa pun yang Anda pilih, endpoint-nya adalah https://bananabanana.pro/api/mcp. Jangan gunakan /mcp, yang merupakan halaman dokumentasi web untuk manusia dan mengembalikan HTML jika menerima permintaan POST. Halaman server MCP kami menyediakan template konfigurasi umum dan tabel kompatibilitas:

Lakukan pengujian gratis sebelum membelanjakan saldo. Fungsi get_account mengembalikan saldo, nama kunci, dan batas harian; list_models menampilkan daftar semua model beserta tarif saat ini. Keduanya gratis dan memvalidasi autentikasi dalam waktu sekitar satu detik.

Contoh penggunaan: batch placeholder katalog dalam mode Act

Di sinilah Cline benar-benar menunjukkan kehebatannya, dan ini adalah tugas yang sangat berbeda dari sekadar «buatkan satu gambar banner». Pertama, gunakan mode Plan: jelaskan katalog yang terdiri dari dua belas produk yang masing-masing membutuhkan gambar placeholder dengan gaya visual yang seragam, lalu biarkan Cline merancang alur kerjanya sebelum mengubah file apa pun. Kemudian mode Act yang akan menjalankannya.

Gaya visual yang seragam diatur melalui satu klausa tetap yang digunakan kembali pada setiap pemanggilan, hanya dengan mengubah subjek produk. Konsistensi dalam satu set berasal dari bagian prompt yang tidak berubah, bukan karena model mengingat apa yang dilakukannya semenit yang lalu:

→ generate_image {"prompt": "A photorealistic overhead product shot of a
   small monstera in a matte terracotta pot on a pale linen backdrop, soft
   diffused window light from the left, 50mm lens, subtle natural shadow,
   generous empty space around the subject, no text",
   "model": "nano-banana-pro", "aspect_ratio": "4:5"}
← {"job_id": "…", "status": "processing", "cost_charged_usd": 0.11,
   "balance_remaining_usd": 1110.65}

Produk kedua dengan klausa gaya yang sama, tetapi tanaman dan sudut pengambilan yang berbeda:

Dua belas gambar seperti itu pada Nano Banana Pro bernilai $1.32. Pada model standar nano-banana-2-lite, biayanya adalah $0.36, dan untuk placeholder sementara yang nantinya akan diganti oleh desainer, opsi inilah yang saya sarankan; panduan Lite kami menjelaskan batasan dari model hemat tersebut. Dalam artikel ini saya menggunakan Pro karena kedua contoh ini ditampilkan dalam resolusi penuh.

Pembuatan gambar dalam jumlah banyak (batch) adalah situasi di mana Anda sangat membutuhkan mekanisme pengaman. Ada dua pengaman yang tersedia. Setiap kunci MCP dapat diberi batas pengeluaran harian dalam USD di Profil → Kunci API MCP, sehingga loop yang salah akan berhenti pada batas yang Anda tentukan dan tidak menguras saldo Anda. Selain itu, permintaan multi-gambar (number_of_images lebih dari 1) berfungsi seperti video: panggilan pertama memberikan rincian biaya tanpa memotong saldo sampai agen mengulanginya dengan confirm_cost.

Pembuatan video dapat dijalankan dari chat yang sama dengan aturan konfirmasi yang serupa. Klip 720p tanpa suara berdurasi 4 detik pada Veo 3.1 Lite mulai dari $0.10, dan Omni Flash dikenakan biaya $0.10 per detik selalu dengan audio, sehingga klip 3 detik berbiaya $0.30. Proses rendering membutuhkan waktu 1 hingga 10 menit; karena generate_video langsung mengembalikan ID pekerjaan, Cline dapat terus mengerjakan kode Anda dan memeriksa status melalui get_result di latar belakang.

Hal penting seputar Cline yang perlu diketahui

Lima detail praktis yang diurutkan berdasarkan seberapa banyak waktu yang dapat dihemat.

1. "type": "streamableHttp" harus ditulis persis seperti itu, dan mengabaikannya akan menyebabkan kegagalan tanpa pesan yang jelas. Dokumentasi menyatakan secara tegas: jika kolom ini dilewati, klien secara otomatis menggunakan transport lawas sse untuk kompatibilitas ke belakang. SSE lawas mengharuskan klien membuka koneksi GET untuk mendengarkan aliran peristiwa. Endpoint kami menggunakan Streamable HTTP tanpa status (stateless), sehingga permintaan GET akan menerima 405 Method Not Allowed (saya memeriksanya kembali saat menulis ini: curl -i https://bananabanana.pro/api/mcp mengembalikan 405). Di Cline, ini terlihat sebagai server yang gagal terhubung dengan pesan kesalahan yang sama sekali tidak menyebutkan kolom konfigurasi yang hilang. Penulisan dengan tanda hubung streamable-http juga akan gagal.

2. Kunci API disimpan dalam format teks biasa di file konfigurasi. Dokumentasi Cline menyarankan penyimpanan rahasia dalam variabel lingkungan, namun interpolasi variabel di dalam objek headers remote server bukanlah fitur yang terdokumentasi (berbeda dengan sintaks ${env:…} di Cursor atau ${file:…} di Windsurf). Keuntungannya adalah lokasi: file ekstensi disimpan di penyimpanan global VS Code dan bukan di repositori proyek Anda, sehingga tidak ada risiko terunggah ke git secara tidak sengaja. Namun, tetap perlakukan ini sebagai kredensial penting: pasang batas harian dan segera cabut kunci dari profil jika perangkat berpindah tangan.

3. Pengaturan Auto Approve lebih luas dari perkiraan. Pada panel Auto Approve Cline, opsi «Use MCP servers» adalah sakelar tunggal untuk seluruh kategori alat MCP: menyalakannya akan menyetujui alat berbayar bersamaan dengan alat gratis. Kontrol per alat diatur di file konfigurasi dalam array autoApprove. Rekomendasi saya adalah mendaftarkan tiga panggilan gratis (list_models, get_account, get_result) agar alur kerja tidak terganggu, sementara setiap pembuatan gambar berbayar tetap memerlukan persetujuan manual Anda.

4. Mode YOLO yang dipadukan dengan alat berbayar memerlukan kehati-hatian. Mode YOLO di Cline secara otomatis menyetujui semua tindakan: perubahan file, perintah terminal, browser, dan alat MCP. Dokumentasi menandainya sebagai mode berbahaya dengan alasan yang kuat. Konfirmasi biaya kami tidak akan melindungi Anda dalam mode ini, karena agen otonom akan menyetujui kedua tahap permintaan biaya secara otomatis. Satu-satunya pelindung efektif adalah batas harian per kunci. Pasang batas tersebut sebelum mengaktifkan mode YOLO.

5. Tidak ada instalasi melalui marketplace dan organisasi memiliki jalurnya sendiri. Ekstensi VS Code berbasis SDK resmi tidak lagi menyediakan antarmuka pencarian MCP Marketplace, sehingga konfigurasi JSON manual adalah jalur utama bagi semua orang. Administrator memiliki opsi lain: remoteMCPServers dalam konfigurasi organisasi dapat mendistribusikan server secara terpusat, dan blockPersonalRemoteMCPServers mencegah penambahan server pribadi. Jika Anda mengaturnya untuk tim, distribusikan secara terpusat dan berikan kunci pribadi kepada setiap pengembang.

Keterbatasan dari sisi kami yang perlu disampaikan: fungsi generate_speech mengembalikan tautan unduhan WAV yang ditandatangani dan bukan pemutar audio di dalam panel Cline, sehingga Anda perlu membuka file tersebut untuk mendengarkannya. Sementara itu, gambar dikembalikan dengan pratinjau mini di samping URL. Cline telah mendukung pratinjau gambar dalam hasil alat sejak 2025, sehingga rendering berjalan lancar di versi terbaru.

Apakah Cline mendukung autentikasi OAuth untuk MCP server?

Secara terdokumentasi belum, dan ini penting untuk diperjelas karena dukungannya bervariasi di tiap klien. Dokumentasi MCP Cline mencakup stdio, SSE, dan Streamable HTTP dengan autentikasi melalui header kustom. OAuth belum tercantum di dalamnya. Permintaan fitur untuk dukungan OAuth telah dibuka di repositori Cline sejak Agustus 2025 dan masih berstatus terbuka per 20 Agustus 2026.

Secara praktis, ini bukan kendala. Server kami menerima token OAuth 2.1 maupun kunci API Bearer standar, dan format kunci inilah yang dirancang untuk Cline. Ini juga merupakan jalur yang saya sarankan: pembuatan kunci gratis, Anda dapat membuat beberapa kunci sekaligus, dan setiap kunci memiliki log penggunaan tersendiri (alat, model, biaya, cuplikan prompt) beserta batas harian. Saat kontrak pekerja lepas berakhir, Anda cukup mencabut satu kunci tanpa mengganggu anggota tim lainnya.

Untuk memisahkan anggaran per proyek, buat kunci terpisah untuk tiap proyek. Log penggunaan akan memudahkan Anda melihat berapa biaya yang dihabiskan untuk dashboard internal versus situs pemasaran saat waktu penagihan tiba.

Berapa biaya media demo dalam artikel ini?

Harga standar per pembuatan gambar, persis seperti angka yang diberikan oleh list_models:

Informasi berguna saat mengisi saldo: deposit $50 atau lebih mendapatkan bonus saldo +5%, deposit $100 atau lebih mendapatkan +10%, dan kode promo aktif menambahkan lagi +10% dari nilai deposit. Kedua bonus dihitung dari nominal dasar, sehingga deposit $100 dengan kode promo akan menghasilkan saldo $120.

Kunci yang sama dapat digunakan di klien lain: jika Anda juga menggunakan Cursor atau VS Code, Anda tidak perlu membuat akun baru — saldo yang sama, riwayat terpadu, satu endpoint. Panduan Cursor dan panduan VS Code menjelaskan penggunaannya. Buat kunci API dan minta Cline menghasilkan batch gambar pertama Anda.

FAQ

Apakah Cline mendukung remote MCP server melalui Streamable HTTP?

Ya, dan ini adalah transport yang direkomendasikan dalam dokumentasi resmi Cline. Server jarak jauh memerlukan url, type dengan nilai streamableHttp, serta objek opsional headers untuk autentikasi. Transport SSE lawas tetap dipertahankan demi kompatibilitas lama. Selalu tulis type secara eksplisit: jika dilewati, sistem akan kembali ke SSE yang tidak kompatibel dengan endpoint stateless modern. Terverifikasi berdasarkan dokumentasi resmi pada 20 Agustus 2026.

Di mana letak file pengaturan MCP Cline?

Terdapat di dua lokasi tergantung cara Anda menjalankannya. Ekstensi VS Code menyimpannya di penyimpanan global VS Code, di dalam folder ID ekstensi saoudrizwan.claude-dev; cara termudah membukanya adalah dengan menekan tombol Configure MCP Servers pada tab Configure di panel MCP. Versi CLI menggunakan ~/.cline/mcp.json. Keduanya menggunakan format objek mcpServers yang sama.

Apakah saya membutuhkan akun cloud pribadi untuk membuat gambar di Cline?

Tidak. MCP server lokal memerlukan kunci penyedia pihak ketiga dengan kuota dan tagihan terpisah di akun Anda. Remote server menjalankan seluruh proses pembuatan gambar di infrastruktur terkelola kami, sehingga satu-satunya kredensial yang Anda perlukan adalah kunci bb_live_ dari profil Anda. Akun baru mendapatkan saldo awal $0.20 yang cukup untuk membuat enam gambar pada model hemat sebelum melakukan pembayaran apa pun.

Bagaimana cara mencegah agen menghabiskan saldo terlalu banyak?

Gunakan ketiga lapisan perlindungan yang tersedia. Batasi autoApprove hanya pada alat gratis agar setiap proses berbayar memerlukan persetujuan manual Anda. Tetapkan batas pengeluaran harian dalam USD pada kunci API di Profil → Kunci API MCP, yang tetap berfungsi meskipun mode YOLO diaktifkan. Manfaatkan konfirmasi biaya: permintaan video dan multi-gambar akan memberikan estimasi biaya terlebih dahulu dan tidak akan memotong saldo sampai agen mengulangi panggilan dengan parameter confirm_cost.

Mengapa MCP server Cline saya tidak dapat terhubung?

Periksa hal-hal berikut secara berurutan. Pastikan "type": "streamableHttp" ada dan ditulis dalam format camelCase; tanpa ini Cline akan mencoba koneksi SSE lawas dan endpoint kami akan merespons 405 pada permintaan GET. Pastikan URL berakhiran /api/mcp dan bukan /mcp. Pastikan header Authorization tertulis persis Bearer bb_live_... tanpa spasi berlebih (kunci yang salah atau dicabut akan menghasilkan 401). Jika terhubung tetapi alat tidak muncul, muat ulang server dari panel MCP. Pada jaringan kantor, pastikan remote server pribadi tidak diblokir oleh kebijakan keamanan organisasi Anda.