Cara Membuat Server MCP (Model Context Protocol): Panduan Pemula

Bayangkan memberikan asisten AI Anda kemampuan untuk mengambil data cuaca, menganalisis harga saham, atau mengotomatiskan tugas—semua melalui satu protokol. Model Context Protocol (MCP) memungkinkan hal ini, dan dengan MCP Framework yang baru, membangun server Anda sendiri menjadi lebih mudah dari sebelumnya.

Dalam panduan ini, saya akan memandu Anda membuat server MCP menggunakan alat CLI MCP Framework. Tidak diperlukan pengalaman MCP sebelumnya—cukup pengetahuan dasar JavaScript/TypeScript dan sedikit rasa ingin tahu!

💡

Siap untuk meningkatkan pengembangan MCP Anda ke level berikutnya? Unduh Apidog secara gratis hari ini dan temukan bagaimana ia dapat mengubah alur kerja Anda!

button

Memahami MCP

Sebelum masuk ke penyiapan, mari kita bahas secara singkat apa itu MCP dan mengapa itu penting:

Ikhtisar MCP: Model Context Protocol adalah spesifikasi terbuka yang dibuat oleh Anthropic untuk menstandarisasi cara model AI berinteraksi dengan sumber data eksternal. Ini memungkinkan pengembang untuk membangun alat yang dapat dengan mudah diintegrasikan dengan platform AI seperti Claude Desktop.

Manfaat MCP: MCP menyederhanakan proses integrasi dengan menyediakan protokol standar untuk pengembangan alat. Ini berarti Anda dapat fokus pada pembuatan alat tanpa mengkhawatirkan masalah kompatibilitas di berbagai platform.

Membangun Server MCP Pertama Anda

Langkah 1: Apa yang Anda Butuhkan

Sebelum memulai, pastikan Anda telah menginstal yang berikut:

Node.js (20 atau lebih tinggi): Server dibangun di atas Node.js, jadi Anda perlu menginstalnya. Unduh di sini
TypeScript (5.0 atau lebih baru): Ini digunakan untuk membangun server Anda.
npm: Pengelola paket untuk menangani dependensi.
MCP Framework: Ini dapat diinstal secara global melalui npm atau ditambahkan ke proyek yang ada.
10 menit kesabaran: Serius, secepat itu

Langkah 2: Instal MCP Framework

Ada dua cara untuk memulai dengan MCP Framework:

Opsi 1: Menggunakan MCP CLI (Disarankan)

Cara termudah untuk menyiapkan server MCP adalah dengan menggunakan CLI. Berikut caranya:

# Install the CLI globally  
npm install -g mcp-framework  

# Create a new project  
mcp create my-mcp-server  

# Navigate to your project  
cd my-mcp-server  

# Install dependencies  
npm install

Ini membuat kerangka server MCP siap pakai dengan: TypeScript yang telah dikonfigurasi sebelumnya, Contoh alat, dan Penanganan kesalahan bawaan. Seharusnya terlihat seperti ini:

Sekarang, proyek MCP baru Anda siap digunakan.

Opsi 2: Instalasi Manual (Untuk Proyek yang Ada)

Jika Anda ingin menambahkan MCP Framework ke proyek yang ada, ikuti langkah-langkah ini:

Instal MCP Framework:

npm install mcp-framewor

Buat server dasar di dalam file src/index.ts:

import { MCPServer } from "mcp-framework";  

const server = new MCPServer();  

server.start().catch((error) => {  
  console.error("Server error:", error);  
  process.exit(1);  
});

Langkah 3: Membuat Alat Pertama Anda (Contoh Cuaca)

Sekarang server Anda sudah siap, mari kita buat alat cuaca yang mengambil informasi cuaca untuk kota tertentu.

Buat alat baru:

Menggunakan MCP CLI, Anda dapat membuat alat baru untuk informasi cuaca:

mcp add tool weather

