MENGENAL MODEL CONTEXT PROTOCOL (MCP)

Halo teman-teman developer! Gimana kabarnya? Lagi pada ngoprek apa nih? Hehe.

Belakangan ini, mungkin kalian sering lihat atau mendengar istilah “MCP” berseliweran di sosmed, tapi masih kebingungan itu istilah apa sebenarnya? Terus, gunanya buat kita sebagai web developer apa? Nah, pada tulisan kali ini, aku mau coba menjawab dua pertanyaan itu pake bahasa yang santai ya!

Apa Itu Model Context Protocol (MCP)?

Gampangnya gini, Model Context Protocol (MCP) merupakan sebuah standar open-source yang dibikin biar Large Language Model (LLM) bisa ngambil data (konteks) dari sumber luar (mirip API atau database kita) dan bisa juga ngejalanin fungsi/perintah (biasa disebut tools) di sistem.

Sebelum ada MCP, tiap developer atau perusahaan kalau mau bikin AI-nya bisa ngambil data dari luar atau bisa diperintah buat ngelakuin sesuatu, ya harus bikin solusi custom sendiri-sendiri. Kekurangannya yaitu bisa jadi ribet kalau mau sharing solusi antar tim atau antar sistem, soalnya nggak ada standarnya.

Nah, karena masalah itu, Anthropic (iya, yang bikin Claude AI) akhirnya bikin standar ini, si MCP. Tujuannya biar ada cara yang sama dan gampang buat ngehubungin LLM sama dunia luar.

Kalau mau liat arsitektur dasarnya, bisa cek diagram dari dokumentasi resminya ini.

Terus, maksudnya apa nih? Intinya, MCP itu punya 3 bagian utama:

1. Clients (Klien): Ini biasanya aplikasi atau host yang kita pake, yang udah ada MCP client-nya di dalem.
2. Server (Server): Ini jembatannya. Dia yang nerima perintah dari client, ngobrol sama sumber data/API luar, terus balikin hasilnya ke client.
3. Sumber Data Eksternal atau API: Ya ini tujuan akhirnya, bisa API Jira, database kita, Figma, Google Docs, macem-macem lah.

Alur Model Context Protocol (MCP) Server

Misalnya, kamu lagi pake Cursor. Nah, Cursor ini bisa dibilang sebagai host karena dia udah punya client MCP di dalamnya. Terus, kamu juga udah install server MCP buat Atlassian (Jira) di Cursor. Server ini bisa kamu temuin di direktori MCP resmi Anthropic atau di repo awesome-mcp-servers. Lanjut, terus kamu minta tolong AI-nya, “Eh, bantuin dong bikin langkah-langkah buat nyelesain tiket Jira nomor #XYZ-123“.

Gimana alurnya pake MCP Server?

1. Si client MCP di Cursor ngirim perintah ke server MCP Jira yang udah kamu install.
2. Si server ini terus manggil tool jira_issue (misalnya) buat minta data tiket #XYZ-123 ke Jira REST API.
3. Jira API ngasih jawaban (data tiketnya).
4. Jawaban dari API ini diterusin lagi sama si server ke client di Cursor.
5. Nah, data tiket Jira tadi sekarang bisa dipake sama AI di Cursor sebagai konteks tambahan buat ngasih jawaban atau saran yang lebih pas soal langkah-langkah penyelesaian tiket itu.

Udah gitu aja! Simpel kan MCP itu sebenernya? Nilai lebihnya itu karena sekarang banyak banget developer di seluruh dunia bikin server-server MCP seperti ini dan kita tinggal plug and play aja sesuai kebutuhan.

Kenapa MCP Server Ini Berguna Buat Kita Web Developer?

Ini nih pertanyaan paling penting. Kegunaan MCP buat kita para web developer apa?

Karena kita mungkin menghabiskan banyak waktu di depan IDE, fakta bahwa Cursor udah punya client MCP itu langkah besar banget. Artinya, kita udah siap manfaatin MCP.

Nggak cuma Cursor kok, client MCP juga udah ada di aplikasi atau host lain, misalnya:

• Extension VS Code GitHub Copilot (Wah, ini menarik!)
• Claude Desktop (Aplikasi desktopnya Claude AI)
• Extension VS Code Cline
• Dan masih banyak lagi, bisa liat di repo awesome-mcp-client.

Karena client-nya udah ada di tools yang mungkin udah kita pake, kita jadi bisa langsung manfaatin banyak banget server MCP yang udah tersedia.

Server MCP apa aja yang berguna buat kita?

1. Masukin Info Tiket (Jira, Asana, dll) ke sebuah Context AI di IDE

Ini contoh yang tadi udah disinggung. Kita bisa bikin AI di Cursor (misalnya) ngerti konteks task atau bug yang lagi kita kerjain dari Jira, Asana, atau project management tools lainnya. Bahkan bisa juga update tiket langsung dari chat di Cursor.

