Tutorial: 8 MCP Server untuk Vibe Coding (Connect Claude Code ke Dunia Luar)

Connect Claude Code ke Dunia Luar, dari Browsing sampai Deploy

Default-nya, Claude Code kerja sendirian di ruang kosong. Tidak tahu info hari ini, tidak bisa buka browser, tidak bisa menyimpan progress project ke mana-mana. 8 MCP Server di bawah ini menutup semua gap itu. Semua tetap perlu proses connect satu kali di awal. Tidak ada MCP yang otomatis nempel sendiri tanpa proses connect sama sekali. Begitu terhubung, Claude yang otomatis memilih kapan memakai tool yang mana, kamu tinggal mengobrol seperti biasa.

⚠️ Sebelum Mulai — Baca Dulu

Yang kamu butuhkan:

• Claude Code terinstall di komputer (untuk cara connect lewat terminal)
• Atau akun Claude yang mendukung Connectors (untuk Supabase, GitHub, Vercel lewat browser, tanpa coding)

Soal biaya, baca ini dulu:

Sebagian besar dari 8 MCP ini gratis untuk di-connect, tanpa kartu kredit. Ada 2 pengecualian penting yang wajib kamu tahu dari awal: Brave Search (butuh kartu kredit saat daftar) dan Replicate (connect gratis, tapi generate gambar/video bayar per hasil). Detail lengkapnya ada di bagian masing-masing di bawah.

📖 Kenapa Perlu Connect Manual, Bukan Otomatis?

Banyak yang mengira begitu vibe coding, semua tool AI otomatis kepanggil tanpa setup apapun. Faktanya, setiap MCP Server tetap harus disambungkan dulu satu kali, baik lewat satu baris command di terminal, atau klik Connect di direktori resmi Claude. Yang otomatis itu bagian sesudahnya, yaitu Claude yang memutuskan sendiri kapan memanggil tool yang tersambung, kamu tidak perlu menyebut nama tool-nya setiap kali minta bantuan.

Ringkasan Cepat

01. Brave Search

Apa fungsinya?

Claude bisa mencari info dan berita hari ini secara real time, bukan cuma mengandalkan data lama saat training.

Soal biaya (baca sebelum daftar):

Sejak Februari 2026, Brave Search API menghapus free tier tanpa kartu kredit. Sekarang wajib daftar kartu kredit di awal, dapat kredit gratis sekitar $5 per bulan (kira-kira 1.000 pencarian), lewat itu kena tagih sekitar $0.003 sampai $0.005 per pencarian.

Cara Connect:

1. Daftar akun dan ambil API key di brave.com/search/api
2. Jalankan command ini di terminal:

claude mcp add brave-search --env BRAVE_API_KEY=isi-api-key-kamu -- npx -y @brave/brave-search-mcp-server

Contoh Langsung: "Cari berita AI terbaru minggu ini dan rangkum jadi 3 poin."

Sumber: brave.com/search/api

02. Playwright

Apa fungsinya?

Claude bisa membuka browser sendiri: navigasi, klik, isi form, screenshot. Sering dipakai buat "vibe testing", memastikan app hasil vibe coding kamu beneran jalan, bukan cuma terlihat jalan pas demo.

Soal biaya:

Gratis penuh. Resmi dari Microsoft, open source, tidak perlu API key sama sekali.

Cara Connect:

claude mcp add playwright -- npx -y @playwright/mcp

Contoh Langsung: "Buka localhost:3000, coba klik tombol Login, screenshot hasilnya."

Sumber: playwright.dev/mcp, github.com/microsoft/playwright-mcp

03. Firecrawl

Apa fungsinya?

Ambil isi 1 halaman web utuh, diubah jadi teks bersih yang bisa langsung dibaca dan diolah Claude. Cocok buat riset referensi desain atau konten untuk project vibe coding kamu, tanpa menulis scraper manual.

Soal biaya:

Free tier 1.000 credit per bulan, tanpa kartu kredit. Tetap perlu daftar API key gratis dulu.

Cara Connect:

1. Daftar API key gratis di firecrawl.dev
2. Jalankan command ini:

claude mcp add firecrawl --env FIRECRAWL_API_KEY=isi-api-key-kamu -- npx -y firecrawl-mcp

Contoh Langsung: "Ambil isi halaman ini, ringkas 3 poin pentingnya."

Sumber: firecrawl.dev/pricing

04. Replicate

Apa fungsinya?

Generate gambar dan video untuk asset app kamu, dari katalog lebih dari 50.000 tools AI. Beberapa contoh nyata: FLUX dan Stable Diffusion untuk gambar, Whisper untuk transkrip suara ke teks, Kling AI dan MiniMax untuk video, Seedream untuk gambar dari ByteDance, Llama untuk teks. FLUX, generate gambar dari teks Stable Diffusion, bikin gambar, versi yang paling banyak dipakai orang Whisper, ubah suara jadi teks (transkrip otomatis) Kling AI, MiniMax, Seedream, bikin video dari teks atau dari 1 gambar Llama, model teks buat chatbot atau fitur AI di app kamu

Soal biaya:

Connect-nya gratis, daftar akun tidak perlu kartu kredit. Yang bayar cuma pas kamu generate gambar atau videonya, per hasil, sesuai model yang dipakai.

Cara Connect:

