MCP: Apa Itu dan Cara Menggunakannya

Di bab sebelumnya, kita belajar tentang Skills—mengubah operasi umum menjadi pintasan satu klik. Tapi pernahkah Anda bertanya-tanya:

Bisakah AI langsung mengoperasikan browser saya? Bisakah ia membaca dan menulis catatan saya? Bisakah ia menanyakan database saya?

Jawabannya: Ya, tapi Anda perlu melengkapi AI dengan “plugin”.

“Sistem plugin” inilah yang kita sebut MCP.

Sekilas tentang Tren

Banyak fitur MCP kini diserap secara native oleh Claude Code dan Codex CLI.

Misalnya, di awal Anda perlu menginstal MCP Pencarian Web agar AI bisa mencari di web; sekarang Claude Code dan Codex sudah memiliki pencarian web bawaan. Baca/tulis file, operasi Git, dan banyak kemampuan lainnya juga sudah bawaan. Skills yang kita bahas sebelumnya juga menggantikan beberapa skenario MCP—banyak tugas standar yang sebelumnya memerlukan MCP kini bisa dilakukan dengan Skills.

Tapi itu bukan berarti MCP tidak berguna. Sebaliknya, MCP masih memiliki nilai yang tak tergantikan:

• Menghubungkan sistem proprietary: Database internal perusahaan Anda, API privat—ini tidak akan pernah menjadi bawaan dan hanya bisa diakses melalui MCP.
• Mengoperasikan perangkat lunak pihak ketiga: Mengontrol browser, mengelola Obsidian, menangani catatan Notion—skenario yang memerlukan interaksi mendalam dengan perangkat lunak eksternal adalah tempat MCP menjadi satu-satunya pilihan.
• Ekosistem komunitas: Pasar MCP memiliki ribuan server kontribusi komunitas yang mencakup segala macam skenario yang mungkin tidak Anda bayangkan.
• Kustomisasi: Anda bisa menulis server MCP sendiri untuk memberi AI akses ke sistem apa pun yang Anda inginkan.

Sederhananya: fitur bawaan mencakup 80% kebutuhan umum, sementara MCP menangani 20% sisanya—dan 20% itulah yang sering membuat perbedaan nyata.

Apa itu MCP?

Secara Singkat

MCP = Model Context Protocol = Sistem plugin AI

MCP adalah protokol terbuka yang diperkenalkan oleh Anthropic (pembuat Claude) yang memungkinkan alat AI terhubung ke sistem eksternal.

Mengapa Kita Perlu MCP?

Pertimbangkan skenario ini:

Tanpa MCP:

You: Open Baidu and search for "today's weather"
AI: Sorry, I can't access the browser. I can only process text…

Dengan MCP:

You: Open Baidu and search for "today's weather"
AI: Sure, I've opened the browser, searched for "today's weather", and here are the results…

Apa bedanya? AI berubah dari “hanya bisa bicara” menjadi “bisa bertindak”.

Analogi

AI itu sendiri = otak yang cemerlang

• Ia tahu segalanya, tapi tidak punya tangan atau kaki.
• Ia bisa memberi tahu Anda cara melakukan sesuatu, tapi tidak bisa melakukannya untuk Anda.

MCP = menghubungkan tangan dan kaki ke otak itu

• Hubungkan “tangan browser”: AI bisa mengoperasikan halaman web secara otomatis.
• Hubungkan “tangan sistem file”: AI bisa membaca dan menulis file Anda.
• Hubungkan “tangan database”: AI bisa menanyakan dan memodifikasi data.
• Hubungkan “tangan Obsidian”: AI bisa langsung mengelola catatan Anda.

Analogi lain:

• AI = koki yang sangat pintar
• MCP = melengkapi koki dengan dapur lengkap (panci, wajan, oven, blender…)
• Tanpa MCP: koki hanya bisa membacakan resep.
• Dengan MCP: koki benar-benar bisa memasak untuk Anda.

Perbandingan dari Sebelumnya

Di bab sebelumnya kita membandingkan prompt, Skills, dan MCP:

Prompts → The most basic interaction method (verbal instructions)
    ↓
Skills → Encapsulate prompts + simple logic (shortcuts)
    ↓
MCP → Skills + the ability to connect to external systems (connecting the world)

MCP adalah yang paling kuat di antara ketiganya karena ia meruntuhkan “dinding” AI dan memungkinkannya menjangkau dunia luar.

Cara Kerja MCP

Anda tidak perlu mendalami detail teknis—cukup pahami diagram ini:

You ←→ Claude Code/Codex ←→ MCP Server ←→ External System
         (AI Tool)           (Bridge)      (Browser/Database/Notes, etc.)

Tiga peran:

