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

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

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

Baru mulai dengan Docker? Ikuti langkah ini:

# 1. Cek instalasi
docker --version

# 2. Jalankan container pertama kamu
docker run hello-world

# 3. Coba web server
docker run -d -p 8080:80 --name webserver nginx

# 4. Buka browser → http://localhost:8080

Apa itu Docker?

Docker adalah sebuah container engine yang digunakan untuk menjalankan layanan atau aplikasi di dalam sebuah wadah terisolasi yang disebut container.

🎭 Analogi Sederhana

Bayangkan Docker seperti

Mengapa Menggunakan Docker?

Dengan Docker, kita bisa dengan mudah:

• ✅ Menjalankan beberapa layanan di komputer yang sama tanpa konflik
• ✅ Mengemas aplikasi menjadi satu paket utuh yang mudah dipindahkan
• ✅ Mengotomatisasi proses deployment
• ✅ Memastikan “apa yang berjalan di laptop juga akan berjalan di server”

💡 Sederhananya: Docker membantu pengembang dan sysadmin memastikan bahwa “apa yang berjalan di laptop juga akan berjalan di server.”

🔄 Alur Kerja Docker

┌────────────┐     ┌────────────┐     ┌────────────┐
│ Dockerfile │────▶│   Image    │────▶│ Container  │
│  (resep)   │     │  (blueprint)│    │ (berjalan) │
└────────────┘     └────────────┘     └────────────┘
      │                  │                  │
      │ docker build     │ docker run       │
      └──────────────────┴──────────────────┘

Command Docker

Perintah Docker digunakan untuk mengelola image, container, dan komponen sistem lainnya.

Menampilkan versi Docker

docker --version

Mengunduh image dari Docker Hub

docker pull <nama_image>

Contoh:

docker pull nginx
docker pull mysql
docker pull python:3.10

Melihat daftar image lokal

docker images

Menjalankan container

docker run <nama_image>

Contoh lengkap:

docker run -d -p 8080:80 --name webserver nginx

Penjelasan flag:

Melihat container berjalan

docker ps

Melihat semua container (termasuk yang berhenti):

docker ps -a

Menghentikan container

docker stop <container_id>

Menghentikan semua container berjalan:

docker stop $(docker ps -q)

Menghapus container

docker rm <container_id>

Menghapus semua container yang berhenti:

docker rm $(docker ps -a -q)

Melihat log container

docker logs <container_id>

Mode live (mengikuti log secara real-time):

docker logs -f <container_id>

Masuk ke dalam container

docker exec -it <container_id> bash

Atau menggunakan sh jika bash tidak tersedia:

docker exec -it <container_id> sh

Menghapus image

docker rmi <image_id>

Membersihkan resource tidak terpakai

docker system prune

Docker Volume

Volume digunakan untuk menyimpan data secara persisten, sehingga data tidak hilang saat container dihapus.

Membuat volume

docker volume create my_volume

Melihat daftar volume

docker volume ls

Menggunakan volume saat run

docker run -d -v my_volume:/var/lib/mysql mysql:8.0

Menghapus volume

docker volume rm my_volume

Docker Network

Network memungkinkan container saling berkomunikasi.

Melihat daftar network

docker network ls

Membuat network baru

docker network create my_network

Menghubungkan container ke network

docker run -d --network my_network --name app nginx

Menghapus network

docker network rm my_network

Contoh Penerapan: Menjalankan MySQL

docker run -d \
  --name mysql-db \
  -e MYSQL_ROOT_PASSWORD=secret \
  -e MYSQL_DATABASE=mydb \
  -p 3306:3306 \
  -v mysql_data:/var/lib/mysql \
  mysql:8.0

Cek container:

docker ps

Masuk ke MySQL:

docker exec -it mysql-db mysql -u root -p

Dockerfile

Dockerfile adalah file teks berisi instruksi langkah demi langkah untuk membangun sebuah Docker image.

Analogi Sederhana

Struktur Dasar Dockerfile

# 1. Base image
FROM php:8.2-cli

# 2. Tentukan direktori kerja di dalam container
WORKDIR /app

# 3. Copy file ke container
COPY . .

# 4. Install dependency
RUN docker-php-ext-install pdo pdo_mysql

# 5. Expose port (opsional)
EXPOSE 8000

# 6. Command saat container dijalankan
CMD ["php", "artisan", "serve", "--host=0.0.0.0", "--port=8000"]

Contoh Dockerfile Python

FROM python:3.10

WORKDIR /app

COPY requirements.txt .

RUN pip install -r requirements.txt

COPY . .

EXPOSE 5000

CMD ["python", "app.py"]

Build image dari Dockerfile

docker build -t myapp:latest .

Menjalankan image yang sudah di-build

docker run -d -p 5000:5000 myapp:latest

Docker Compose

Docker Compose adalah tool untuk mendefinisikan dan menjalankan aplikasi multi-container. Dengan Docker Compose, kita bisa menjalankan banyak container dengan satu perintah.

Contoh docker-compose.yml

version: '3.8'

services:
  # Web Server
  web:
    image: nginx:latest
    ports:
      - "8080:80"
    volumes:
      - ./html:/usr/share/nginx/html
    depends_on:
      - php

  # PHP Application
  php:
    image: php:8.2-fpm
    volumes:
      - ./html:/usr/share/nginx/html

  # Database
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: rootsecret
      MYSQL_DATABASE: myapp
      MYSQL_USER: appuser
      MYSQL_PASSWORD: secret
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql

  # Redis Cache
  redis:
    image: redis:alpine
    ports:
      - "6379:6379"

volumes:
  db_data:

