تطبيقات بروتوكول السياق (MCP) تغير شكل الإنترنت. إليك كيفية بناء أحدها! (Skybridge)
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00هناك تحول جذري هائل يحدث في جميع أنحاء الصناعة بسبب الذكاء الاصطناعي.
00:00:04يستخدم المزيد والمزيد من المستخدمين برامج الدردشة الآلية في الوقت الحالي لعمليات البحث أو الأبحاث الروتينية،
00:00:10ولهذا السبب يزداد مفهوم تطبيقات بروتوكول السياق (MCP) شعبية يوماً بعد يوم.
00:00:14بدلاً من إخراج ملف JSON أو مستند بصيغة Markdown،
00:00:18تتحول المزيد من التطبيقات والخدمات نحو توفير هذه الأدوات التفاعلية والمفيدة داخل روبوت الدردشة.
00:00:24وقد أطلقت شركة Alpic مؤخراً إطار عمل جديداً رائعاً يسمى SkyBridge
00:00:29مما يجعل من السهل للغاية إنشاء تطبيقات MCP مخصصة خاصة بك لجميع أنواع حالات الاستخدام المختلفة.
00:00:35لذا في فيديو اليوم، سنلقي نظرة على SkyBridge، ونرى كيف يعمل، ونقوم بتجربته بأنفسنا.
00:00:41سيكون الأمر ممتعاً للغاية، لذا دعونا نغوص فيه.
00:00:47لكي تفهم حقاً سبب أهمية SkyBridge الكبيرة، عليك أن تفهم كيف تعمل هذه التطبيقات الجديدة.
00:00:53عندما تنشئ تطبيق ويب تقليدي، فإنك تبنيه لمستخدم واحد وهو الإنسان.
00:00:58ولكن مع تطبيق MCP، أنت في الواقع تبني لمستخدمين في نفس الوقت، الإنسان ومساعد الذكاء الاصطناعي،
00:01:05لأنهما يتشاركان نفس الواجهة تماماً.
00:01:08يمكن للإنسان النقر فوق الأزرار، وكتابة المدخلات، وتحريك أشرطة التمرير، ويرى نموذج اللغة الكبير (LLM) تلك الحالة على الفور.
00:01:15وعلى العكس من ذلك، يمكن لنموذج اللغة الكبير تحديث البيانات في الخلفية،
00:01:18وتتغير واجهة المستخدم في الوقت الفعلي أمام مباشرة.
00:01:21وSkyBridge هو إطار عمل بلغة TypeScript مفتوح المصدر يتعامل مع جميع البنى التحتية المعقدة،
00:01:26وربط البروتوكولات، ومزامنة الحالة، وقواعد الأمان،
00:01:30بحيث يمكنك التركيز فقط على كتابة كود React قياسي.
00:01:34الآن، إذا كنت قد محاولت من قبل إنشاء تطبيقات MCP لـ ChatGPT أو Claude،
00:01:39أنت تعلم أن دورة الاختبار المحلي كانت تمثل صداعاً هائلاً.
00:01:43كان عليك يدوياً إعداد الأنفاق العامة، ونسخ اللصق لملفات التكوين،
00:01:47وإعادة تشغيل جلسات الدردشة الخاصة بك فقط لإصلاح خطأ مطبعي صغير في لغة CSS.
00:01:52ولكن الجزء الأكثر روعة في إصدار SkyBridge 1.0 هو أنه أعم تصميم لوحة تحكم أدوات المطورين بالكامل.
00:01:59الآن، عندما تقوم بتشغيل خادم التطوير المحلي الخاص بك، يتم تشغيل لوحة معلومات محاكي في متصفحك.
00:02:04وداخل لوحة المعلومات هذه، لديك ثلاث أدوات لطيفة.
00:02:08الأولى هي ساحة لعب Alpik (Alpik Playground)،
00:02:11وهي بيئة اختبار محلية حيث يمكنك اختبار أدواتك وتعديل عناصر واجهة مستخدم React باستخدام استبدال الوحدات النمطية الساخنة المباشر.
00:02:17ويمكنك رؤية التغييرات على الفور دون لمس نموذج لغة كبير فعلي حتى الآن.
00:02:21وثانياً، يوجد نفق مدمج،
00:02:24والذي يتيح لك بنقرة واحدة حرفياً عرض خادمك المحلي من خلال عنوان URL عام آمن.
00:02:30لذا لم يعد عليك العبث بالأنفاق الخارجية بعد الآن.
00:02:33فقط الصق عنوان URL هذا في إعدادات المطورين في ChatGPT وستصبح جاهزاً للعمل.
00:02:37والثالثة هي أداة تدقيق Beacon Audit.
00:02:40وهذه تعتبر منقذاً للحياة إذا كنت تخطط لتقديم تطبيقاتك إلى المتاجر العامة.
00:02:44فهي تفحص البيانات الوصفية لتطبيقك وأدواته وسياسات الأمان الخاصة به لاكتشاف محفزات الرفض الشائعة
00:02:49قبل أن ترسل تطبيقك للمراجعة.
00:02:52والشيء الأكثر روعة هو أنه حتى لو لم تقم من قبل بإنشاء تطبيق MCP،
00:02:56يمكنك بسهولة تثبيت مهارة SkyBridge على وكيل الذكاء الاصطناعي المفضل لديك للبدء فوراً.
00:03:02لذا دعنا الآن نحاول بناء تطبيق MCP صغير بأنفسنا ونرى كيف يعمل.
00:03:07إذن، لهذا العرض التوضيحي، لقد مضيت قدماً وأنشأت موقع التجارة الإلكترونية الصغير هذا
00:03:11حيث يمكنك التسوق لشراء عدسات كاميرات مختلفة.
00:03:14وهو في الأساس متجر مبني بالكامل يعتمد على React مع وظيفة سلة تسوق ودفع.
00:03:19والآن أود إضافة تطبيق MCP له.
00:03:22بحيث إذا استخدم العميل المحتمل برنامج دردشة الآلي مثل ChatGPT أو Claude للبحث عن توصيات عدسات الكاميرا،
00:03:30فسوف يتصل فوراً بتطبيق MCP الخاص بنا لعرض قوائم منتجاتنا للمستخدم النهائي.
00:03:36لذا كما قلت من قبل، أسهل طريقة للبدء هي ببساطة تثبيت مهارة SkyBridge.
00:03:42ويمكننا تثبيتها عالمياً أو فقط لمستودعنا المحدد.
00:03:46ولغرض هذا العرض التوضيحي، سأمضي قدماً وأقوم بتثبيتها داخل المستودع.
00:03:51والآن يمكنك أن ترى أن لدينا دليل .agents هذا مع وجود مهارة SkyBridge فيه.
00:03:57وكل ما علي فعله الآن هو فقط أن أطلب من Claude بناء تطبيق MCP لمتجر التجارة الإلكترونية الخاص بي.
00:04:04وقبل بنائه، سيطرح علي Claude أولاً بعض الأسئلة المتابعة حول الغرض من التطبيق
00:04:09لفهم بشكل أفضل نوع الوظائف التي نحتاج إلى تضمينها فيه.
00:04:13ولهذا العرض التوضيحي، أريد تطبيقاً يسرد العدسات بناءً على ما يبحث عنه المستخدم.
00:04:18وبعد ذلك يمكننا تحديدها ومقارنتها جنباً إلى جنب وإضافتها أيضاً إلى سلة التسوق الخاصة بنا
00:04:24وتوفير حل دفع سريع لعملائنا.
00:04:28وهذا هو أساساً كل ما أحتاج إلى فعله.
00:04:29والآن أنا أترك Claude يقوم بعمله.
00:04:32وفي غضون بضع دقائق تقريباً، نرى أن Claude قد أنشأ تطبيق MCP الخاص بنا.
00:04:37والجزء الأكثر روعة هو أنه يمكننا الآن فتح لوحة تحكم المطور التي توفرها SkyBridge
00:04:41وتجربتها بأنفسنا.
00:04:44لذا الآن إذا فتحنا لوحة المعلومات، يمكننا أن نرى كيف تبدو.
00:04:47وهنا لدينا أداة البحث عن العدسات وأداة إتمام الطلب.
00:04:53إذن أولاً وقبل كل شيء، بالنسبة للبحث عن العدسات، سأقوم فقط بإدخال الحد الأقصى للسعر للعدسات التي أبحث عنها.
00:05:00ولنقم بتقييدها على خمس عدسات ربما.
00:05:03وها هو ذا.
00:05:04لقد وجدت 14 نتيجة مطابقة تقل تكلفتها عن 2000 دولار.
00:05:09إليك كيف يبدو التطبيق على سطح المكتب.
00:05:12يمكننا أيضاً معاينة عرض الجوال.
00:05:14يبدو جيدا.
00:05:15لدينا أيضاً وضع مظلم ووضع فاتح.
00:05:18وهنا لدينا مخرجات الأداة والحالة.
00:05:23وانظر ماذا يحدث إذا قمت بتحديد بعض العدسات.
00:05:26كما ترون، يتم تحديث الحالة أثناء التنقل، وهو أمر رائع للغاية.
00:05:31لذا دعونا الآن نختار ثلاث عدسات.
00:05:34والآن إذا نقرنا على مقارنة، سننتقل الآن إلى شاشة المقارنة.
00:05:40وهنا يمكننا رؤية عدساتنا الثلاث جنباً إلى جنب مع جميع المعايير.
00:05:45وإذا كنا راضين عن هذا الاختيار، فيمكننا أيضاً الذهاب إلى الدفع.
00:05:49وهذا ينتقل بنا إلى مرحلة الدفع حيث يمكننا إدخال اسمنا الكامل، والبريد الإلكتروني، وعنوان الشحن وتقديم طلبنا.
00:05:59لذا كما ترون، هذه لوحة المعلومات رائعة حقاً لاختبار أدواتك لمعرفة ما إذا كان كل شيء يعمل كما هو متوقع.
00:06:08والآن إذا ذهبنا إلى Claude، وفي الإعدادات، لدينا هذا القسم المسمى موصلات (connectors).
00:06:16وعلينا النقر فوق تخصيص (customize).
00:06:19ولهذا، ستحتاج إلى عنوان URL للنفق.
00:06:21لذا تأكد من أنك قمت بتفعيل النفق.
00:06:24ويمكننا فقط نسخ عنوان URL هذا.
00:06:26وفي قسم الموصلات، عليك فقط إضافة موصل مخصص.
00:06:31امنحه اسماً.
00:06:33والصق عنوان URL الخاص بالنفق هناك.
00:06:38وفقط انقر فوق إضافة.
00:06:39لقد أضفته هنا بالفعل.
00:06:41والشيء الأخير الذي تحتاج إلى فعله هو النقر فوق اتصال.
00:06:45ويمكنك أيضاً تعيين الأذونات إذا كنت تريد تشغيل هذه الأدوات تلقائياً أو تريد موافقة من المستخدم.
00:06:53وبعد ذلك يمكننا المضي قدماً وبدء دردشة جديدة.
00:06:57وفي الدردشة الجديدة، يمكنني الآن أن أطلب: أعطني بعض التوصيات لأفضل العدسات بأقل من 2000 دولار لتصوير البورتريه.
00:07:05ويمكننا أن نرى الآن أنه يقول إنه سيبحث في كتالوج متجر العدسات عن بعض خيارات البورتريه الرائعة بأقل من 2000 دولار.
00:07:12وانظر إلى ذلك.
00:07:14لقد فتح تطبيق MCP الخاص بنا.
00:07:16ما مدى روعة هذا؟
00:07:18ويمكننا القيام بنفس الأشياء هنا.
00:07:20يمكننا تحديد بعض العدسات هنا.
00:07:24ثم الذهاب إلى قسم المقارنة.
00:07:27وله جدول مقارنة صغير.
00:07:32الشيء الوحيد الذي لاحظته هو أن لدينا مساحة بيضاء من الحالة السابقة لأداتنا.
00:07:40لذا فهذا على الأرجح شيء يمكنك إصلاحه في لغة CSS.
00:07:43ولكن كل شيء يبدو رائعاً.
00:07:46ولدينا أيضاً خيار الدفع.
00:07:49ونصل إلى قسم الدفع حيث يمكننا تقديم طلبنا.
00:07:54إذن ما مدى روعة هذا؟
00:07:57وأخيراً، والأهم من ذلك، لمعرفة ما إذا كان تطبيقك جاهزاً للنشر في متاجر التطبيقات العامة،
00:08:02يمكننا أيضاً تشغيل تدقيق لتطبيقنا من خلال لوحة تحكم المطور والتحقق مما إذا كان لدينا أي مشاكل معه.
00:08:10وهذا كل شيء أساساً.
00:08:11في غضون دقائق قليلة فقط، تمكنا من بناء تطبيق MCP جاهز للإنتاج باستخدام SkyBridge.
00:08:16والذي يمكننا تقديمه نظرياً إلى متجر تطبيقات الذكاء الاصطناعي.
00:08:20لذا آمل أن يوضح لك هذا مدى سهولة البدء والعمل مع SkyBridge.
00:08:25وبصراحة، يبدو الأمر وكأنه مستقبل الويب الحديث.
00:08:28أعتقد أننا سنبدأ في رؤية المزيد والمزيد من تطبيقات أدوات MCP التفاعلية هذه داخل برامج الدردشة الآلية لدينا.
00:08:34لذا من الجميل أن تكون هناك أطر عمل مثل SkyBridge تجعل عملية إنشاء هذا النوع من التطبيقات أسهل بكثير بالنسبة لنا نحن المطورين.
00:08:42إذن ها قد حصلتم على ذلك أيها القوم.
00:08:44هذا هو إطار SkyBridge باختصار.
00:08:46إذن ما رأيك في SkyBridge؟
00:08:47هل قمت بتجربته؟
00:08:48هل ستستخدمه؟
00:08:49أخبرنا بذلك في قسم التعليقات أدناه.
00:08:52وأيها القوم، إذا كنتم تحبون هذه الأنواع من التحليلات التقنية، فيرجى إعلامي عن طريق الضغط على زر الإعجاب أسفل الفيديو.
00:08:58ولا تنسوا أيضاً الاشتراك في قناتنا.
00:09:01كان معكم Andrus من BetterStack، وسأراكم في الفيديوهات القادمة.
00:09:16أنت