Apidog

منصة تطوير API تعاونية متكاملة

تصميم API

توثيق API

تصحيح أخطاء API

محاكاة API

اختبار API الآلي

كيفية بناء خادم بروتوكول سياق النموذج (MCP): دليل للمبتدئين

@apidog

@apidog

Updated on مارس 13, 2025

تخيل أن تعطي مساعد الذكاء الاصطناعي الخاص بك القدرة على جلب بيانات الطقس، وتحليل أسعار الأسهم، أو أتمتة المهام - كل ذلك من خلال بروتوكول واحد. إن بروتوكول سياق النموذج (MCP) يجعل ذلك ممكنًا، ومع إطار عمل MCP الجديد، أصبح بناء خادمك الخاص أسهل من أي وقت مضى.

في هذا الدليل، سأرشدك خطوة بخطوة لإنشاء خادم MCP باستخدام أدوات سطر الأوامر الخاصة بإطار عمل MCP. لا تحتاج إلى خبرة سابقة في MCP - فقط معرفة أساسية بلغة JavaScript/TypeScript ورشة من الفضول!

💡
هل أنت مستعد لترقية تطوير MCP الخاص بك إلى المستوى التالي؟ قم بتحميل Apidog مجانًا اليوم واكتشف كيف يمكن أن تحول سير عملك!
صورة Apidog الكل في واحد
button

فهم MCP

قبل الغوص في الإعداد، دعنا نغطي بسرعة ما هو MCP ولماذا هو مهم:

نظرة عامة على MCP: بروتوكول سياق النموذج هو مواصفة مفتوحة أنشأتها شركة Anthropic لتوحيد كيفية تفاعل نماذج الذكاء الاصطناعي مع مصادر البيانات الخارجية. ويسمح للمطورين بإنشاء أدوات يمكن دمجها بسهولة مع منصات الذكاء الاصطناعي مثل Claude Desktop.

صورة MCP

فوائد MCP: يقوم MCP بتبسيط عملية الدمج من خلال توفير بروتوكول موحد لتطوير الأدوات. وهذا يعني أنه يمكنك التركيز على بناء الأدوات دون القلق بشأن مشكلات التوافق عبر منصات مختلفة.

بناء خادم MCP الأول

الخطوة 1: ماذا ستحتاج

قبل أن تبدأ، تأكد من تثبيت ما يلي:

  • Node.js (20 أو أعلى): الخادم مبني على Node.js، لذا ستحتاج إلى تثبيته. قم بتنزيله من هنا
  • TypeScript (5.0 أو أحدث): يتم استخدام ذلك لبناء خادمك.
  • npm: مدير حزم للتعامل مع الاعتمادات.
  • إطار عمل MCP: يمكن تثبيته عالميًا عبر npm أو إضافته إلى مشروع موجود.
  • 10 دقائق من الصبر: جاد، إنها سريعة للغاية

الخطوة 2: تثبيت إطار عمل MCP

هناك طريقتان للبدء مع إطار عمل MCP:

الخيار 1: استخدام سطر الأوامر MCP (موصى به)

أسهل طريقة لإعداد خادم MCP هي استخدام سطر الأوامر. إليك كيف يمكنك القيام بذلك:

# تثبيت سطر الأوامر عالميًا  
npm install -g mcp-framework  

# إنشاء مشروع جديد  
mcp create my-mcp-server  

# انتقل إلى مشروعك  
cd my-mcp-server  

# تثبيت الاعتمادات  
npm install 

هذا يهيئ خادم MCP جاهز للاستخدام مع: TypeScript مكون مسبقًا، أدوات مثال، ومعالجة أخطاء مدمجة. يجب أن يبدو شيئًا مثل هذا:

هيكل ملف خادم MCP

الآن، مشروع MCP الجديد الخاص بك جاهز للعمل.

الخيار 2: التثبيت اليدوي (للمشاريع الموجودة)

إذا كنت تريد إضافة إطار عمل MCP إلى مشروع موجود، اتبع هذه الخطوات:

تثبيت إطار عمل MCP:

npm install mcp-framewor

إنشاء خادم أساسي داخل ملف src/index.ts:

import { MCPServer } from "mcp-framework";  

const server = new MCPServer();  

server.start().catch((error) => {  
  console.error("خادم خطأ:", error);  
  process.exit(1);  
}); 

الخطوة 3: إنشاء أداتك الأولى (مثال الطقس)

الآن بعد إعداد خادمك، دعنا نبني أداة الطقس التي تجلب معلومات الطقس لمدينة معينة.

إنشاء أداة جديدة:

باستخدام سطر الأوامر MCP، يمكنك إنشاء أداة جديدة لمعلومات الطقس:

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 = "احصل على معلومات الطقس لمدينة";  

  // التحقق من صحة الإطار باستخدام Zod  
  schema = {  
    city: {  
      type: z.string(),  
      description: "اسم المدينة (مثل لندن)",  
    },  
  };  

  async execute({ city }: WeatherInput) {  
    // استبدل هذا بدعوة API حقيقية  
    return {  
      city,  
      temperature: 22,  
      condition: "مشمس",  
      humidity: 45,  
    };  
  }  
}  

export default WeatherTool;

في هذا الرمز، نقوم بتعريف فئة WeatherTool التي تجلب طقس مدينة معينة. بينما تقوم هذه التنفيذات التجريبية بإرجاع بيانات ثابتة، يمكنك استبدالها بدعوة API حقيقية.

الخطوة 4: بناء واختبار خادم MCP الخاص بك

بعد تعديل أداة الطقس، حان الوقت لبناء واختبار مدى أداء خادم MCP الخاص بك كما هو متوقع، وسنستخدم لذلك مفتش MCP.