Yang perlu Anda lakukan hanyalah menginstal server MCP di alat AI Anda, lalu AI bisa mengoperasikan sistem eksternal yang sesuai.

Semudah menginstal aplikasi di ponsel Anda.

Tempat Menemukan Server MCP

Ada banyak server MCP di luar sana. Bagaimana cara menemukan yang Anda butuhkan? Berikut adalah “pasar MCP” utama:

1. mcp.so (Direkomendasikan)

URL: https://mcp.so

Ini adalah direktori server MCP paling lengkap saat ini, seperti “App Store untuk MCP”.

Fitur:

• Ribuan server MCP terdaftar
• Deskripsi detail dan panduan instalasi
• Pencarian dan penjelajahan kategori
• Ramah bahasa Mandarin

Cara menggunakan:

1. Buka situs web.
2. Cari fungsionalitas yang Anda inginkan (misalnya, “playwright” atau “browser”).
3. Temukan server MCP yang sesuai.
4. Ikuti petunjuk instalasi di halaman.

2. Smithery

URL: https://smithery.ai

Fitur:

• Coba beberapa server MCP secara online langsung.
• Perintah instalasi satu klik.
• Hosting API Key.

3. GitHub awesome-mcp-servers

URL: https://github.com/punkpeye/awesome-mcp-servers

Fitur:

• Daftar server MCP yang dikelola komunitas.
• Open source dan gratis.
• Sering diperbarui.

4. Server MCP Resmi

Perusahaan besar seperti Anthropic dan Microsoft juga telah merilis server MCP resmi:

Rekomendasi: Pemula sebaiknya mulai dengan mcp.so, cari fungsionalitas yang Anda butuhkan, dan ikuti panduan instalasi.

Cara Menginstal MCP

Metode instalasi sedikit berbeda antara Claude Code dan Codex CLI. Berikut cara melakukannya untuk masing-masing.

Menginstal MCP di Claude Code

Metode 1: Baris Perintah (Direkomendasikan)

Claude Code menyediakan perintah manajemen MCP khusus—satu baris sudah cukup:

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

Perintah ini berarti:

• claude mcp add : Menambahkan server MCP.
• playwright : Nama yang Anda berikan untuk MCP ini (Anda bisa memilih nama apa pun).
• npx '@playwright/mcp@latest' : Perintah untuk memulai server MCP.

Verifikasi instalasi:

Di Claude Code, ketik /mcp untuk melihat daftar server MCP yang terinstal.

Metode 2: Edit File Konfigurasi

Anda juga bisa langsung mengedit file konfigurasi Claude Code untuk menambahkan MCP.

Lokasi file konfigurasi: ~/.claude.json

Tambahkan bagian mcpServers:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Simpan dan mulai ulang Claude Code.

Menginstal MCP di Codex CLI

Konfigurasi MCP Codex CLI ada di file ~/.codex/config.toml.

Edit config.toml

Tambahkan baris berikut di akhir file:

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]
startup_timeout_sec = 60.0

Penjelasan parameter:

MCP dengan Variabel Lingkungan

Beberapa server MCP memerlukan API Key atau konfigurasi lain. Anda bisa meneruskannya menggunakan bagian env:

[mcp_servers.context7]
command = "npx"
args = ["-y", "mcp-remote", "https://mcp.context7.com/mcp", "--header", "Authorization:${CTX7_AUTH_HEADER}"]
startup_timeout_sec = 60.0

[mcp_servers.context7.env]
CTX7_AUTH_HEADER = "Bearer your_token"

Simpan dan mulai ulang Codex.

Praktik: Instal Playwright MCP dan Kontrol Browser

Mari kita coba! Kita akan menggunakan Playwright MCP sebagai contoh untuk membiarkan AI mengontrol browser secara otomatis.

Apa itu Playwright MCP?

Playwright = Alat otomatisasi browser dari Microsoft
Playwright MCP = Memungkinkan AI mengontrol Playwright melalui protokol MCP

Setelah instalasi, AI bisa:

• Membuka halaman web
• Mengklik tombol
• Mengisi formulir
• Mengambil tangkapan layar
• Membaca konten halaman
• Masuk ke situs web secara otomatis

Langkah 1: Instal Playwright MCP

Di Claude Code

Buka terminal dan jalankan:

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

Jika Anda ingin menentukan browser (misalnya, Edge), tambahkan parameter:

claude mcp add playwright npx '@playwright/mcp@latest' -- --browser msedge

Di Codex CLI

Edit ~/.codex/config.toml dan tambahkan:

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]
startup_timeout_sec = 60.0

Jika Anda ingin menggunakan Edge dan mempertahankan sesi login, Anda bisa mengonfigurasinya seperti ini:

