MCP — Model Context Protocol Lengkap + Cara Setup

Apa itu MCP?

MCP (Model Context Protocol) adalah protokol standar yang memungkinkan Large Language Model (LLM) seperti Claude, ChatGPT, atau Grok untuk berinteraksi langsung dengan aplikasi eksternal, sistem, dan layanan pihak ketiga.

Bayangkan MCP seperti USB-C universal untuk AI — satu protokol yang bisa menghubungkan AI ke berbagai aplikasi:

• Browser Chrome
• Google Drive, Figma
• Database, GitHub
• Aplikasi internal perusahaan

Tanpa MCP, AI hanya bisa “bercerita” berdasarkan teks yang kamu kasih. Dengan MCP, AI bisa melihat data real-time, mengambil tindakan, dan memberikan jawaban yang benar-benar kontekstual.

---

Kenapa MCP Penting?

Sebelum MCP:  
AI → "Tolong cek performa websitenya"  
AI → "Maaf, saya tidak bisa akses website secara langsung."

Setelah MCP:  
AI → "Tolong cek performa websitenya"  
AI → ✅ "Saya sudah cek via Chrome DevTools. Loading time 3.2s, ada 5 gambar belum di-optimize."

MCP membuat AI 10x lebih berguna untuk:

• Developer (debugging, code review)
• Product Manager (cek UI/UX real-time)
• Data Analyst (akses database langsung)
• Operations (monitoring server)

---

Cara Kerja MCP (Diagram Sederhana)

┌─────────────┐    ┌──────────────┐    ┌─────────────────┐
│   Your AI   │◄──►│   MCP        │◄──►│ External Apps   │
│ (Claude/Grok│    │ Server       │    │ Chrome/Figma/   │
│  ChatGPT)   │    │ (Bridge)     │    │  Database/Git   │
└─────────────┘    └──────────────┘    └─────────────────┘

Alur kerjanya:

1. Kamu tanya AI → “Cek performa website”
2. AI kirim permintaan ke MCP Server
3. MCP Server jalankan perintah di aplikasi eksternal
4. Hasil dikirim balik ke AI → Kamu dapat jawaban akurat

---

Jenis MCP Server Populer

Berikut beberapa MCP server yang paling sering digunakan:

1. Chrome DevTools MCP

Fungsi: AI bisa akses Chrome Developer Tools secara langsung.
Kegunaan: Cek performa website, analisis DOM, screenshot halaman.

2. Context7

Fungsi: Dokumentasi dan tracking update aplikasi.
Kegunaan: AI bisa baca changelog, track versi fitur.

3. Figma Context MCP

Fungsi: AI bisa akses file Figma.
Kegunaan: Review UI/UX design, generate kode dari Figma.

---

Konfigurasi MCP Server Lengkap

Simpan sebagai mcp.json:

{
  "mcpServers": {
    "chrome-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--isolated"
      ],
      "autoApprove": [
        "take_snapshot",
        "navigate_page",
        "list_console_messages",
        "take_screenshot"
      ]
    },
    "context7": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp",
        "--api-key",
        "YOUR_CONTEXT7_API_KEY"
      ]
    },
    "github.com/GLips/Figma-Context-MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=YOUR_FIGMA_API_KEY",
        "--stdio"
      ],
      "disabled": false,
      "autoApprove": [
        "get_figma_data"
      ]
    }
  }
}

---

Cara Setup MCP (Langkah Demi Langkah)

Prasyarat

Node.js 18+ ✅
Chrome Browser ✅
API Keys (Context7, Figma) ✅

1. Install Dependencies

npm install -g npx
# Atau langsung pakai npx (sudah include)

2. Jalankan Server

# Chrome DevTools MCP
npx -y chrome-devtools-mcp@latest --isolated

# Context7 MCP
npx -y @upstash/context7-mcp --api-key=YOUR_API_KEY

# Figma MCP (Windows)
cmd /c "npx -y figma-developer-mcp --figma-api-key=YOUR_FIGMA_KEY --stdio"

3. Hubungkan ke AI Client

Claude Desktop / Cursor / VSCode → Settings → MCP Server URL
http://localhost:8080/mcp

---

Contoh Penggunaan Nyata

Debugging Website

User: "Websiteku lambat di mobile, cek dong"
AI: ✅ "Chrome DevTools check:
     - Largest Contentful Paint: 4.2s ❌
     - 8 gambar > 500KB belum di-compress
     - CSS file 245KB bisa di-minify jadi 89KB"

Figma Design Review

User: "Review landing page Figma"
AI: ✅ "Figma data analysis:
     - Button spacing tidak konsisten (12px vs 16px)
     - Primary color #FF5733 kontras ratio 3.2:1 (minimal 4.5:1)
     - Text hierarchy kurang jelas"

Context Tracking

User: "Update terakhir fitur login?"
AI: ✅ "Context7 log:
     v2.3.1 (3 hari lalu): 
     + 2FA support
     + Fix forgot password race condition
     - Performance 12% lebih cepat"

---

Troubleshooting Umum

Error	Solusi
port already in use	killall node atau ganti port
Chrome not found	Install Chrome stable
API key invalid	Regenerate di dashboard
Permission denied	Tambah ke autoApprove[]

---

Tips Keamanan & Best Practices

✅ Yang Harus Dilakukan:

- Selalu gunakan --isolated mode
- Batasi autoApprove hanya perintah aman
- Jangan commit API key ke Git
- Monitor memory usage Chrome DevTools

❌ Jangan:

- Jalankan di production tanpa auth
- Berikan akses database production
- Auto-approve semua perintah

---

Daftar MCP Server Lainnya

Server	Fungsi	Command
Filesystem MCP	Baca/tulis file lokal	filesystem-mcp
GitHub MCP	Clone repo, PR review	github-mcp
PostgreSQL MCP	Query database	postgres-mcp
Slack MCP	Kirim notifikasi	slack-mcp

---

Kesimpulan

MCP = AI yang Bisa Bekerja Nyata, Bukan Cuma Ngobrol.

Dengan satu file mcp.json, kamu ubah AI biasa jadi super assistant yang:

• ✅ Debug website real-time
• ✅ Review Figma design
• ✅ Track changelog aplikasi
• ✅ Akses database langsung