Daftar Isi:
Halo Kawan-Kawan developer! Gimana kabarnya? Kembali pada ngoprek apa nih? Hehe.
Belakangan ini, mungkin kalian sering lihat atau mendengar istilah “MCP” berseliweran di sosmed, tapi Lagi kebingungan itu istilah apa sebenarnya? Lanjut, gunanya buat kita sebagai web developer apa? Nah, pada tulisan kali ini, Saya 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 (Normal disebut tools) di sistem.
Sebelum Eksis 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 Adalah Bisa jadi ribet kalau mau sharing solusi antar tim atau antar sistem, soalnya nggak Eksis standarnya.
Nah, karena masalah itu, Anthropic (iya, yang bikin Claude AI) akhirnya bikin standar ini, si MCP. Tujuannya biar Eksis Langkah yang sama dan gampang buat ngehubungin LLM sama dunia luar.
Kalau mau liat arsitektur dasarnya, Bisa cek diagram dari dokumentasi resminya ini.
Lanjut, maksudnya apa nih? Intinya, MCP itu punya 3 bagian Istimewa:
- Clients (Klien): Ini biasanya aplikasi atau host yang kita pake, yang udah Eksis MCP client-nya di dalem.
- Server (Server): Ini jembatannya. Dia yang nerima perintah dari client, ngobrol sama sumber data/API luar, Lanjut balikin hasilnya ke client.
- 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, Engkau Kembali pake Cursor. Nah, Cursor ini Bisa dibilang sebagai host karena dia udah punya client MCP di dalamnya. Lanjut, Engkau juga udah install server MCP buat Atlassian (Jira) di Cursor. Server ini Bisa Engkau temuin di direktori MCP Formal Anthropic atau di repo awesome-mcp-servers. Lanjut, Lanjut Engkau minta tolong AI-nya, “Eh, bantuin dong bikin langkah-langkah buat nyelesain tiket Jira nomor #XYZ-123“.
Gimana alurnya pake MCP Server?
- Si client MCP di Cursor ngirim perintah ke server MCP Jira yang udah Engkau install.
- Si server ini Lanjut manggil tool
jira_issue(misalnya) buat minta data tiket#XYZ-123ke Jira REST API. - Jira API ngasih jawaban (data tiketnya).
- Jawaban dari API ini diterusin Kembali sama si server ke client di Cursor.
- 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 Bermanfaat Buat Kita Web Developer?
Ini nih pertanyaan paling Krusial. 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 Hanya Cursor kok, client MCP juga udah Eksis 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 Lagi banyak Kembali, Bisa liat di repo awesome-mcp-client.
Karena client-nya udah Eksis di tools yang mungkin udah kita pake, kita jadi Bisa langsung manfaatin banyak banget server MCP yang udah tersedia.
Server MCP apa aja yang Bermanfaat buat kita?
1. Masukin Info Tiket (Jira, Asana, dll) ke sebuah Context AI di IDE
Ini Misalnya yang tadi udah disinggung. Kita Bisa bikin AI di Cursor (misalnya) ngerti konteks task atau bug yang Kembali 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 Nikmat Kembali kalau AI-nya jalan di mode agent, dia Bisa inisiatif sendiri buat ngambil info tambahan dari tiket kalau dirasa perlu. Eksis juga server buat Google Docs atau Notion kalau info tambahannya Eksis di sana.
2. Ubah Desain Figma Jadi Kode
Selain bantu kerja tim, MCP juga Bisa bantu urusan frontend. Eksis server MCP buat Figma yang katanya Bisa bantu AI (seperti di Cursor) buat langsung generate kode dari desain Figma. Klaimnya, hasilnya Bisa lebih Presisi daripada kita Hanya paste screenshot desainnya doang.
Kalian Bisa liat aksinya di video YouTube dari Graham Lipsman ini.
Kalau dari yang Saya liat, ini emang bukan solusi Luar Normal yang sekali klik langsung jadi sempurna, tapi lumayan banget buat langkah awal project.
3. Kerja Sama Database Jadi Lebih Nikmat
MCP nggak Hanya buat frontend aja lho. Kalau Engkau ngurusin backend yang berhubungan sama database, Eksis banyaaak server MCP yang Bisa nyambung, baca, nulis, atau query ke database Terkenal. Ini beberapa contohnya:
Kalau Engkau pake Backend as a Service (BaaS) seperti Supabase atau Firebase, Eksis juga server-nya!
Gimana ini Bisa bantu? Wah, banyak caranya!
- Kalau skema database Engkau 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 Engkau. Jadi saran kodenya Bisa lebih pas.
- Yang lebih keren Kembali, Engkau Bisa nanya-nanya soal data Engkau, 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 Mekanis, 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 Terjamin!). 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 Lagi banyak server MCP lain yang keren buat dijelajahi. Beberapa yang menurutku menarik disebutin:
- Slack MCP: Mungkin buat ngirim komen sarkas Mekanis ke PM pas Kembali 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). 😅
Lagi banyak Kembali pastinya. Engkau Bisa nemuin server-server ini di beberapa direktori:
Penutup
Gimana, temen-temen? Walaupun namanya serem (Model Context Protocol), sebenernya MCP ini konsepnya lumayan lurus kok. Dan Langkah pakenya juga gampang, biasanya Hanya 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 Dunia atau per-project)?
- Pengen tau tips server MCP lain yang Bermanfaat?
Kasih tau aja di kolom komentar ya! Saya pengen denger pendapat kalian!
Sekian dulu ya buat kali ini. Semoga tulisan ini bermanfaat dan bikin kalian nggak bingung Kembali sama MCP. Terimakasih udah baca sampe akhir dan Tiba jumpa di tulisan berikutnya! 👋