Tutorial MCP Server: Integrasi AI Agent Step-by-Step

Model Context Protocol (MCP) adalah protokol terbuka dari Anthropic yang memungkinkan AI agent terhubung langsung dengan sumber data eksternal, database, dan tools. Alih-alih memasukkan data manual ke prompt, MCP membuat AI bisa fetch data real-time secara aman. Dalam tutorial ini, kita akan membangun MCP server sederhana menggunakan TypeScript dan menghubungkannya ke Claude Desktop.

1. Persiapan Environment dan Tools

Sebelum mulai, pastikan kamu sudah menginstall:

Node.js LTS dan npm/yarn/pnpm
TypeScript (npm install -g typescript)
Claude Desktop atau client MCP lainnya
Editor favorit (VS Code atau Cursor)

Buat folder baru dan inisialisasi project:

mkdir my-mcp-server && cd my-mcp-server
npm init -y
npm install @modelcontextprotocol/sdk zod
tsc --init

Sumber referensi lengkap tersedia di dokumentasi resmi MCP.

2. Membuat Struktur Project MCP Server

MCP server bekerja dengan model server-client menggunakan stdio transport. Buat file src/index.ts dengan struktur dasar:

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

const server = new Server({
  name: "demo-server",
  version: "1.0.0",
}, { capabilities: { tools: {} } });

const transport = new StdioServerTransport();
server.connect(transport);

Kode di atas membuat server yang mampu menerima request dari client melalui standard input/output.

3. Implementasi Tools dan Resources

Tambahkan tools yang bisa dipanggil AI. Misalnya, tool untuk membaca status sistem:

server.setRequestHandler("tools/list", async () => {
  return {
    tools: [
      {
        name: "get_system_status",
        description: "Ambil status CPU dan memory server",
        inputSchema: z.object({}).shape,
      },
    ],
  };
});

server.setRequestHandler("tools/call", async (request) => {
  if (request.params.name === "get_system_status") {
    return {
      content: [
        { type: "text", text: JSON.stringify({ cpu: "45%", memory: "2GB/8GB" }) },
      ],
    };
  }
  throw new Error("Tool tidak ditemukan");
});

Tools ini akan muncul sebagai opsi ketika AI membutuhkan data eksternal. Kamu juga bisa menambahkan resources untuk memberikan konteks file atau database.

4. Koneksi ke Client (Claude Desktop / Cursor)

Setelah server jalan, hubungkan ke Claude Desktop dengan menambahkan konfigurasi di claude_desktop_config.json:

{
  "mcpServers": {
    "demo-server": {
      "command": "node",
      "args": ["/path/to/my-mcp-server/dist/index.js"]
    }
  }
}

Restart Claude Desktop. Kamu akan melihat tool get_system_status tersedia di sidebar. Cursor juga mendukung MCP melalui setting .cursor/mcp.json.

5. Testing dan Debugging

Jalankan server secara manual untuk debug:

npx ts-node src/index.ts

Gunakan console.error() untuk logging karena stdout sudah dipakai oleh MCP transport. Periksa koneksi dengan inspector MCP atau tool serupa. Jika terjadi error JSON parse, pastikan tidak ada log yang masuk ke stdout selain format MCP protocol.

Kesimpulan

Model Context Protocol membuka peluang besar dalam membangun ekosistem AI yang interoperable. Dengan MCP server sendiri, kamu bisa menghubungkan internal tools, CRM, database PostgreSQL, atau API internal ke AI agent tanpa membuka data sensitif ke model pihak ketiga. Sumber tutorial asli bisa kamu pelajari lebih dalam di GitHub MCP Servers dan MCP Documentation.

Tutorial MCP Server: Membangun Integrasi AI Agent dari Nol