7 MCP Server yang Bikin Claude Code Makin Berguna (Playwright, GitHub, Database, dll.)

Secara default, Claude Code bisa membaca file dan menjalankan perintah shell — sudah sangat berguna. MCP (Model Context Protocol) memperluasnya: lewat MCP server, Claude Code bisa mengendalikan browser, mengelola PR GitHub, query database, sampai membaca dokumentasi library terkini. Ini 7 server yang menurut kami paling layak dipasang duluan, masing-masing dengan use case nyata — bukan sekadar daftar nama.

Cara pasang MCP server (30 detik)

Semua server di daftar ini dipasang lewat perintah claude mcp add. Contoh untuk Playwright:

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

Konfigurasi bisa disimpan per-project (.mcp.json, ikut ke repo — enak untuk tim) atau per-user. Cek daftar yang aktif dengan claude mcp list. Setelah terpasang, tool dari server tersebut otomatis tersedia untuk Claude di sesi berikutnya.

1. Playwright — Claude bisa buka browser dan lihat hasilnya

Server paling game-changing untuk web developer. Claude Code bisa membuka halaman, mengklik, mengisi form, membaca console error, dan mengambil screenshot.

Use case nyata: selesai mengubah komponen React, minta: 'Buka localhost:3000, klik tombol checkout, cek apakah ada error di console, screenshot hasilnya.' Claude memverifikasi perubahannya sendiri — loop feedback yang tadinya manual jadi otomatis. Juga ampuh untuk debugging bug 'cuma muncul di browser'.

2. GitHub — PR, issue, dan review tanpa pindah tab

Menghubungkan Claude Code ke GitHub API: baca issue, buat PR, review perubahan, cek status CI.

Use case nyata: 'Baca issue #142, kerjakan fix-nya di branch baru, lalu buka PR dengan deskripsi yang merujuk issue itu.' Satu kalimat, alur issue-ke-PR selesai. Catatan: banyak alur git dasar (commit, branch, push) sudah bisa lewat CLI git/gh tanpa MCP — server ini bernilai untuk operasi API yang lebih kaya seperti review dan manajemen issue.

3. Database (Postgres/MySQL) — query tanpa copas schema

Server database memberi Claude akses query (idealnya read-only) ke database development-mu.

Use case nyata: debugging data aneh — 'Cari user yang punya order duplikat di bulan Juni, tampilkan pola field-nya.' Claude menulis dan menjalankan SQL-nya sendiri, membaca schema langsung dari database, tanpa kamu bolak-balik copas hasil query. Aturan emas: sambungkan hanya ke database dev/staging, jangan produksi — atau minimal pakai kredensial read-only.

4. Fetch — membaca halaman web & API eksternal

Server sederhana yang memberi Claude kemampuan mengambil konten URL (HTML/JSON/markdown).

Use case nyata: 'Baca dokumentasi API pembayaran di URL ini, lalu buatkan client wrapper-nya sesuai konvensi project.' Atau memverifikasi endpoint publik: 'Hit API kita yang di staging, bandingkan respons dengan skema di kode.'

5. Filesystem — akses folder di luar project

Claude Code secara default bekerja di direktori project. Server filesystem membuka akses terkontrol ke folder lain yang kamu izinkan (allowlist).

Use case nyata: monorepo terpisah atau aset di folder lain — 'Ambil skema dari repo backend di ~/work/api-service, samakan tipe di frontend ini.' Aksesnya dibatasi eksplisit ke direktori yang kamu daftarkan, jadi tetap aman.

6. Memory — konteks yang bertahan antar sesi

Server knowledge-graph sederhana tempat Claude menyimpan fakta yang kamu suruh ingat, dan membacanya lagi di sesi berikutnya.

Use case nyata: keputusan arsitektur yang sering ditanya ulang — 'Ingat: kita pakai pattern repository, jangan akses ORM langsung dari controller.' Untuk konvensi project sebenarnya CLAUDE.md lebih tepat; memory unggul untuk fakta lintas project atau yang berevolusi (catatan debugging panjang, preferensi pribadi).

7. Context7 — dokumentasi library versi terbaru

Model punya knowledge cutoff; library JavaScript berganti API tiap enam bulan. Context7 menyuntikkan dokumentasi terkini dari library yang kamu pakai langsung ke konteks.

Use case nyata: framework yang rilis cepat — 'Pakai Context7, cek API terbaru TanStack Query v6 sebelum refactor hook ini.' Mengurangi drastis kode 'gaya tahun lalu' yang harus kamu koreksi manual.

Catatan soal plan: MCP itu lapar konteks

Setiap MCP server menambah definisi tool ke konteks, dan hasil tool (HTML halaman, hasil query, screenshot) bisa besar — artinya pemakaian MCP yang intens menguras kuota lebih cepat daripada chat biasa. Kalau workflow-mu banyak Playwright + database + fetch, plan Pro akan terasa sempit; Max 5x adalah titik nyaman untuk workflow MCP-heavy. Tips: aktifkan hanya server yang dipakai project itu, dan /clear tetap sahabatmu.

Butuh upgrade tanpa drama kartu? Order Max via QRIS — aktif ±5 menit, tanpa auto-renewal.