00:00:00هناك مقترح جديد مدعوم من جوجل ومايكروسوفت قد يشكل مستقبل
00:00:03طريقة استخدامنا للويب، وأنا معجب به نوعاً ما. يطلق عليه WebMCP، لكن لا تخلطوا بينه
00:00:08وبين خادم MCP العادي. بدلاً من ذلك، WebMCP هو في الواقع واجهة برمجة تطبيقات للمتصفح تتيح لمطوري
00:00:13الواجهات الأمامية عرض ميزات مواقعهم كأدوات لوكلاء الذكاء الاصطناعي، مما يجعل
00:00:18كل موقع بمثابة خادم MCP مصغر. وبينما قد تكونوا رأيتم بعض المواقع بدأت
00:00:23بالفعل باستخدام خوادم MCP الخاصة بها، إلا أن هذا الأمر مختلف قليلاً. فهدفه هو
00:00:27السماح لوكلائكم باستخدام الموقع نيابة عنكم بدلاً من مجرد الوصول إلى واجهات البرمجة وعرض النتائج
00:00:32في الدردشة. وسيكون مبنياً بالكامل على الواجهة الأمامية. والآن، إذا بدا هذا التمييز
00:00:37مربكاً قليلاً، فلننتقل مباشرة لمشاهدة عرض تجريبي ونتحدث عن سبب إعجابي به.
00:00:46أول شيء أريد الاعتراف به هو أن هذا العرض لن يبدو مثيراً للغاية، ولكن
00:00:49هذا هو جوهر WebMCP. فهو يأخذ شيئاً ممكناً بالفعل، ولكن
00:00:54يجعله أفضل بكثير. لذا ابقوا معي. ما لدي هنا هو نسخة “Canary”
00:00:58من متصفح كروم التي يختبرون فيها هذا المقترح، وأيضاً موقع تم إعداده
00:01:02ببعض أدوات WebMCP. كما ترون على اليمين، لدي إضافة قادرة على التفاعل
00:01:06مع أدوات WebMCP هذه، ولكن تخيلوا في المستقبل أن هذا سيكون مجرد ذكاء اصطناعي مدمج
00:01:10في متصفحكم العادي، سواء كان Gemini أو ChatGPT Atlas أو أياً كان ما تحول إليه متصفح ARC.
00:01:15تلاحظون أنه إذا أردت إرسال طلب مستخدم وأنا على هذا الموقع هنا، قائلاً إنني أريد
00:01:19حجز رحلة ذهاب وإياب لشخصين من لندن إلى نيويورك في تواريخ محددة
00:01:23وضغطت على إرسال، فسيأخذني إلى صفحة نتائج البحث، أي أنه استخدم الموقع
00:01:28نيابة عني. واو، شيء مذهل، أليس كذلك؟ نعم، كما قلت، العرض سيبدو بسيطاً جداً،
00:01:33لكن النقطة الأساسية في WebMCP هي كيفية استخدامه لهذا الموقع من أجلي. النهج الحالي للذكاء الاصطناعي
00:01:38في استخدام المواقع يميل لاستخدام أدوات مثل Playwright، أو تحليل HTML، أو حتى التقاط صور شاشة
00:01:42لموقعك ومحاولة استخدامه كبشري. لكن كل ذلك غير فعال إلى حد كبير، خاصة
00:01:48من حيث استهلاك الرموز (tokens)، ولا يزال عرضة للكثير من الأخطاء. وهذا ما جاء WebMCP
00:01:53لإصلاحه. فبدلاً من ذلك، يسمح WebMCP لمطور الموقع بعرض أدوات MCP معينة
00:01:58تتفاعل مع جافا سكريبت في جانب العميل. وهذا كل ما يحدث عندما يختار الذكاء الاصطناعي
00:02:03استخدام إحدى أدوات WebMCP هذه. إنه ببساطة يشغل دالة جافا سكريبت على موقعك
00:02:07والتي حددتها أنت كمطور لتعمل. يمكنكم أن تروا في مثال صفحة الطيران التجريبية هذه
00:02:12أن لدي أداة WebMCP واحدة متاحة تسمى “search flights” (البحث عن رحلات)، وكما ترون فهي تأخذ
00:02:16بعض مدخلات البيانات مثل المصدر والوجهة ونوع الرحلة، والتي تتطابق تماماً مع
00:02:20النموذج الموجود لدينا هنا. الجزء الأهم هو أن الذكاء الاصطناعي يعرف الآن أنه يمكنه استخدام
00:02:25أداة MCP هذه. لذا عندما نضغط إرسال على طلب كهذا، فإنه لن يملأ النموذج
00:02:29عن طريق القيام بأشياء مثل Playwright أو تحليل HTML. في الواقع، لا يحتاج حتى لمعرفة شكل الموقع
00:02:34أو كيف تبدو لغة HTML الخاصة به على الإطلاق. إنه ببساطة يعلم أن لديه أداة
00:02:38WebMCP تلك ويستدعيها بتلك المدخلات، وأنا كمطور حددت ما يحدث
00:02:43عندما آخذ تلك المدخلات وأقوم بتشغيل دالة جافا سكريبت، والتي في هذه الحالة
00:02:47تقوم ببساطة بتحديث حالة React مما يؤدي للانتقال إلى صفحة البحث عن الرحلات.
00:02:52وإذا ألقينا نظرة على كود الواجهة الأمامية لهذا، فستجده بسيطاً للغاية وآمل
00:02:55أن تبدأ الأمور في أن تصبح أكثر وضوحاً. ترون أن أول شيء نحتاج فعله هو تسجيل
00:02:59أدوات WebMCP المتاحة لصفحة معينة، ويمكننا فعل ذلك باستخدام window.navigator.model_context.
00:03:04هذه هي واجهة برمجة التطبيقات التي ستحتاج المتصفحات لبنائها إذا تم اعتماد
00:03:09هذا المقترح، وهي موجودة حالياً في Chrome Canary حتى يتمكنوا من اختبارها. يمكننا أن نرى بمجرد
00:03:13حصولنا على واجهة model context، يمكننا تسجيل أدواتنا ببساطة باستخدام دالة register tool
00:03:18وفي هذه الحالة أقوم بتسجيل أداة “search flights” التي رأيناها تُستخدم
00:03:22سابقاً. إذا تحققنا مماهية الأداة الفعلية، فسترون أنها تعريف كائن بسيط جداً.
00:03:26لدينا اسم، ولدينا وصف، وهذا الوصف يُمرر للذكاء الاصطناعي ليعرف متى يستخدم
00:03:30هذه الأداة، ولدينا أيضاً مخطط للمدخلات (input schema) إذا أردنا أخذ أي وسطاء. في حالتي،
00:03:34كان لدي أشياء مثل المصدر والوجهة لتتطابق مع ذلك النموذج. كما ترون لدينا أيضاً
00:03:38سياق إضافي يمكننا إعطاؤه للذكاء الاصطناعي لفهم ما يجب أن تكون عليه تلك الوسطاء
00:03:42بالضبط. الجزء المهم في تعريف الأداة هو دالة التنفيذ (execute). هذه هي
00:03:47جافا سكريبت في جانب العميل التي ستعمل على موقعك عند استخدام أداة MCP هذه. لذا يمكنها
00:03:51أساساً أن تكون أي شيء تريده. في حالتي، أنا أستخدم دالة search flights
00:03:55ولا داعي للقلق بشأن طريقة التنفيذ كثيراً، لكنني ببساطة آخذ
00:03:59المعاملات التي ملأها الذكاء الاصطناعي لتلك المدخلات، وأقوم بإرسال
00:04:03حدث (event) يسمى search flights بتلك المعاملات. ثم في كود React، كل ما أفعله ببساطة هو
00:04:08إضافة مستمع للحدث (event listener) لحدث بحث الرحلات ذاك، وعند حدوثه، أقوم ببساطة بتشغيل
00:04:12دالة handle search flights، وهنا يمكننا القيام بأي شيء تقريباً
00:04:15يمكننا فعله في React. وفي حالتي، آخذ المعاملات وأقوم بتعيينها كمعاملات
00:04:19للبحث، مما يؤدي لعملية الانتقال. الأمر بهذه البساطة حقاً، ولهذا السبب يعجبني
00:04:24هذا النهج جداً، فهو ليس فعالاً للغاية من حيث استهلاك الرموز فحسب، بل يتيح لي أيضاً كمطور
00:04:29تحديد التفاعلات في الموقع، وبإمكان الذكاء الاصطناعي اتباع ضوابطي. إنه
00:04:34حل أنيق حقاً لبناء المواقع مع وضع كل من المستخدم البشري ومساعد الذكاء الاصطناعي في الاعتبار،
00:04:39بدلاً من النهج الحالي الذي يعتمد بناء موقع للبشر ثم بناء خادم MCP
00:04:43للذكاء الاصطناعي، وإذا احتاج الذكاء الاصطناعي لاستخدام الموقع، فعليك أن تأمل أن يكتشف
00:04:48الأمر بطريقة ما. ومن الجدير بالذكر أيضاً أن أدوات Web MCP ليست مفيدة فقط لعمل
00:04:51حدث معين في صفحتك مثل الانتقال أو ملء نموذج، بل هي مفيدة جداً أيضاً
00:04:55عندما تحتاج إلى تحليل المعلومات الموجودة في الصفحة. لنقل إنني كمستخدم جئت هنا
00:05:00وبدأت في تعديل بعض الفلاتر، مثل اختيار سعر أقل من 500 دولار ووقت
00:05:05مغادرة قبل منتصف النهار. لا يزال هناك الكثير من الرحلات في هذه الصفحة، لذا أريد
00:05:11مساعدة الذكاء الاصطناعي في اختيار الأفضل. يمكنني قول: “أي رحلة تنصحني بها في هذه الصفحة؟”
00:05:15النهج الحالي سيستخدم ببساطة Playwright أو تحليل HTML لقراءة الصفحة
00:05:20بالكامل ومحاولة فهم المعلومات الموجودة فيها وتحويلها إلى شكل من أشكال البيانات المنظمة،
00:05:24لكننا لا نحتاج لفعل ذلك مع Web MCP. بدلاً من ذلك، قمت أنا كمطور ببساطة
00:05:29بإعداد أداة Web MCP تسمى list flights (عرض الرحلات)، وهذه الأداة لديها حق الوصول لحالة React الحالية
00:05:33وبالتالي لديها حق الوصول لكل المعلومات المعروضة للمستخدم هنا ولكن بصيغة JSON
00:05:38مرتبة. بهذه الطريقة، إذا طلبت من الذكاء الاصطناعي هذا الطلب، فسترون أنه يستدعي
00:05:42تلك الأداة، ويسرد جميع الرحلات المعروضة حالياً على هذه الصفحة، ثم يقدم
00:05:46لنا توصية هنا للرحلة رقم 56. ويمكنني العثور على تلك الرحلة معروضة في الصفحة
00:05:51هنا. هذه العملية استهلكت رموزاً أقل بكثير وستكون أكثر دقة بمراحل. والآن،
00:05:56الشيء الأخير الذي أريد استعراضه هو كيف يمكنك الاستفادة من Web MCP بدون
00:06:00جافا سكريبت. حتى الآن، كنا نستخدم واجهة البرمجة الأمرية (imperative API) حيث قمت أنا
00:06:05المطور بكتابة جافا سكريبت للتعامل مع استدعاءات الأدوات وأيضاً تسجيل أدوات محددة.
00:06:10هناك أيضاً نهج ثانٍ يسمى واجهة البرمجة التصريحية (declarative API). هذا النهج أبسط بكثير لأنه
00:06:14مخصص لحالات الاستخدام البسيطة مثل ملء نماذج HTML. كما ترون، لدي هنا نموذج بسيط
00:06:19لحجز طاولة، ويمكنني ببساطة أن أطلب من الذكاء الاصطناعي حجز طاولة لي ببعض المعلومات
00:06:23اللازمة لملء النموذج، وسيقوم هو فعلياً بملء هذا النموذج
00:06:27نيابة عني. وذلك لأن لديه حق الوصول لأداة Web MCP تسمى book table (حجز طاولة). ولكن الجزء
00:06:32المهم هنا هو أنني لم أكتب أي جافا سكريبت ليكون لدي وصول لأداة Web MCP هذه. وهذا
00:06:36لأن الطريقة التي تعمل بها واجهة Web MCP التصريحية هي أنك تحتاج ببساطة لإضافة
00:06:40سمة (attribute) لاسم الأداة ووصفها داخل نموذج HTML الخاص بك، وسيحاول المتصفح حينها
00:06:44تحويل ذلك النموذج إلى أداة Web MCP من أجلك، محاولاً فهم ما يجب أن يكون عليه كل مدخل
00:06:49من وسطاء أداة MCP. ونرى ذلك هنا، لدينا اسم الأداة “book table” في
00:06:53نموذج الحجز الذي رأيناه، ولدينا وصف للأداة، ليعرف الذكاء الاصطناعي متى يستدعيها،
00:06:57ولدينا ببساطة نموذج HTML عادي. الاختلافات الوحيدة تكمن في بعض
00:07:02المدخلات هنا. نحن نستخدم أيضاً السمة tool param description لإعطاء الذكاء الاصطناعي
00:07:06مزيداً من السياق حول كيفية ملء تلك المعلومات. أما بالنسبة للباقي، فإن المتصفح
00:07:10سيلتقط المدخلات، ونوعها، واسمها، ويستخدم ذلك لإنشاء أداة
00:07:14MCP. ويمكننا رؤية ذلك في صفحة الفحص لدينا هنا، حيث التقط وسطاء المدخلات
00:07:18بشكل صحيح: الاسم، والهاتف، والتاريخ، والوقت، والضيوف، والمقاعد، والطلبات. وقد فعل كل
00:07:23ذلك باستخدام منطق نموذج HTML بسيط دون أن أكتب سطراً واحداً من جافا سكريبت. هذا تقريباً
00:07:27كل ما يتعلق بمقترح Web MCP في الوقت الحالي. وكما قلت، أنا متفائل جداً
00:07:31بهذا المقترح. يعجبني الأسلوب الذي يسد به الفجوة بين تطبيقات الويب ووكلاء الذكاء الاصطناعي،
00:07:34فهو يزيل أي تخمين عندما يحاول الوكلاء استخدام موقع ما، ويضمن
00:07:38أن يتم تحديد أي تفاعلات بشكل صريح من قبل مطوري المواقع. بالإضافة إلى أنني
00:07:43لم أنغمس تماماً في فكرة الذكاء الاصطناعي الكامل بعد. أحب وجود أداة تساعد وكيل الذكاء الاصطناعي
00:07:47على العمل بجانبي بدلاً من استبدالي. لا تعجبني فكرة حجز رحلاتي أو مطاعمي عبر
00:07:51واجهة ChatGPT. بل أفضل الذهاب إلى الموقع الفعلي بنفسي عبر المتصفح.
00:07:56وإذا أردت، يمكنني جعل الذكاء الاصطناعي يساعدني في تلك الصفحة. إنه نظام أفضل بكثير
00:08:00لإبقاء الإنسان في الحلقة والسماح أيضاً لمطوري المواقع بتحديد كيفية سير تلك التجربة.
00:08:05لكن من الجدير بالذكر أيضاً أن هذا مجرد مقترح في الوقت الحالي. لذا قد
00:08:08يستغرق الأمر بعض الوقت ليظهر في المتصفحات. وهناك أيضاً بعض القيود التي
00:08:12يجب التعامل معها. مثل مسألة الأمان التقليدية، فقد تكون هناك أدوات وأوصاف مسمومة
00:08:16على بعض المواقع. لذا، ما مقدار الوصول الذي سيُمنح لمعلومات المستخدم وما
00:08:21مقدار التحكم الذي سيملكه ذكاء المتصفح الاصطناعي على المتصفح بالكامل؟ فإذا خرجت إحدى هذه
00:08:25الأدوات المسمومة عن السيطرة، ما حجم الضرر الذي يمكن أن تحدثه؟ آمل أن يجدوا حلاً
00:08:29لذلك لأنني متفائل جداً بهذا المقترح. أخبروني برأيكم في التعليقات
00:08:33أدناه، ولا تنسوا الاشتراك. وكما هو الحال دائماً، نراكم في الفيديو القادم.