Ini akan menghasilkan file bernama src/tools/WeatherTool.ts. Atau, Anda bisa saja membuat file itu secara manual sendiri. Sekarang, mari kita edit file itu.

Modifikasi Alat Cuaca:

Buka file WeatherTool.ts dan perbarui seperti berikut:

import { MCPTool } from "mcp-framework";  
import { z } from "zod";  

interface WeatherInput {  
  city: string;  
}  

class WeatherTool extends MCPTool<WeatherInput> {  
  name = "weather";  
  description = "Get weather information for a city";  

  // Schema validation using Zod  
  schema = {  
    city: {  
      type: z.string(),  
      description: "City name (e.g., London)",  
    },  
  };  

  async execute({ city }: WeatherInput) {  
    // Replace this with a real API call  
    return {  
      city,  
      temperature: 22,  
      condition: "Sunny",  
      humidity: 45,  
    };  
  }  
}  

export default WeatherTool;

Dalam kode ini, kita mendefinisikan kelas WeatherTool yang mengambil cuaca untuk sebuah kota. Meskipun implementasi tiruan ini mengembalikan data statis, Anda dapat menggantinya dengan panggilan API nyata.

Langkah 4: Bangun dan Uji Server MCP Anda

Setelah memodifikasi alat cuaca, saatnya untuk membangun dan menguji untuk melihat apakah server MCP Anda berfungsi seperti yang diharapkan, dan untuk itu kita akan menggunakan inspektur MCP.

Bangun proyek:

npm run build

Pilih metode transportasi: MCP Framework mendukung dua transportasi:

Transportasi STDIO: Terbaik untuk CLI dan integrasi lokal.
Transportasi SSE: Ideal untuk aplikasi web dan sistem terdistribusi.

Untuk tutorial ini, kita akan menggunakan Transportasi STDIO, yang sempurna untuk pengujian lokal.

Luncurkan Inspektur MCP: gunakan perintah berikut:

npx @modelcontextprotocol/inspector dist/index.js

Uji Alat Cuaca:

Untuk menguji alat cuaca Anda, pilih alat weather dan masukkan kota seperti "Paris".

Kemudian lihat data cuaca tiruan.

Langkah 5: Hubungkan MCP ke Data Cuaca Nyata

Mari kita tingkatkan alat cuaca kita untuk menggunakan API gratis Open-Meteo - alternatif yang kuat yang menyediakan perkiraan hiperlokal tanpa kunci API. Untuk memulai, Anda dapat membuat alat baru dan memberinya nama baru atau cukup mengganti kode alat lama dengan kode baru di bawah ini:

import { MCPTool } from "mcp-framework";
import { z } from "zod";
import axios, { AxiosError } from "axios";

interface WeatherApiInput {
  city: string;
}

interface WeatherApiResponse {
  city: string;
  temperature: number;
  condition: string;
  humidity: number;
  windSpeed: number;
  feelsLike: number;
  precipitation: number;
}

class WeatherApiTool extends MCPTool<WeatherApiInput> {
  name = "weather_api";
  description = "Get real weather information for a city using Open-Meteo API";

  private readonly GEOCODING_URL = "https://geocoding-api.open-meteo.com/v1/search";
  private readonly WEATHER_URL = "https://api.open-meteo.com/v1/forecast";

  schema = {
    city: {
      type: z.string(),
      description: "City name to get weather for",
    },
  };