بناء المشروع:

npm run build

اختيار طريقة النقل: يدعم إطار عمل MCP طريقتين للنقل:

  • نقل STDIO: الأفضل لسطر الأوامر والتكاملات المحلية.
  • نقل SSE: مثالي لتطبيقات الويب والأنظمة الموزعة.

لهذا الدليل، سنستخدم نقل STDIO، الذي يعتبر مثاليًا للاختبار المحلي.

إطلاق مفتش MCP: استخدم الأمر التالي:

npx @modelcontextprotocol/inspector dist/index.js  

اختبار أداة الطقس:

لاختبار أداتك الطقس، اختر أداة weather وأدخل مدينة مثل "باريس".

اختر صورة أداة

ثم اجلب بيانات الطقس التجريبية.

اختبر صورة الأداة

الخطوة 5: ربط MCP ببيانات الطقس الحقيقية

دعنا نقوم بترقية أداة الطقس الخاصة بنا لاستخدام API المجاني من Open-Meteo - بديل قوي يقدم توقعات دقيقة محليًا بدون مفاتيح API. للبدء، يمكنك إنشاء أداة جديدة وإعطائها اسمًا جديدًا أو ببساطة استبدال كود الأداة القديم بالكود الجديد أدناه:

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 = "احصل على معلومات الطقس الحقيقية لمدينة باستخدام 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: "اسم المدينة للحصول على الطقس",
    },
  };

  async execute({ city }: WeatherApiInput): Promise<WeatherApiResponse> {
    try {
      // أولاً، احصل على الإحداثيات للمدينة
      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}' غير موجودة`);
      }

      const location = geoResponse.data.results[0];
      
      // ثم احصل على بيانات الطقس باستخدام الإحداثيات
      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;
      
      // توصيل رمز الطقس بالحالة
      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(`فشل في جلب بيانات الطقس: ${error.message}`);
      }
      throw new Error('فشل في جلب بيانات الطقس: حدث خطأ غير معروف');
    }
  }

  private getWeatherCondition(code: number): string {
    // رموز تفسير الطقس WMO (https://open-meteo.com/en/docs)
    const conditions: Record<number, string> = {
      0: "سماء صافية",
      1: "صافٍ بشكل رئيسي",
      2: "غائم جزئيًا",
      3: "غائم",
      45: "ضبابي",
      48: "ضباب متجمد",
      51: "رذاذ خفيف",
      53: "رذاذ معتدل",
      55: "رذاذ كثيف",
      61: "مطر خفيف",
      63: "مطر معتدل",
      65: "مطر غزير",
      71: "ثلوج خفيفة",
      73: "ثلوج معتدلة",
      75: "ثلوج غزيرة",
      77: "حبوب ثلج",
      80: "زخات مطر خفيفة",
      81: "زخات مطر معتدلة",
      82: "زخات مطر شديدة",
      85: "زخات ثلوج خفيفة",
      86: "زخات ثلوج غزيرة",
      95: "عاصفة رعدية",
      96: "عاصفة رعدية مع حبات برد خفيفة",
      99: "عاصفة رعدية مع حبات برد غزيرة"
    };
    
    return conditions[code] || "غير معروف";
  }
}

export default WeatherApiTool;

الكود طويل قليلاً لكن في الوقت الحالي، ركز على جعل الكود يعمل والشعور بالشروع في استخدام MCP. خذ وقتك واستخدم هذا كدليل مثال لمساعدتك على الانتقال إلى بناء مشاريع MCP أكثر تعقيدًا.

لاختبار الأداة، ببساطة اخترها:

اختر صورة أداة MCP جديدة

أدخل مدينة مثل "لوساكا"، وانظر النتائج:

عرض نتائج الأداة الجديدة

نأمل في هذه المرحلة أن تكون قد تغلبت على معظم تعقيدات التكوين وتشغيل المشروع، لذا يجب أن يكون اختبار الأداة الجديدة لامشكلة على الإطلاق!

العمل مع Apidog

لا تنسَ تعزيز تطوير خادم MCP الخاص بك باستخدام Apidog - أداة متعددة الاستخدامات تبسط اختبار واجهات برمجة التطبيقات، والمحاكاة، والتوثيق. ابدأ بالتسجيل للحصول على خطتها المجانية، ثم أنشئ مشروعًا لتوحيد سير عمل واجهات برمجة التطبيقات الخاصة بك. قم باستيراد النقاط النهائية الخاصة بك لمراقبة الطلبات، ومحاكاة الاستجابات باستخدام خوادم محاكاة ذكية، وأتمتة الاختبارات لالتقاط الأخطاء الخفية مبكرًا. يبسط Apidog تصحيح الأخطاء ويضمن أن تعمل أدواتك بسلاسة، مما يجعلها الرفيق المثالي لبناء تكاملات ذكاء اصطناعي قوية.

صورة واجهة Apidog

الخاتمة

بناء خادم MCP هو عملية بسيطة يمكن أن تعزز بشكل كبير سير عمل الذكاء الاصطناعي الخاص بك. من خلال دمج أدوات مثل Apidog، يمكنك تبسيط عملية التطوير الخاصة بك، مما يضمن واجهات برمجة تطبيقات قوية وموثقة جيدًا. سواء كنت تعمل مع خدمات الويب أو الملفات المحلية، يوفر MCP طريقة موحدة لربط نماذج الذكاء الاصطناعي بمصادر البيانات الخارجية.

هل أنت مستعد للارتقاء بسير عمل تطوير واجهة برمجة التطبيقات الخاصة بك إلى المستوى التالي؟ قم بتحميل Apidog مجانًا اليوم واكتشف كيف يمكن أن تحول سير عملك!

button