Perintah Docker Compose

Menjalankan semua service:

docker compose up -d

Menghentikan semua service:

docker compose down

Melihat status service:

docker compose ps

Melihat log:

docker compose logs -f

Rebuild dan restart:

docker compose up -d --build

Perbedaan Dockerfile vs Docker Compose

Tips dan Best Practices

1. Gunakan .dockerignore

Buat file .dockerignore untuk mengecualikan file yang tidak perlu:

node_modules
.git
.env
*.log

2. Jangan Jalankan sebagai Root

RUN useradd -m myuser
USER myuser

3. Multi-stage Build

# Build stage
FROM golang:1.21 AS builder
WORKDIR /app
COPY . .
RUN go build -o myapp

# Runtime stage
FROM alpine:latest
COPY --from=builder /app/myapp /usr/local/bin/
CMD ["myapp"]

4. Gunakan Specific Version Tags

Hindari menggunakan latest, gunakan version spesifik:

FROM node:20.10-alpine  # Baik
FROM node:latest        # Kurang baik

5. Manfaatkan Build Cache

Urutkan instruksi dari yang paling jarang berubah ke yang paling sering berubah:

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./    # Jarang berubah
RUN npm install          # Dependency
COPY . .                 # Sering berubah
CMD ["npm", "start"]

Ringkasan Perintah Penting

# Image
docker pull <image>        # Unduh image
docker images              # Daftar image
docker rmi <image>         # Hapus image
docker build -t name .     # Build image

# Container
docker run <image>         # Jalankan container
docker ps                  # Container berjalan
docker ps -a               # Semua container
docker stop <id>           # Hentikan container
docker rm <id>             # Hapus container
docker logs <id>           # Lihat log
docker exec -it <id> bash  # Masuk container

# Volume & Network
docker volume ls           # Daftar volume
docker network ls          # Daftar network

# Docker Compose
docker compose up -d       # Jalankan semua service
docker compose down        # Hentikan semua service
docker compose logs -f     # Lihat log semua service

# Cleanup
docker system prune        # Bersihkan resource tidak terpakai

Kesimpulan

Docker membantu developer menjalankan aplikasi secara konsisten tanpa perlu khawatir perbedaan environment. Dengan memahami command dasar, Dockerfile, dan Docker Compose, kamu sudah siap menggunakan Docker untuk development maupun deployment.

Konsep Kunci

🔧 Troubleshooting: Error yang Sering Terjadi

1. Port sudah digunakan

Error: port is already allocated

Solusi:

# Cek apa yang menggunakan port
netstat -ano | findstr :8080

# Gunakan port lain
docker run -d -p 8081:80 nginx

2. Container tidak bisa dihapus

Error: container is running

Solusi:

# Hentikan dulu, lalu hapus
docker stop <container_id>
docker rm <container_id>

# Atau force remove
docker rm -f <container_id>

3. Permission denied (Linux)

Error: permission denied while trying to connect to the Docker daemon

Solusi:

# Tambahkan user ke grup docker
sudo usermod -aG docker $USER

# Logout dan login kembali

4. No space left on device

Error: no space left on device

Solusi:

# Bersihkan semua resource tidak terpakai
docker system prune -a

# Lihat penggunaan disk
docker system df

5. Image tidak ditemukan

Error: image not found

Solusi:

# Pull image terlebih dahulu
docker pull <nama_image>

# Atau cek nama image yang benar
docker images

📋 Skenario Praktis

Skenario 1: Setup Development Web Server

# Jalankan Nginx untuk development
docker run -d \
  --name dev-web \
  -p 8080:80 \
  -v $(pwd)/html:/usr/share/nginx/html \
  nginx:alpine

# Edit file di folder html/ dan refresh browser

Skenario 2: Database Sementara untuk Testing

# Jalankan PostgreSQL untuk testing
docker run -d \
  --name test-db \
  -e POSTGRES_PASSWORD=test \
  -e POSTGRES_DB=testdb \
  -p 5432:5432 \
  postgres:15-alpine

# Connect ke database
docker exec -it test-db psql -U postgres -d testdb

# Hapus setelah selesai (data akan hilang)
docker rm -f test-db

Skenario 3: Menjalankan Aplikasi Node.js

# Struktur folder
# my-app/
# ├── Dockerfile
# ├── package.json
# └── index.js

# Dockerfile
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

# Build dan jalankan
docker build -t my-node-app .
docker run -d -p 3000:3000 my-node-app

📚 Perintah Lengkap (Cheat Sheet)

Image Commands

Container Commands

Docker Compose Commands

🎉 Selamat belajar Docker! Mulailah dengan project kecil dan tingkatkan secara bertahap.

Ini adalah post pertama di blog catatan pribadi saya. Saya menggunakan:

• Jekyll - Static site generator
• Minimal Mistakes - Tema yang fleksibel dan keren
• GitLab Pages - Hosting gratis

Mengapa Jekyll?

Jekyll sangat cocok untuk:

1. Blog pribadi - Mudah menulis dalam Markdown
2. Catatan belajar - Organisasi dengan kategori dan tag
3. Portofolio - Tampilan profesional
4. Gratis hosting - Bisa di GitLab Pages atau GitHub Pages

Fitur Minimal Mistakes

Tema ini memiliki banyak fitur:

• Responsive design
• SEO friendly
• Dark mode support
• Search functionality
• Comment system
• Dan masih banyak lagi!

# Contoh code highlighting
def hello_world
  puts "Hello, Jekyll!"
end

“Jekyll adalah cara yang bagus untuk membuat website statis dengan mudah.” - Someone

Terima kasih sudah mengunjungi blog saya! 🎉