  async execute({ city }: WeatherApiInput): Promise<WeatherApiResponse> {
    try {
      // First, get coordinates for the city
      const geoResponse = await axios.get(this.GEOCODING_URL, {
        params: {
          name: city,
          count: 1,
          language: "en",
          format: "json"
        }
      });

      if (!geoResponse.data.results?.length) {
        throw new Error(`City '${city}' not found`);
      }

      const location = geoResponse.data.results[0];
      
      // Then get weather data using coordinates
      const weatherResponse = await axios.get(this.WEATHER_URL, {
        params: {
          latitude: location.latitude,
          longitude: location.longitude,
          current: ["temperature_2m", "relative_humidity_2m", "apparent_temperature", "precipitation", "weather_code", "wind_speed_10m"],
          timezone: "auto"
        }
      });

      const current = weatherResponse.data.current;
      
      // Map weather code to condition
      const condition = this.getWeatherCondition(current.weather_code);

      return {
        city: location.name,
        temperature: Math.round(current.temperature_2m),
        condition,
        humidity: Math.round(current.relative_humidity_2m),
        windSpeed: Math.round(current.wind_speed_10m),
        feelsLike: Math.round(current.apparent_temperature),
        precipitation: current.precipitation
      };
    } catch (error: unknown) {
      if (error instanceof Error) {
        throw new Error(`Failed to fetch weather data: ${error.message}`);
      }
      throw new Error('Failed to fetch weather data: Unknown error occurred');
    }
  }

  private getWeatherCondition(code: number): string {
    // WMO Weather interpretation codes (https://open-meteo.com/en/docs)
    const conditions: Record<number, string> = {
      0: "Clear sky",
      1: "Mainly clear",
      2: "Partly cloudy",
      3: "Overcast",
      45: "Foggy",
      48: "Depositing rime fog",
      51: "Light drizzle",
      53: "Moderate drizzle",
      55: "Dense drizzle",
      61: "Slight rain",
      63: "Moderate rain",
      65: "Heavy rain",
      71: "Slight snow",
      73: "Moderate snow",
      75: "Heavy snow",
      77: "Snow grains",
      80: "Slight rain showers",
      81: "Moderate rain showers",
      82: "Violent rain showers",
      85: "Slight snow showers",
      86: "Heavy snow showers",
      95: "Thunderstorm",
      96: "Thunderstorm with slight hail",
      99: "Thunderstorm with heavy hail"
    };
    
    return conditions[code] || "Unknown";
  }
}

export default WeatherApiTool;

Kodenya sedikit panjang tetapi untuk saat ini fokuslah untuk membuat kode berfungsi dan merasakan bagaimana memulai dengan MCP. Luangkan waktu Anda dan gunakan ini sebagai panduan contoh untuk membantu Anda beralih ke membangun MCP yang lebih kompleks.

Untuk menguji alat, cukup pilih:

Masukkan kota misalnya "Lusaka", dan lihat hasilnya:

Semoga pada tahap ini Anda akan mengatasi sebagian besar masalah konfigurasi dan menjalankan proyek, jadi menguji Alat MCP baru seharusnya tidak menjadi tantangan sama sekali!

Bekerja dengan Apidog

Jangan lupa untuk meningkatkan pengembangan server MCP Anda dengan Apidog—alat serbaguna yang menyederhanakan pengujian API, mocking, dan dokumentasi. Mulailah dengan mendaftar untuk tingkatan gratisnya, lalu buat proyek untuk memusatkan alur kerja API Anda. Impor titik akhir Anda untuk memantau permintaan, mensimulasikan respons dengan server mock pintar, dan mengotomatiskan pengujian untuk menangkap bug tersembunyi sejak dini. Apidog menyederhanakan debugging dan memastikan alat Anda berfungsi dengan sempurna, menjadikannya pendamping yang sempurna untuk membangun integrasi AI yang kuat.

Kesimpulan

Membangun Server MCP adalah proses langsung yang dapat secara signifikan meningkatkan alur kerja AI Anda. Dengan mengintegrasikan alat seperti Apidog, Anda dapat menyederhanakan proses pengembangan Anda, memastikan API yang kuat dan terdokumentasi dengan baik. Baik Anda bekerja dengan layanan web atau file lokal, MCP menyediakan cara standar untuk menghubungkan model AI dengan sumber data eksternal.

Siap untuk meningkatkan alur kerja pengembangan API Anda ke level berikutnya? Unduh Apidog secara gratis hari ini dan temukan bagaimana ia dapat mengubah alur kerja Anda!

button