[mcp_servers.playwright]
command = "mcp-server-playwright"
args = ["--browser", "msedge", "--executable-path", "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge", "--user-data-dir", "/Users/your_username/Library/Application Support/Microsoft Edge", "--isolated"]
startup_timeout_sec = 60.0

Tips: Menggunakan --user-data-dir memungkinkan browser menyimpan status login Anda, sehingga AI tidak perlu login lagi saat membuka halaman.

Langkah 2: Verifikasi Instalasi

Mulai Claude Code:

claude

Ketik /mcp dan Anda akan melihat playwright dalam daftar dengan status “connected”.

Langkah 3: Biarkan AI Mengoperasikan Browser

Sekarang coba! Di Claude Code, masukkan:

Open Baidu, search for "What is MCP", and save a screenshot of the search results.

AI akan secara otomatis:

1. Meluncurkan browser
2. Membuka halaman utama Baidu
3. Mengetik “Apa itu MCP” di kotak pencarian
4. Mengklik tombol pencarian
5. Mengambil tangkapan layar halaman hasil pencarian
6. Menyimpan tangkapan layar ke folder proyek Anda

Anda tidak perlu melakukan apa pun—AI menyelesaikan semua langkah secara otomatis!

Lebih Banyak Kasus Penggunaan

Dengan Playwright MCP terinstal, Anda bisa meminta AI melakukan banyak hal:

Contoh 1: Isi formulir otomatis

Open https://example.com/register and fill in the registration form with the following info:
Username: testuser
Email: [email protected]
Then click submit.

Contoh 2: Ekstrak konten web

Open https://news.ycombinator.com and extract the titles and links of the top 10 stories on the front page. Organize them into a Markdown table.

Contoh 3: Pengujian otomatis

Open the translation page I just made (translate.html) and test the following:
1. Enter "Hello World", click translate, and check if a result appears.
2. Click the clear button and check if the input box is cleared.
3. Toggle dark mode and check if the interface looks correct.
Compile the test results into a report.

Server MCP yang Direkomendasikan

Berikut beberapa server MCP yang praktis, dikategorikan berdasarkan kasus penggunaan:

Browser & Web

Alat Pengembangan

Catatan & Dokumentasi

Database

Kunjungi mcp.so atau smithery.ai untuk menemukan lebih banyak server MCP.

Catatan Penting

Pengingat Keamanan

MCP memberi AI kemampuan untuk mengoperasikan sistem eksternal, yang juga membawa beberapa risiko:

1. Berikan izin dengan hati-hati: Jangan beri AI akses penuh ke sistem tanpa berpikir.
2. Tinjau tindakan: Sebelum operasi penting, minta AI memberi tahu Anda apa yang akan dilakukannya.
3. Cadangkan data: Sebelum membiarkan AI menangani data penting, buat cadangan.
4. Keamanan API Key: Jangan pernah membagikan API Key Anda kepada orang lain.

Pertanyaan yang Sering Diajukan

T: Bagaimana jika server MCP gagal dimulai?

J: Periksa hal berikut:

• Apakah Node.js versi 18 atau lebih tinggi? (node -v)
• Apakah jaringan berfungsi?
• Apakah startup_timeout_sec diatur cukup tinggi? (60 detik disarankan)

T: Setelah menginstal MCP browser, saya tidak melihat jendela browser.

J: Playwright berjalan dalam mode headless secara default (tanpa jendela terlihat). Jika Anda ingin melihat browser beraksi, tambahkan parameter --headless false:

claude mcp add playwright npx '@playwright/mcp@latest' -- --headless false

T: Bisakah server MCP dibagikan antara Claude Code dan Codex CLI?

J: Server MCP itu sendiri bersifat universal (misalnya, Playwright MCP bisa digunakan oleh kedua alat), tetapi metode konfigurasinya berbeda:

• Claude Code: ~/.claude.json atau perintah claude mcp add
• Codex CLI: ~/.codex/config.toml

Ringkasan

Apa yang Anda pelajari hari ini:

1. Apa itu MCP: Sistem plugin AI yang memungkinkan AI terhubung ke alat dan layanan eksternal.
2. Pasar MCP: mcp.so, Smithery, awesome-mcp-servers—temukan plugin seperti App Store.
3. Cara menginstal MCP: Gunakan perintah claude mcp add untuk Claude Code, atau edit config.toml untuk Codex CLI.
4. Praktik: Menginstal Playwright MCP dan membiarkan AI mengontrol browser secara otomatis.
5. Server MCP yang direkomendasikan: Browser, GitHub, catatan, database, dan lainnya.

Poin penting:

• MCP mengubah AI dari “hanya bisa bicara” menjadi “bisa bertindak”.
• Menginstal MCP semudah menginstal aplikasi di ponsel Anda.
• Pemula disarankan memulai dengan Playwright MCP untuk pengalaman yang paling intuitif.