دروس مستفادة من بناء 20 تطبيق MCP في يومين

قام فريقي ببناء 20 تطبيق MCP في يومين. منحني هذا رؤية واضحة لما تفعله هذه الأدوات وأين تخفق.

تطبيقات MCP هي أول توسعة رسمية لمواصفات MCP. فهي تتيح للأداة إرجاع مورد واجهة مستخدم (UI) مع نتيجتها. يقوم المضيف (host) بعرض واجهة المستخدم هذه في إطار iframe معزول (sandboxed). يمكنك عرض الجداول والرسوم البيانية والنماذج مباشرة في الدردشة.

غالبًا ما تكون المعلومات المرئية أفضل من النص. الرسم البياني يتفوق على ملف CSV. وقائمة طلبات السحب (pull requests) أسهل في القراءة من كتلة نصية ضخمة.

إليك الدروس التي تعلمناها:

• التطبيقات تعيش داخل الخادم تطبيق MCP ليس رابط URL مستضافًا. يتم جلبه عبر MCP وليس عبر HTTP. يتم إرسال كود واجهة المستخدم مع خادم MCP الخاص بك.

• استخدم React و Vite استخدمنا React للاستفادة من نظام التصميم الحالي لدينا. قمنا بإعداد مشروع Vite واحد في مجلد /ui. يقوم المشروع بإخراج ملف HTML واحد لكل ملف TSX أثناء عملية البناء (build).

• النص لا يزال هو العقد الأساسي إذا كان المضيف لا يدعم تطبيقات MCP، فسيتم تجاهل خاصية واجهة المستخدم (UI). سيرى المستخدم الرد النصي فقط. لا تضع الإجابة الوحيدة في واجهة المستخدم أبدًا. إذا فعلت ذلك، فستتعطل أداتك بالنسبة للمستخدمين الذين يستخدمون واجهات الأوامر (terminal clients). صمم دائمًا كما لو أن نصف مستخدميك سيرون النص فقط.

• توقع تخطيطات غير متسقة كل مضيف ينفذ المواصفات بشكل مختلف. ChatGPT يعرض الواجهة بشكل عريض، بينما Claude يعرضها بشكل ضيق. أما الهاتف المحمول فله وضع مختلف تمامًا. صمم تخطيطات قابلة لإعادة التشكيل (reflow) عند العرض في أحجام ضيقة منذ البداية.

• حلقة التطوير (dev loop) بطيئة لا توجد أداة اختبار قياسية حتى الآن. يجب عليك البناء والتثبيت والتحقق يدويًا في كل عميل. يبدو الأمر بطيئًا مقارنة بعمل تطوير الواجهات الأمامية (frontend) المعتاد.

• لا تجمع الأسرار (secrets) داخل التطبيق تعمل التطبيقات في إطار iframe معزول. يمكن للمضيف رؤية المحتوى. لا تضع مفاتيح API أو رموز OAuth في حقول النماذج أبدًا. استخدم نموذجًا آمنًا منفصلاً إذا كنت بحاجة إلى بيانات حساسة.

إذا بدأت الآن:

  • قم بتجميع واجهة المستخدم الخاصة بك داخل خادمك.
  • استخدم إعداد Vite متعدد الصفحات.
  • استورد نظام التصميم الحالي لديك مباشرة.

تطبيقات MCP لا تزال في مراحلها الأولى والمواصفات في تطور مستمر. الأدوات المتاحة لا تزال محدودة، لكنها تستحق الإطلاق.

المصدر: https://dev.to/arcade/lessons-from-building-20-mcp-apps-in-2-days-1f98

مجتمع تعليمي اختياري: https://t.me/GyaanSetuAi