Pernah bertanya ke AI coding assistant soal fitur CSS atau JavaScript yang baru rilis, lalu jawabannya terdengar sangat yakin tetapi ternyata salah? Masalahnya bukanmodelnya bodoh, melainkan sumber datanya. Model bahasa menjawab dari data latihan yang punya batas waktu (knowledge cutoff), sementara platform web bergerak jauh lebih cepat. MDN menjawab masalah ini dengan merilis MDN MCP server: server yang menyambungkan dokumentasi dan data kompatibilitas browser MDN langsung ke AI agent atau editor yang kamu pakai.

Masalahnya: AI menebak, bukan mengecek

Dalam pengumuman resminya (15 Juni 2026), tim MDN menyebut alasan utama pembuatan server ini: agen coding sering menampilkan informasi platform web yang sudah usang. Contoh yang mereka berikan sederhana tetapi sering terjadi — model bisa saja tidak tahu bahwa aturan CSS @view-transition sudah ada, atau tidak tahu apakah sebuah fitur sudah masuk kategori Baseline Widely Available sehingga aman dipakai lintas browser.

Bagi tim yang mengelola situs layanan publik, kesalahan seperti ini mahal. Situs desa, sekolah, atau aplikasi pemda biasanya harus jalan di berbagai perangkat, termasuk browser versi lama di HP pengguna. Salah menilai dukungan browser berarti fitur tampil rusak atau justru tidak pernah dipakai karena dianggap belum didukung.

Apa itu MCP dan apa yang dikerjakan MDN MCP

MCP (Model Context Protocol) adalah standar terbuka yang membuat alat AI bisa terhubung ke sumber data eksternal. MDN MCP server memakai protokol itu untuk memberi agen kamu akses ke tiga hal: pencarian di MDN, isi dokumentasi, dan data kompatibilitas browser (Browser Compatibility Data). Dengan begitu, saat kamu bertanya "apakah fitur ini didukung Firefox?", agen tidak menebak dari ingatan, tetapi mengambil data dari MDN lebih dulu.

Server ini bekerja di klien apa pun yang mendukung MCP, termasuk editor seperti VS Code, Zed, dan Cursor; CLI agen seperti Claude Code, Codex CLI, dan Antigravity CLI (dulu Gemini CLI); serta Claude Desktop.

Cara memasangnya

Server yang dipakai adalah server remote, jadi tidak ada yang perlu diinstal ke server sendiri. Untuk Claude Code, cukup satu perintah di terminal:

claude mcp add --transport http mdn https://mcp.mdn.mozilla.net/

Langkah umum di klien lain:

1. Buka pengaturan MCP pada klien kamu (di VS Code: MCP: Add Server, lalu pilih tipe HTTP).
2. Isi nama server mdn dan URL https://mcp.mdn.mozilla.net/.
3. Simpan. Di VS Code, konfigurasi workspace disimpan di .vscode/mcp.json dengan format seperti ini:

{
  "servers": {
    "mdn": {
      "type": "http",
      "url": "https://mcp.mdn.mozilla.net/"
    }
  }
}

Perhatikan: format VS Code memakai kunci servers, sedangkan format portabel MCP memakai mcpServers. Jangan menyalin konfigurasi dari klien lain tanpa menyesuaikan kuncinya — ini kesalahan pemasangan yang paling sering terjadi. Setelah tersambung, cek daftar tool yang tersedia di panel MCP klien kamu, lalu uji dengan pertanyaan yang jawabannya bisa diverifikasi, misalnya "fitur light-dark() untuk gambar didukung browser apa saja?"

Seberapa besar bedanya? Ini hasil uji MDN

Tim MDN menguji Claude Code (Opus 4.7) dengan dan tanpa MCP pada empat fitur yang baru dikirim di Firefox 151: fungsi CSS light-dark() untuk gambar, pseudo-class :buffering, atribut shadowrootslotassignment pada <template>, dan Web Serial API. Temuannya:

• Catatan pemakaian relatif setara. Beberapa jawaban dengan MCP lebih lengkap, misalnya ikut menyertakan contoh light-dark() dengan gradient linear.
• Data dukungan browser jauh berbeda. Tanpa MCP, jawaban benar hanya pada satu dari empat kasus, yaitu :buffering.
• Tanpa MCP, model menyatakan shadowrootslotassignment didukung Chrome 120 dan Safari 18.3. Faktanya Firefox 151-lah browser pertama yang mendukung atribut itu.
• Untuk Web Serial API, model tanpa MCP menyebut fitur ini "tidak diimplementasikan dan tidak masuk roadmap" di Firefox, padahal Firefox 151 sudah mengirim dukungannya sejak Mei 2026.
• Jawaban yang memakai MCP juga sekitar dua kali lebih cepat, karena agen tidak perlu mengambil dan mengurai banyak halaman HTML untuk mencari informasi terbaru.

Catatan sebelum dipakai di pekerjaan klien

Status server ini masih eksperimental dan bisa dihentikan kapan saja. Selama masa uji, MDN menyimpan data kueri yang diterima. Data itu tidak dikaitkan dengan identitas pengguna, tetapi ada kemungkinan informasi pribadi yang kamu tulis di prompt ikut terbawa. Jika itu menjadi kekhawatiran, jangan pakai server ini untuk kode rahasia klien, dan pertimbangkan mengirim header X-Moz-1st-Party-Data-Opt-Out: 1 untuk menolak analitik pihak pertama.

Saran praktisnya: pakai MCP ini untuk pertanyaan seputar platform web — dukungan browser, sintaks API baru, perilaku CSS — dan tetap verifikasi keputusan penting langsung di halaman MDN atau caniuse sebelum dipakai di produksi. Untuk proyek yang menyangkut layanan publik, kebiasaan mengecek satu kali lagi tetap jauh lebih murah daripada memperbaiki situs yang rusak di HP warga.

Sumber: MDN Blog — Introducing the MDN MCP server, MDN MCP server (halaman resmi), Repositori mdn/mcp di GitHub, Dokumentasi MCP server di VS Code.