1. Daftar akun dan ambil API token di replicate.com
2. Jalankan command ini:

claude mcp add replicate --env REPLICATE_API_TOKEN=isi-token-kamu -- npx -y replicate-mcp@latest

Contoh Langsung: "Bikinin banner landing page, gaya flat design, pakai FLUX."

Sumber: replicate.com/docs/reference/mcp, blog.cloudflare.com (pengumuman resmi akuisisi Replicate, menyebut katalog lebih dari 50.000 model)

05. Context7

Apa fungsinya?

Memasukkan dokumentasi library versi terbaru langsung ke konteks Claude. Ini menyelesaikan masalah paling sering dialami vibe coder pemula: Claude mengarang cara pakai fungsi yang sebenarnya sudah berubah atau dihapus di versi terbaru.

Soal biaya:

Gratis penuh, tidak perlu API key untuk pemakaian dasar. Key gratis opsional tersedia di context7.com/dashboard kalau butuh limit lebih besar.

Cara Connect:

claude mcp add context7 -- npx -y @upstash/context7-mcp

Contoh Langsung: "Bikinin function login pakai Supabase Auth versi terbaru."

Sumber: context7.com, github.com/upstash/context7-mcp

06. Supabase

Apa fungsinya?

Database asli untuk app hasil vibe coding kamu. Bikin tabel, ubah struktur data, jalankan query, tinggal mengobrol dengan Claude tanpa buka dashboard terpisah.

Soal biaya:

Akun gratis, tidak perlu kartu kredit, berlaku permanen selama tidak melewati limit (500 MB database, 50.000 monthly active users).

Cara Connect:

Supabase sudah jadi connector resmi di direktori Claude.

1. Buka claude.ai atau Claude Code → Connectors
2. Cari "Supabase" → klik Connect
3. Login dengan akun Supabase kamu, izinkan akses

Contoh Langsung: "Bikin tabel users buat app aku, kolomnya nama, email, dan tanggal daftar."

Sumber: supabase.com/blog/supabase-is-now-an-official-claude-connector

07. GitHub

Apa fungsinya?

Menyimpan dan mencatat riwayat perubahan code project kamu secara otomatis, jadi progress tidak hilang setiap kali kamu iterasi ulang bareng Claude.

Soal biaya:

Gratis dan open source, tinggal login pakai akun GitHub kamu sendiri.

Cara Connect:

1. Buka claude.ai atau Claude Code → Connectors
2. Cari "GitHub" → klik Connect → Authorize
3. Pilih repository yang mau diberi akses

Contoh Langsung: "Commit semua perubahan hari ini dengan pesan yang jelas."

Sumber: github.com/github/github-mcp-server

08. Vercel

Apa fungsinya?

Publish app kamu ke internet, dapat link hidup, tanpa perlu buka dashboard hosting terpisah.

Soal biaya:

Gratis di paket Hobby, tidak perlu kartu kredit. Catatan penting, paket Hobby ini khusus untuk pemakaian personal dan non-komersial, bukan untuk project yang sudah menghasilkan uang.

Cara Connect:

claude mcp add --transport http vercel https://mcp.vercel.com

Atau lewat direktori Connectors resmi di claude.ai.

Contoh Langsung: "Deploy project ini ke Vercel, kasih aku link-nya."

Sumber: vercel.com/docs/agent-resources/vercel-mcp, vercel.com/changelog

🚀 Starter Pack: Kalau Cuma Punya Waktu Terbatas

Tidak harus connect semua sekaligus. Mulai dari 3 ini dulu, ketiganya gratis penuh tanpa kartu kredit dan tanpa risiko biaya mendadak.

Setelah nyaman pakai ketiganya, baru tambah Supabase dan Vercel buat lengkapi alur database dan deploy-nya.

❓ Pertanyaan yang Sering Ditanya

Q: Semua ini beneran gratis?

A: Connect-nya, iya, kecuali Brave Search yang wajib kartu kredit di awal. Soal pemakaian, Playwright, Context7, Supabase, GitHub gratis penuh. Firecrawl dan Replicate gratis sampai batas tertentu, lewat itu bayar sesuai pemakaian.

Q: Aku tidak ngerti coding sama sekali, bisa tetap connect ini?

A: Bisa. Supabase, GitHub, dan Vercel bisa connect lewat klik Connect di direktori Claude, tanpa command apapun. Yang butuh command di terminal cuma Brave Search, Playwright, Firecrawl, Replicate, dan Context7.

Q: Setelah connect, aku harus manggil nama MCP-nya setiap mau pakai?

A: Tidak perlu. Cukup minta apa yang kamu mau lewat bahasa biasa, misalnya "cari info ini" atau "deploy project ini". Claude yang otomatis memutuskan MCP mana yang dipakai.

Q: Berapa banyak yang boleh di-connect sekaligus?

A: Tidak ada batas resmi, tapi makin banyak MCP aktif, makin berat proses respons Claude di setiap percakapan. Mulai dari Starter Pack dulu, tambah bertahap sesuai kebutuhan.

💬 Ada Pertanyaan Lain?

Komen atau DM di Instagram @kayadigital.ai. Aku baca semua pesan yang masuk. Kalau mau panduan lain seputar Claude Code dan vibe coding, cek tutorial lainnya di portal ini.