Tutorial MCP: Membangun AI Agent dengan TypeScript

Model Context Protocol (MCP) adalah standar open source dari Anthropic yang memungkinkan AI application terhubung ke data source, tool, dan workflow eksternal secara universal. Panduan ini akan membahas cara membangun AI agent sederhana dengan MCP menggunakan TypeScript, mulai dari setup server hingga integrasi dengan client.

Apa itu MCP dan Mengapa Penting?

MCP sering diibaratkan seperti USB-C untuk aplikasi AI. Sama seperti USB-C menyediakan koneksi standar antar perangkat elektronik, MCP menyediakan protokol standar untuk menghubungkan AI ke berbagai sistem. Dengan MCP, agent bisa mengakses Google Calendar, query database, atau bahkan mengontrol Blender untuk membuat desain 3D. Developer tidak perlu lagi membuat integrasi custom untuk setiap tool.

Prasyarat

• Node.js 18 atau lebih baru

• TypeScript dan npm/pnpm

• API key dari penyedia LLM (OpenAI, Anthropic, atau model lokal)

• Code editor (VS Code direkomendasikan)

Langkah 1: Inisialisasi Project TypeScript

Buat direktori baru dan inisialisasi project:

mkdir mcp-agent && cd mcp-agent
npm init -y
npm install typescript @types/node tsx --save-dev
npx tsc --init

Kemudian install SDK MCP official:

npm install @modelcontextprotocol/sdk

SDK ini menyediakan class dan utility untuk membuat MCP server maupun client dengan cepat.

Langkah 2: Membuat MCP Server Sederhana

Buat file server.ts yang mengekspose satu tool: getWeather:

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import {
  CallToolRequestSchema,
  ListToolsRequestSchema,
} from "@modelcontextprotocol/sdk/types.js";

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

server.setRequestHandler(ListToolsRequestSchema, async () => {
  return {
    tools: [
      {
        name: "getWeather",
        description: "Get current weather for a city",
        inputSchema: {
          type: "object",
          properties: {
            city: { type: "string" },
          },
          required: ["city"],
        },
      },
    ],
  };
});

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  const { city } = request.params.arguments;
  return {
    content: [{ type: "text", text: `Weather in ${city}: 28C, Sunny` }],
  };
});

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

Server di atas menggunakan stdio transport, yang berarti berkomunikasi melalui standard input/output. Ini adalah mode paling sederhana untuk development lokal.

Langkah 3: Membuat MCP Client

Buat file client.ts yang akan menghubungkan ke server dan memanggil tool:

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";

const transport = new StdioClientTransport({
  command: "npx",
  args: ["tsx", "server.ts"],
});

const client = new Client({ name: "weather-client", version: "1.0.0" });
await client.connect(transport);

const tools = await client.listTools();
console.log("Available tools:", tools);

const result = await client.callTool({
  name: "getWeather",
  arguments: { city: "Jakarta" },
});
console.log(result);

Jalankan client dengan npx tsx client.ts. Jika berhasil, kamu akan melihat output cuaca untuk Jakarta.

Langkah 4: Integrasi dengan LLM

Agar agent benar-benar cerdas, hubungkan client dengan LLM. Gunakan library seperti @anthropic-ai/sdk atau openai:

import Anthropic from "@anthropic-ai/sdk";

const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

const msg = await anthropic.messages.create({
  model: "claude-3-5-sonnet-20241022",
  max_tokens: 1024,
  messages: [
    { role: "user", content: "What is the weather in Surabaya?" },
  ],
  tools: tools.tools.map((t) => ({
    name: t.name,
    description: t.description,
    input_schema: t.inputSchema,
  })),
});

console.log(msg);

Claude akan otomatis memutuskan kapan harus memanggil tool getWeather berdasarkan pertanyaan user. Ini adalah dasar dari agentic workflow.

Langkah 5: Menjalankan dan Debug

Pastikan environment variable ANTHROPIC_API_KEY sudah di-set. Gunakan dotenv jika perlu:

npm install dotenv
# tambahkan di atas file client.ts
import "dotenv/config";

Jika terjadi error, periksa log pada terminal server. Masalah umum meliputi path yang salah, permission denied pada npx, atau schema yang tidak valid. Dokumentasi resmi MCP menyediakan troubleshooting guide lengkap.

Kesimpulan

MCP membuka kemungkinan baru dalam membangun AI agent yang terhubung ke dunia nyata. Dengan TypeScript dan SDK official, setup bisa dilakukan dalam hitungan menit. Bagi developer Indonesia yang ingin eksplorasi AI agent, MCP adalah fondasi yang solid untuk memulai.