วิธีสร้างเซิร์ฟเวอร์ MCP (Model Context Protocol): คู่มือสำหรับผู้เริ่มต้น

```html

ลองนึกภาพการมอบความสามารถให้ผู้ช่วย AI ของคุณในการดึงข้อมูลสภาพอากาศ วิเคราะห์ราคาหุ้น หรือทำงานอัตโนมัติ—ทั้งหมดนี้ผ่านโปรโตคอลเดียว Model Context Protocol (MCP) ทำให้สิ่งนี้เป็นไปได้ และด้วย MCP Framework ใหม่ การสร้างเซิร์ฟเวอร์ของคุณเองทำได้ง่ายกว่าที่เคย

ในคู่มือนี้ ผมจะแนะนำคุณตลอดการสร้างเซิร์ฟเวอร์ MCP โดยใช้เครื่องมือ CLI ของ MCP Framework ไม่จำเป็นต้องมีประสบการณ์ MCP มาก่อน—เพียงแค่มีความรู้พื้นฐานเกี่ยวกับ JavaScript/TypeScript และความอยากรู้อยากเห็นเล็กน้อย!

ทำความเข้าใจ MCP

ก่อนที่จะเจาะลึกการตั้งค่า มาดูภาพรวมสั้นๆ ว่า MCP คืออะไรและทำไมมันถึงสำคัญ:

ภาพรวม MCP: The Model Context Protocol เป็นข้อกำหนดแบบเปิดที่สร้างขึ้นโดย Anthropic เพื่อกำหนดมาตรฐานว่าโมเดล AI โต้ตอบกับแหล่งข้อมูลภายนอกอย่างไร ช่วยให้นักพัฒนาสร้างเครื่องมือที่สามารถผสานรวมกับแพลตฟอร์ม AI เช่น Claude Desktop ได้อย่างง่ายดาย

ประโยชน์ของ MCP: MCP ทำให้กระบวนการผสานรวมง่ายขึ้นโดยการจัดหาโปรโตคอลมาตรฐานสำหรับการพัฒนาเครื่องมือ ซึ่งหมายความว่าคุณสามารถมุ่งเน้นไปที่การสร้างเครื่องมือโดยไม่ต้องกังวลเกี่ยวกับปัญหาความเข้ากันได้ในแพลตฟอร์มต่างๆ

การสร้างเซิร์ฟเวอร์ MCP เครื่องแรกของคุณ

ขั้นตอนที่ 1: สิ่งที่คุณจะต้องมี

ก่อนเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งสิ่งต่อไปนี้แล้ว:

• Node.js (20 หรือสูงกว่า): เซิร์ฟเวอร์สร้างขึ้นบน Node.js ดังนั้นคุณจะต้องติดตั้ง ดาวน์โหลดที่นี่
• TypeScript (5.0 หรือใหม่กว่า): ใช้สำหรับการสร้างเซิร์ฟเวอร์ของคุณ
• npm: ตัวจัดการแพ็คเกจเพื่อจัดการการพึ่งพา
• MCP Framework: สามารถติดตั้งทั่วโลกผ่าน npm หรือเพิ่มลงในโปรเจ็กต์ที่มีอยู่
• ความอดทน 10 นาที: อย่างจริงจัง มันเร็วขนาดนั้น

ขั้นตอนที่ 2: ติดตั้ง MCP Framework

มีสองวิธีในการเริ่มต้นใช้งาน MCP Framework:

ตัวเลือกที่ 1: การใช้ MCP CLI (แนะนำ)

วิธีที่ง่ายที่สุดในการตั้งค่าเซิร์ฟเวอร์ MCP คือการใช้ CLI นี่คือวิธีการ:

# ติดตั้ง CLI ทั่วโลก  
npm install -g mcp-framework  

# สร้างโปรเจ็กต์ใหม่  
mcp create my-mcp-server  

# นำทางไปยังโปรเจ็กต์ของคุณ  
cd my-mcp-server  

# ติดตั้งการพึ่งพา  
npm install 

สิ่งนี้จะสร้างโครงสร้างเซิร์ฟเวอร์ MCP ที่พร้อมใช้งานพร้อม: TypeScript ที่กำหนดค่าไว้ล่วงหน้า ตัวอย่างเครื่องมือ และการจัดการข้อผิดพลาดในตัว ควรมีลักษณะดังนี้:

ตอนนี้ โปรเจ็กต์ MCP ใหม่ของคุณพร้อมใช้งานแล้ว

ตัวเลือกที่ 2: การติดตั้งด้วยตนเอง (สำหรับโปรเจ็กต์ที่มีอยู่)

หากคุณต้องการเพิ่ม MCP Framework ลงในโปรเจ็กต์ที่มีอยู่ ให้ทำตามขั้นตอนเหล่านี้:

ติดตั้ง MCP Framework:

npm install mcp-framewor

สร้างเซิร์ฟเวอร์พื้นฐาน ภายในไฟล์ src/index.ts:

import { MCPServer } from "mcp-framework";  

const server = new MCPServer();  

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

ขั้นตอนที่ 3: การสร้างเครื่องมือแรกของคุณ (ตัวอย่างสภาพอากาศ)

ตอนนี้เซิร์ฟเวอร์ของคุณถูกตั้งค่าแล้ว มาสร้าง เครื่องมือสภาพอากาศ ที่ดึงข้อมูลสภาพอากาศสำหรับเมืองที่กำหนด

สร้างเครื่องมือใหม่:

การใช้ MCP CLI คุณสามารถสร้างเครื่องมือใหม่สำหรับข้อมูลสภาพอากาศได้:

mcp add tool weather  

สิ่งนี้จะสร้างไฟล์ชื่อ src/tools/WeatherTool.ts หรือคุณสามารถสร้างไฟล์นั้นด้วยตนเองก็ได้ ตอนนี้ มาแก้ไขไฟล์นั้นกัน

แก้ไขเครื่องมือสภาพอากาศ:

เปิดไฟล์ WeatherTool.ts และอัปเดตดังนี้:

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;

ในโค้ดนี้ เรากำหนดคลาส WeatherTool ที่ดึงสภาพอากาศสำหรับเมือง ในขณะที่การใช้งานจำลองนี้ส่งคืนข้อมูลแบบคงที่ คุณสามารถแทนที่ด้วยการเรียก API จริงได้

ขั้นตอนที่ 4: สร้างและทดสอบเซิร์ฟเวอร์ MCP ของคุณ

หลังจากแก้ไขเครื่องมือสภาพอากาศแล้ว ก็ถึงเวลาสร้างและทดสอบเพื่อดูว่าเซิร์ฟเวอร์ MCP ของคุณทำงานตามที่คาดไว้หรือไม่ และสำหรับสิ่งนั้น เราจะใช้ MCP inspector

สร้างโปรเจ็กต์:

npm run build

เลือกวิธีการขนส่ง: MCP Framework รองรับการขนส่งสองแบบ:

• STDIO Transport: เหมาะที่สุดสำหรับการรวม CLI และในพื้นที่
• SSE Transport: เหมาะสำหรับเว็บแอปพลิเคชันและระบบแบบกระจาย

สำหรับบทช่วยสอนนี้ เราจะใช้ STDIO Transport ซึ่งเหมาะสำหรับการทดสอบในพื้นที่

เปิด MCP Inspector: ใช้คำสั่งต่อไปนี้:

npx @modelcontextprotocol/inspector dist/index.js  

ทดสอบเครื่องมือสภาพอากาศ:

ในการทดสอบเครื่องมือสภาพอากาศของคุณ ให้เลือกเครื่องมือ weather และป้อนเมือง เช่น "Paris"

จากนั้นดูข้อมูลสภาพอากาศจำลอง

ขั้นตอนที่ 5: เชื่อมต่อ MCP กับข้อมูลสภาพอากาศจริง

มาอัปเกรดเครื่องมือสภาพอากาศของเราเพื่อใช้ Open-Meteo’s free API - ทางเลือกอื่นที่มีประสิทธิภาพซึ่งให้การพยากรณ์เฉพาะที่โดยไม่มี API keys ในการเริ่มต้น คุณสามารถสร้างเครื่องมือใหม่และตั้งชื่อใหม่ หรือเพียงแค่แทนที่โค้ดเครื่องมือเก่าด้วยโค้ดใหม่ด้านล่าง:

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;

โค้ดยาวไปหน่อย แต่ตอนนี้ให้เน้นที่การทำให้โค้ดทำงานและสัมผัสถึงการเริ่มต้นใช้งาน MCP ใช้เวลาของคุณและใช้สิ่งนี้เป็นแนวทางตัวอย่างเพื่อช่วยให้คุณเปลี่ยนไปสู่การสร้าง MCP ที่ซับซ้อนยิ่งขึ้น

ในการทดสอบเครื่องมือ เพียงแค่เลือก:

ป้อนเมือง เช่น "Lusaka" และดูผลลัพธ์:

หวังว่าในขั้นตอนนี้ คุณจะผ่านพ้นอุปสรรคส่วนใหญ่ของการกำหนดค่าและการเรียกใช้โปรเจ็กต์ ดังนั้นการทดสอบ MCP Tool ใหม่จึงไม่ควรเป็นเรื่องท้าทายเลย!

การทำงานกับ Apidog

อย่าลืม เพิ่มประสิทธิภาพการพัฒนาเซิร์ฟเวอร์ MCP ของคุณด้วย Apidog—เครื่องมืออเนกประสงค์ที่ช่วยลดความซับซ้อนในการทดสอบ API การจำลอง และเอกสาร เริ่มต้นด้วยการสมัครใช้งานระดับฟรี จากนั้นสร้างโปรเจ็กต์เพื่อรวมศูนย์เวิร์กโฟลว์ API ของคุณ นำเข้าปลายทางของคุณเพื่อตรวจสอบคำขอ จำลองการตอบสนองด้วยเซิร์ฟเวอร์จำลองอัจฉริยะ และทำให้การทดสอบเป็นไปโดยอัตโนมัติเพื่อตรวจจับข้อบกพร่องที่ซ่อนอยู่แต่เนิ่นๆ Apidog ปรับปรุงการแก้ไขข้อบกพร่องและทำให้มั่นใจได้ว่าเครื่องมือของคุณทำงานได้อย่างไร้ที่ติ ทำให้เป็นคู่หูที่สมบูรณ์แบบสำหรับการสร้างการผสานรวม AI ที่แข็งแกร่ง

บทสรุป

การสร้าง MCP Server เป็นกระบวนการที่ไม่ซับซ้อนซึ่งสามารถปรับปรุงเวิร์กโฟลว์ AI ของคุณได้อย่างมาก ด้วยการรวมเครื่องมือต่างๆ เช่น Apidog คุณสามารถปรับปรุงกระบวนการพัฒนาของคุณได้ ทำให้มั่นใจได้ว่า API มีความแข็งแกร่งและมีเอกสารประกอบอย่างดี ไม่ว่าคุณจะทำงานกับบริการเว็บหรือไฟล์ในพื้นที่ MCP จะมีวิธีมาตรฐานในการเชื่อมต่อโมเดล AI กับแหล่งข้อมูลภายนอก

พร้อมที่จะยกระดับเวิร์กโฟลว์การพัฒนา API ของคุณไปอีกขั้นแล้วหรือยัง ดาวน์โหลด Apidog ฟรี วันนี้และค้นพบว่ามันสามารถเปลี่ยนเวิร์กโฟลว์ของคุณได้อย่างไร!

```