Model Context Protocol (MCP)

Menghubungkan AI dengan Dunia Nyata

Oleh: [Nama Kamu]

Apa itu MCP?

  • Protokol Terbuka: Standar baru untuk menghubungkan model AI dengan data dan tools.
  • Universal: Satu cara untuk semua AI (Claude, ChatGPT, IDEs) berbicara dengan sistem luar.
  • Keamanan: Memberikan kontrol penuh kepada pengguna atas data apa yang bisa diakses AI.

Tradisional API vs MCP

Tradisional API

  • Dibuat untuk dikonsumsi Software/Aplikasi.
  • Format data kaku (JSON/XML).
  • AI butuh "Integrasi Khusus" per platform.
  • AI tidak tahu cara pakai API tanpa dokumentasi manual.

MCP

  • Dibuat untuk dikonsumsi AI (LLM).
  • Self-describing (AI tahu fungsi & inputnya sendiri).
  • Satu integrasi, bisa dipakai di semua AI Host.
  • AI bisa eksplorasi data secara dinamis.

Sejarah Singkat

Dulu, setiap kali kita ingin AI mengakses data (misal: Google Drive), developer harus membuat integrasi khusus untuk setiap AI.

  • November 2024: Anthropic merilis spesifikasi MCP pertama kali.
  • Tujuan: Mengakhiri era "integrasi kustom" yang melelahkan dan menciptakan ekosistem yang bisa digunakan bersama.

Mengapa Kita Butuh MCP?

Standarisasi

Developer cukup bikin satu Server MCP, bisa dipakai di mana saja.

Konteks Real-time

AI bisa "melihat" data terbaru, bukan cuma data training lama.

Eksekusi Aksi

Bukan cuma tanya jawab, AI bisa melakukan aksi (booking, kirim email, edit file).

Fundamental MCP

Host (Claude/ChatGPT)
↔ MCP Protocol ↔
MCP Server (Database/API)

Bagaimana Mereka Berbicara?

Ada dua cara utama (Transport):

Bisa Dipakai Apa Saja?

🎨 Design: Figma (Ambil komponen, update desain).
📊 Productivity: Google Drive, Slack, Notion.
💻 Development: GitHub, Database (Postgres/Prisma).
🛠️ Custom: Travelan App (Booking Hotel via AI).

Persiapan & Instalasi

# 1. Install MCP SDK
npm install @modelcontextprotocol/sdk

# 2. (Opsional) Install Inspector untuk debugging
npm install -g @modelcontextprotocol/inspector

Requirements: Node.js v18+ atau Python 3.10+.

Build Your Own MCP (Server Setup)

// 1. Inisialisasi Server
const server = new Server({
  name: "my-mcp-server",
  version: "1.0.0"
}, {
  capabilities: { tools: {} }
});

// 2. Daftarkan Tool
server.setRequestHandler(
  ListToolsRequestSchema, 
  async () => ({
    tools: [/* toolDefinitions */]
  })
);

Server: Menentukan identitas dan kemampuan server.

// 3. Handle Eksekusi
server.setRequestHandler(
  CallToolRequestSchema, 
  async (request) => {
    const { name, arguments: args } = request.params;
    return await handleToolCall(name, args);
  }
);

// 4. Connect Transport
const transport = new StdioServerTransport();
await server.connect(transport);

Execution: Menghubungkan request AI ke fungsi asli kita.

Testing & Debugging

# Test via CLI (Stdio)
npx @modelcontextprotocol/inspector node dist/index.js

# Test via ChatGPT/Claude
# 1. Deploy ke URL (misal: Vercel)
# 2. Masukkan URL SSE ke konfigurasi Custom GPT / Claude Desktop

Gunakan MCP Inspector untuk mencoba tool secara manual sebelum dihubungkan ke AI.

OAuth & Security (Protected Tools)

AI Call Tool
→ 401 Unauthorized + Login URL →
User Login & Authorize
// Server merespons 401 jika butuh login
return new NextResponse(JSON.stringify({
  jsonrpc: "2.0",
  error: {
    code: 401,
    message: "Unauthorized",
    data: { 
      login_url: "https://myapp.com/oauth" 
    }
  }
}), { status: 401 });

Flow: AI akan otomatis menampilkan tombol "Login" kepada user saat menerima error 401 ini.

// Verifikasi Token di Server
const authHeader = req.headers.get("authorization");
const userId = await getUserIdFromToken(authHeader);

if (isProtected(toolName) && !userId) {
  return throw401();
}

Security: Memastikan data sensitif (seperti booking) hanya bisa diakses setelah user login.

Deep Dive: Bagaimana GPT "Login" ke App Kita?

🤖
1. AI Host (GPT)
Menyimpan Client ID & Secret kita.
🔐
2. Token Exchange
GPT menukar "Auth Code" dari user menjadi "Access Token".
💾
3. Secure Storage
Token disimpan di database terenkripsi milik OpenAI/Anthropic.

Di Mana Token Disimpan?

Bukan di browser user, tapi di Server AI Host. User tidak bisa melihat token ini secara langsung.

Bagaimana GPT Menggunakannya?

Setiap kali GPT memanggil tool, ia menyisipkan token di Header Authorization secara otomatis.

Kapan Token Expired?

GPT akan menggunakan refresh_token untuk meminta token baru tanpa mengganggu user (Background Refresh).

"Magic" Connection: Simple vs Standard

Standard OAuth (Manual)

Seperti di Custom GPT biasa:

  • Input Client ID & Secret secara manual.
  • Input Auth & Token URL satu per satu.
  • Repot untuk banyak MCP server.

Simple OAuth (Plexa Style)

Kenapa Plexa bisa cuma input URL?

  • Gateway/Hub: Menggunakan satu pintu masuk yang sudah dipercaya oleh AI Host.
  • Pre-shared Trust: OpenAI & Provider sudah punya "jabat tangan" di awal.
  • Dynamic Discovery: AI Host membaca konfigurasi auth langsung dari metadata URL.

*Untuk project Travelan, kita menggunakan Standard OAuth karena kita membangun "Pintu" sendiri dari nol.

Demo: Vibe Coding

Mari kita lihat bagaimana ChatGPT menggunakan MCP yang kita buat di Travelan App.

  • Searching Hotels
  • Booking via AI
  • Admin Stats Dashboard

Terima Kasih!

Masa Depan AI adalah Integrasi.

Ada Pertanyaan?

1 / 16