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?

Stdio

AI Host (IDE/CLI)
Local Pipe
MCP Server (Local)

Komunikasi via Standard Input/Output. Cocok untuk tools lokal.

HTTP + SSE

AI Host (Cloud)
Internet (HTTP/SSE)
MCP Server (Remote)

Komunikasi via Server-Sent Events. Cocok untuk aplikasi web/cloud.

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.

Anatomy of a Tool Definition

{
  name: "search_hotels",

  description: "Search for hotels by keyword
  (name, location, or description).
  Supports optional filters for city,
  max price, and minimum rating.",

  inputSchema: {
    type: "object",
    properties: {
      query: {
        type: "string",
        description: "Search keyword —
          hotel name, area, or any term"
      },
      city: { type: "string" },
      maxPrice: { type: "string" },
    },
    required: ["query"],
  },
}
name

Identifier unik tool. Harus tepat sama dengan nama fungsi yang di-handle di handleToolCall(). AI akan memanggil tool ini berdasarkan nama ini.

description

PALING PENTING. AI membaca ini untuk memutuskan kapan dan bagaimana memanggil tool. Semakin deskriptif & detail → AI semakin akurat memilih tool yang tepat.

inputSchema

Mendefinisikan struktur parameter yang diterima tool. Mengikuti JSON Schema. AI akan otomatis mengisi field ini berdasarkan konteks percakapan.

required

Array nama field yang wajib diisi. Field di luar array ini bersifat opsional — AI boleh mengisinya atau tidak. Contoh: city & maxPrice di sini opsional.

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).

Demo MCP

Mari kita eksplorasi kekuatan MCP secara langsung:

🎨 Canva MCP + ChatGPT

Generate desain banner otomatis lewat chat.

📐 Figma MCP + Vibe Coding

Ambil aset desain dan langsung jadi kode.

🏨 Custom MCP + ChatGPT

Booking hotel real-time di Travelan App.

Terima Kasih!

Masa Depan AI adalah Integrasi.

Ada Pertanyaan?

1 / 16