Jadinya kita nggak perlu bolak-balik copy-paste antara IDE sama Jira/Asana. Lebih enak lagi kalau AI-nya jalan di mode agent, dia bisa inisiatif sendiri buat ngambil info tambahan dari tiket kalau dirasa perlu. Ada juga server buat Google Docs atau Notion kalau info tambahannya ada di sana.

2. Ubah Desain Figma Jadi Kode

Selain bantu kerja tim, MCP juga bisa bantu urusan frontend. Ada server MCP buat Figma yang katanya bisa bantu AI (seperti di Cursor) buat langsung generate kode dari desain Figma. Klaimnya, hasilnya bisa lebih akurat daripada kita cuma paste screenshot desainnya doang.

Kalian bisa liat aksinya di video YouTube dari Graham Lipsman ini.

Kalau dari yang aku liat, ini emang bukan solusi ajaib yang sekali klik langsung jadi sempurna, tapi lumayan banget buat langkah awal project.

3. Kerja Sama Database Jadi Lebih Enak

MCP nggak cuma buat frontend aja lho. Kalau kamu ngurusin backend yang berhubungan sama database, ada banyaaak server MCP yang bisa nyambung, baca, nulis, atau query ke database populer. Ini beberapa contohnya:

• Postgres MCP Server
• MariaDB MCP Server
• MSSQL MCP Server
• MySQL MCP Server
• SQLite MCP Server

Kalau kamu pake Backend as a Service (BaaS) seperti Supabase atau Firebase, ada juga server-nya!

• Supabase MCP Server
• Firebase MCP Server

Gimana ini bisa bantu? Wah, banyak caranya!

• Kalau skema database kamu belum terdokumentasi rapi di kode pake ORM seperti drizzle atau Prisma (plus migration-nya), server MCP database ini bisa ngasih tau AI soal skema database kamu. Jadi saran kodenya bisa lebih pas.
• Yang lebih keren lagi, kamu bisa nanya-nanya soal data kamu, minta insight, tanpa perlu nulis query SQL manual! Tinggal tanya aja ke AI-nya.

4. Ngambil Data Web Pake Puppeteer

MCP lain yang potensial buat web developer adalah server MCP Puppeteer. Bayangin aja, ini bisa dipake buat otomatisasi interaksi di halaman web, ambil screenshot, atau yang mungkin paling menarik, buat scraping data dari berbagai website. Jadi, AI bisa kita minta tolong buat ngumpulin informasi dari web secara otomatis, tanpa kita perlu bikin skrip scraping manual yang rumit.

5. Mencari Aset di Komputer Lokal

Pernah kesel nggak ketika mencari file aset yang keselip entah di mana dan lupa namanya? Nah, server MCP Filesystem ini menawarkan solusi potensial. Dia dirancang biar bisa berinteraksi sama sistem file di komputer kita: misalnya buat scan direktori, baca isi file, atau bahkan nulis file (tentunya dengan persetujuan kita ya, biar aman!). Bayangin kita bisa minta tolong AI buat nyariin file berdasarkan kriteria tertentu di komputer lokal kita, seperti mencari gambar berdasarkan ukuran atau perkiraan nama.

6. Server Lain yang Menarik & Tempat Mencari Server MCP

Tentu aja masih banyak server MCP lain yang keren buat dijelajahi. Beberapa yang menurutku menarik disebutin:

• Slack MCP: Mungkin buat ngirim komen sarkas otomatis ke PM pas lagi pusing sama request fitur susah? Hehe, becanda.
• Git MCP: Buat baca data repo, checkout branch, liat diff, dll dari AI.
• Magic MCP: Buat bikin component UI level dewa.
• Cloudflare MCP: Buat ngatur KV storage, Workers, Queues, dll.
• Stripe MCP: Wah, ini ngeri-ngeri sedap, AI ngatur duit kita (atau lebih tepatnya, interaksi dengan API Stripe). 😅

Masih banyak lagi pastinya. Kamu bisa nemuin server-server ini di beberapa direktori:

• Direktori MCP di dalam Cursor
• Direktori/Repo Server Resmi Anthropic/MCP (Ini repo utama server dari tim MCP)
• Repo GitHub Awesome MCP Servers (Kumpulan server dari komunitas)
• Situs mcp.so

Penutup

Gimana, temen-temen? Walaupun namanya serem (Model Context Protocol), sebenernya MCP ini konsepnya lumayan lurus kok. Dan cara pakenya juga gampang, biasanya cuma nambahin beberapa baris JSON ke file konfigurasi aplikasi host (seperti Cursor atau Claude Desktop).

Tertarik nyobain MCP? Atau pengen tau lebih dalam soal topik ini? Misalnya:

• Penasaran pengen bikin client atau server MCP sendiri?
• Mau tutorial langkah demi langkah setup MCP di Cursor (buat global atau per-project)?
• Pengen tau tips server MCP lain yang berguna?

Kasih tau aja di kolom komentar ya! Aku pengen denger pendapat kalian!

Sekian dulu ya buat kali ini. Semoga tulisan ini bermanfaat dan bikin kalian nggak bingung lagi sama MCP. Terimakasih udah baca sampe akhir dan sampai jumpa di tulisan berikutnya! 👋