00:00:00بدأت وكلاء الذكاء الاصطناعي تندمج في كل جزء من حياتنا الآن.
00:00:03وأحد أكبر المجالات التي حدث فيها ذلك هو المتصفح.
00:00:06أدركت كل شركات الذكاء الاصطناعي الكبرى أن المتصفح هو الأداة الوحيدة التي يستخدمها الجميع
00:00:11كل يوم.
00:00:12فلماذا لا نضع الذكاء الاصطناعي داخل المتصفح؟
00:00:14لكن الحقيقة هي أن جميع محاولاتهم سيئة.
00:00:15والأمر لا يتعلق بضعف التحسين.
00:00:17بل هناك مشكلة جوهرية لن يحلها أي قدر من التحسينات.
00:00:20لكن جوجل، بالتعاون مع مايكروسوفت، أطلقت للتو شيئاً يسمى WebMCP.
00:00:24وبدلاً من محاولة جعل الوكلاء أفضل في استخدام المواقع، فإنه يجعل المواقع أفضل
00:00:29في التحدث إلى الوكلاء.
00:00:30هذا نهج مختلف تماماً.
00:00:32وما يُمكّنه هو شيء لم نشهده من قبل.
00:00:35هذه صفحة HTML بسيطة تعمل على خادم محلي.
00:00:38بفتح تبويب الإضافات، نجد إضافة WebMCP.
00:00:41عند فتحها، نجد أسفل اسم الموقع أداة واحدة، وهي “حجز طاولة” (BookTable).
00:00:45قمنا بربط جسر WebMCP هذا بـ Claude Code وأخبرناه أن لدينا نموذج حجز
00:00:49مطعم مفتوحاً مع توفر أدوات WebMCP.
00:00:52أعطيناه مهمة حجز طاولة لشخصين مع تاريخ واسم وطلب خاص.
00:00:57كل هذه الحقول موجودة في النموذج.
00:00:59قام بتأكيد التاريخ، واستخدم أداة WebMCP التي وفرها الموقع، وملأ الحقول
00:01:03ونجح في إجراء الحجز.
00:01:06حالياً، لدى الوكيل طريقتان لمعرفة ما هو موجود على الشاشة.
00:01:09الطريقة الأولى تعتمد على الرؤية البصرية.
00:01:11حيث يأخذ الوكيل لقطة شاشة للصفحة بأكملها، ويحدد كل عنصر يراه،
00:01:15ويرسل تلك الصورة إلى نموذج يحاول تحديد المكان الذي يجب النقر عليه.
00:01:19الطريقة الثانية هي تحليل الـ DOM.
00:01:21يسحب الوكيل كود الـ HTML الخام للصفحة.
00:01:24وإذا سبق لك فتح “فحص العنصر” على أي موقع، فأنت تعرف كيف يبدو ذلك.
00:01:28آلاف الأسطر من الكود.
00:01:29يقرأ الوكيل كل ذلك ويحاول التعرف على الزر الصحيح.
00:01:33كل من هذين النهجين يعاني من نفس المشكلة الأساسية.
00:01:35وهي أنهما غير حتميين.
00:01:36الوكيل يقوم بتقديم أفضل تخمين له في كل مرة.
00:01:39السبب في عدم نجاح هذا الأمر باستمرار هو أن الإنترنت بالكامل بُني
00:01:43للعين البشرية.
00:01:45كل موقع يفترض أن هناك شخصاً ينظر إليه.
00:01:47لا يوجد هيكل مخصص للآلات.
00:01:48لذلك، أي وكيل، مهما كان نموذجه جيداً، يظل عالقاً في محاولة تفسير شيء
00:01:53لم يُصمم أبداً ليتم تفسيره بواسطة آلة.
00:01:55مع WebMCP، بدلاً من محاولة الوكيل فهم موقعك، يقوم موقعك بتسجيل
00:02:00إجراءاته المتاحة كأدوات.
00:02:01عندما يهبط الوكيل على صفحة، فإنه لا يخمن.
00:02:04بل يقرأ فقط الأدوات المتاحة ويستدعيها مباشرة.
00:02:07حالياً، WebMCP متاح للمعاينة المبكرة فقط.
00:02:10مع تطور الويب المعتمد على الوكلاء، تحتاج المواقع أيضاً للتطور معه.
00:02:13وكما رأيتم، من خلال تحديد تلك الأدوات، نمنح هؤلاء الوكلاء وصولاً أفضل للتفاعل
00:02:18مع مواقعنا.
00:02:19نجح العرض التوضيحي لأنه كان نموذج HTML بسيطاً.
00:02:21لكن معظم المواقع الحقيقية ليست بهذه البساطة.
00:02:23لذلك، لدى WebMCP في الواقع نهجان مختلفان اعتماداً على ما تعمل عليه.
00:02:28هناك طريقتان تسمحان للوكلاء بالتحكم في المتصفح.
00:02:31واجهة البرمجة التصريحية (Declarative API) مخصصة لسير العمل البسيط مثل نماذج HTML التي رأيتموها للتو.
00:02:35واجهة البرمجة الأمرية (Imperative API) مخصصة لتطبيقات الويب كاملة النطاق ذات الصفحات المتعددة،
00:02:40وهذه تتطلب بعض التنفيذ الإضافي الذي سنتطرق إليه لاحقاً.
00:02:43حتى الآن، لا توجد وثائق رسمية، لكن لديهم مستودعاً لأدوات WebMCP
00:02:48في Google Chrome Labs مع عرضين توضيحيين، واحد منهما فقط مستضاف حالياً.
00:02:52هناك عرض تجريبي بسيط للبحث عن الرحلات الجوية، وإضافة رسمية لمفتش سياق Marvel.
00:02:56بعد تثبيت ذلك، أي موقع طبق WebMCP ستتمكن من اكتشاف
00:03:01أدواته عبر الإضافة، وستتمكن من القيام بأشياء رائعة أخرى أيضاً.
00:03:05يظهر مخطط الإدخال (schema) الخاص بالأدوات هناك مباشرة.
00:03:07حالياً، توجد أداة واحدة فقط في هذه الصفحة، وهي أداة البحث عن الرحلات.
00:03:10لقد قدموا خيارين لاستخدام هذا.
00:03:12يمكنك إما إعطاء مدخلات مخصصة يجب على نموذج الذكاء الاصطناعي ملؤها، أو يمكنك
00:03:16ضبط مفتاح Gemini API الخاص بك، وإعطاء أمر للمستخدم بلغة إنجليزية بسيطة وسيتم التحكم في الصفحة
00:03:21بناءً على ذلك.
00:03:22حالياً، تحتوي على هذه المدخلات الافتراضية.
00:03:24قمنا بتغييرها وقامت بالفعل بالبحث عن الرحلات وحصلت على مجموعة من النتائج.
00:03:28عدت مرة أخرى، وهذه المرة كان موقع السفر المعتمد على WebMCP يحتوي على أربع أدوات متاحة،
00:03:32ثلاث منها الآن هي فلاتر يمكن تطبيقها.
00:03:35مدخلات الصفحة كانت قد تغيرت أيضاً.
00:03:37أضفت مدخلاً آخر وأعطانا إشعاراً بأن إعدادات الفلتر قد تم تحديثها.
00:03:41لم تتطابق أي رحلات مع إعدادات الفلتر تلك، ولكن تم تطبيقها جميعاً.
00:03:44لقد تنقلنا بين متصفح Zen وChrome خلال هذا العرض، وذلك لأنه بينما
00:03:48أصدروا WebMCP كبروتوكول مفتوح يمكن لأي متصفح استخدامه، إلا أنه يعمل حالياً فقط
00:03:54على نسخة Chrome Canary.
00:03:55وذلك حتى يصدروا المعيار بشكل رسمي ليتمكن الجميع من استخدامه.
00:03:58هذا هو الوضع الحالي للأدوات الرسمية.
00:04:01لا توجد وثائق، فقط عرضان تجريبيان، ويعمل فقط على Chrome Canary، ولا يمكنك استخدامه
00:04:05مع Claude Code لأنه مخصص في الأصل للاستخدام من قبل وكلاء المتصفح.
00:04:09لذلك وجدنا جسر WebMCP مخصصاً يمكنك تثبيته على نظامك، وهو يوفر
00:04:14لك بروتوكول MCP وإضافة متصفح أيضاً.
00:04:16هذا ما يسمح لـ Claude Code باستخدام WebMCP والتنقل واستخدام الأدوات التي يوفرها
00:04:22أي موقع إلكتروني.
00:04:23لإظهار كيفية تنفيذ المواقع لهذا، سنبدأ بالنهج الأبسط.
00:04:27في واجهة البرمجة التصريحية، التي رأيتموها في نموذج HTML، كل ما عليك فعله فعلياً هو
00:04:31التصريح عن ثلاثة أشياء داخل نموذج HTML: اسم الأداة، وصف الأداة، ووصف
00:04:36معاملات الأداة.
00:04:37لا تحتاج للتعمق فيها.
00:04:39عليك فقط التأكد من أن الوكيل الخاص بك يقوم بإضافتها.
00:04:41قمنا بإعداد دليلين عبر الهندسة العكسية من العروض التجريبية في مستودع WebMCP، وأعطينا
00:04:46Claude Code حق الوصول إليهما.
00:04:47خلال تلك العملية، واجهنا بالفعل بعض المشكلات الشائعة واضطررنا لإصلاح
00:04:51هذه الأدلة أثناء العمل.
00:04:53كلاهما متاح في AI Labs Pro، وهو مجتمعنا حيث تحصل على قوالب
00:04:57جاهزة للاستخدام.
00:04:58يمكنك دمجها مباشرة في مشاريعك لهذا الفيديو ولجميع الفيديوهات السابقة.
00:05:01الشرح الأساسي موجود هنا في الفيديو، ولكن إذا كنت تريد الملفات الفعلية، فالروابط
00:05:05موجودة في الوصف.
00:05:06إذا قام وكيلك بإضافة هذه التصريحات، فإن الباقي يقع على عاتق المتصفح، الذي يقرأها
00:05:10من الـ HTML.
00:05:12الطريقة الثانية كانت واجهة البرمجة الأمرية للحالات التي تحتاج فيها إلى تفاعلات أكثر تعقيداً
00:05:17وتنفيذ أكواد جافا سكريبت.
00:05:18قمنا بتشغيل تطبيق Next.js، وأعطينا Claude Code دليل Next.js، وكان هذا كل ما
00:05:23يحتاجه لتنفيذه.
00:05:24في تطبيقات React، ينشئ ملفاً جديداً في مجلد المكتبة حيث يصرح عن جميع الأدوات
00:05:29التي يحتاجها الموقع.
00:05:30هذه هي جميع الدوال وهذه هي تعريفاتها.
00:05:33ولكن بما أن تطبيقات الويب هذه يمكن أن تصبح ضخمة جداً وقد تحتوي على أكثر من 100 أداة،
00:05:38نواجه نفس المشكلة التي نجدها في Claude Code حيث يؤدي السياق الزائد إلى إثقال كاهل كل شيء
00:05:41ويعطل العملية برمتها.
00:05:43لذلك، بدلاً من تحميل جميع أدوات الموقع، من الأفضل تحميل الأدوات الخاصة بصفحة واحدة فقط
00:05:47في كل مرة.
00:05:48هذا المفهوم يسمى “التحميل السياقي” (contextual loading).
00:05:50هذا هو تطبيق Next.js الذي جعلنا Claude Code ينشئه.
00:05:53إنه تطبيق تجريبي صغير يعمل بكامل وظائفه مع تنفيذ الجزء الخلفي (backend).
00:05:57حالياً نحن في الصفحة الرئيسية، وهذا الموقع يحتوي على 3 أدوات فقط متاحة.
00:06:01انتقلت إلى صفحة العربة، وهذه المرة وجدنا 4 أدوات وتغيرت الأسماء أيضاً.
00:06:05تتغير توفر الأدوات بناءً على الصفحة التي تتواجد فيها.
00:06:09هنا يأتي دور دوال التسجيل.
00:06:11كلما هبطت على صفحة، مثل الصفحة الرئيسية، فإنه يقوم بتشغيل دالة تسجيل أدوات الصفحة الرئيسية،
00:06:15وعندما تغادرها، يتم تشغيل دالة إلغاء تسجيلها.
00:06:18بناءً على الأدوات التي تنتمي لتلك الصفحة، فإنه يقوم فقط بتسجيلها ثم إلغاء تسجيلها.
00:06:23هذا هو السبب في أنه لا يعتمد على المتصفح وحده في هذه الحالة، بل الكود يتولى أيضاً
00:06:27عملية الدمج.
00:06:28نحن لا نستخدم WebMCP حالياً مع وكيل متصفح، وهو ما تريده جوجل وما
00:06:32سيطبقه كل متصفح بنفسه.
00:06:34نحن في الواقع نستخدم جسراً يربط Claude Code بـ WebMCP، وهذه هي الطريقة التي نتحكم بها
00:06:39في المواقع.
00:06:40إذا كنت ترغب في تحقيق أقصى استفادة من Claude Code نفسه، فلدينا فيديو عن أحدث 10
00:06:44طرق لاكتساب ميزة تنافسية باستخدامه.
00:06:46هذا الجسر هو مشروع مجتمعي، ومع واجهة البرمجة الأمرية، هناك مشكلة
00:06:51حيث لا يعمل تبديل الأدوات بشكل جيد مع خادم MCP هذا.
00:06:54عندما فتحت الموقع، كنا في صفحة الدفع وبدأنا جلسة Claude Code هناك.
00:06:58وعندما طلبنا منه العودة إلى الصفحة الرئيسية، لم يتمكن من رؤية الأدوات المتاحة عليها.
00:06:59كنا في الصفحة الرئيسية وانتقلت إلى صفحة المنتج وظهر لنا زر إضافة إلى العربة.
00:07:03ولكن عندما كان في صفحة المنتج، لم يتمكن حقاً من رؤية ذلك الزر.
00:07:04لذلك اضطررنا لإضافة عنصر يدوياً إلى العربة لعرض هذا العرض التجريبي.
00:07:08ولكن عندما طلبنا منه إكمال عملية الدفع، قام تلقائياً بملء التفاصيل، وإتمام
00:07:11الطلب، وإنهاء تجربة التسوق بالكامل.
00:07:14لذا، هذا أحد قيود هذا الـ MCP، مما يقودنا إلى نقطة أخرى.
00:07:18WebMCP هو مشروع مفتوح المصدر يضم كبار بائعي المتصفحات وشركات التكنولوجيا كمشاركين.
00:07:21ولكن حالياً، المتصفح الوحيد الذي يدعمه هو Chrome Canary، والوكيل المقصود
00:07:25هو Gemini، ذكاء جوجل الاصطناعي المدمج مباشرة في المتصفح.
00:07:30إذا كنت صاحب موقع وقمت بتنفيذ WebMCP اليوم، فإن الوكيل الوحيد الذي يمكنه استخدام
00:07:34أدواتك بشكل أصلي هو Gemini.
00:07:38أما Claude Code فيحتاج إلى جسر بناه المجتمع يتعطل عندما يبدأ التحميل السياقي.
00:07:42كل الوكلاء غير التابعين لجوجل في وضع غير مؤاتٍ.
00:07:44الآن، هل يمكن لـ Claude اللحاق بالركب؟
00:07:49بالتأكيد، لديهم إضافة المتصفح الخاصة بهم.
00:07:51وبما أنها أيضاً وكيل متصفح، فيمكنها نظرياً اكتشاف هذه الأدوات بنفس الطريقة
00:07:52التي يفعل بها Gemini.
00:07:55لكن السؤال هو كم عدد الأشخاص الذين سيقومون بتثبيت إضافة متصفح Claude عمداً
00:07:59بدلاً من مجرد استخدام Gemini المدمج بالفعل في Chrome.
00:08:00كروم لديه مليارات المستخدمين، ولا يحتاجون لتثبيت أي شيء.
00:08:04في رأينا، جوجل لا تمنع أحداً.
00:08:08إنهم فقط يستفيدون من البنية التحتية والجمهور الذي يمتلكونه بالفعل.
00:08:11معيار مفتوح يعمل بشكل أفضل داخل المتصفح الذي يمتلكونه مع الوكيل الذي
00:08:13يشحنونه مسبقاً.
00:08:17هذا لا يعني أنه لا يجب عليك تنفيذه.
00:08:21المعيار نفسه مفيد حقاً، وجعل موقعك متاحاً للوكلاء هو أمر ذكي
00:08:22بغض النظر عن الوكيل الذي سيستفيد أولاً.
00:08:23هناك بعض الأشياء التي تستحق المعرفة إذا قررت تنفيذ هذا.
00:08:28توصي المواصفات بما لا يزيد عن 50 أداة لكل صفحة.
00:08:30هذا ليس المقصود منه كشف تطبيقك بالكامل.
00:08:33بل هو مخصص لإجراءات محددة ومركزة، الأشياء التي يرغب شخص ما في القيام بها فعلياً
00:08:36في تلك الصفحة.
00:08:38أوصاف الأدوات تهم أيضاً أكثر مما تعتقد.
00:08:42يقرأ الوكلاء تلك الأوصاف ليقرروا أي أداة سيستدعون.
00:08:43الأوصاف الغامضة تعني أن الوكيل سيختار الأداة الخاطئة أو يتجاهلها تماماً.
00:08:46اكتبها وكأنك تشرح الإجراء لشخص لم يرَ موقعك من قبل.
00:08:49وهذا لا يزال في مرحلة تجريبية.
00:08:53واجهة برمجة التطبيقات ستتغير.
00:08:57سيتم إطلاق Chrome 146 في مارس مع دعم أوسع.
00:08:58ولكن حتى ذلك الحين، هذه مجرد تجربة للمطورين.
00:09:00لا تطلقه في بيئة العمل الفعلية (production) بعد.
00:09:03إذا كنت تتابع هذه القناة، فأنت تعلم أن مواكبة الذكاء الاصطناعي تتطلب أساساً تقنياً قوياً.
00:09:05وهذا هو السبب في أنني أحب منصة Brilliant.
00:09:06إنها منصة تفاعلية مع دروس تطبيقية صممها معلمون عالميون من
00:09:11جامعات MIT، وHarvard، وStanford.
00:09:13أوصي بشدة بدوراتهم حول “التجميع والتصنيف” و “كيف يعمل الذكاء الاصطناعي”.
00:09:17يعلمونك كيفية اكتشاف الأنماط المخفية وفهم المنطق الكامن وراء النماذج اللغوية
00:09:19الكبيرة بشكل تفاعلي.
00:09:23كما ترون في الكتالوج على الشاشة، فإنهم يقدمون مجموعة هائلة من الدورات التي تغطي
00:09:27كل شيء من الرياضيات التأسيسية إلى علوم البيانات المتقدمة وعلوم الكمبيوتر.
00:09:28كما تقدم Brilliant لمشاهدينا خصماً بنسبة 20% على الاشتراك السنوي المميز، مما يوفر
00:09:33وصولاً يومياً غير محدود لكل شيء على المنصة.
00:09:37للتعلم مجاناً على Brilliant لمدة 30 يوماً كاملة، اذهب إلى brilliant.org/ailabs، أو امسح
00:09:42رمز الـ QR الموجود على الشاشة، أو انقر على الرابط في الوصف.
00:09:44ابدأ عادة تعلم حقيقية اليوم وارتقِ بمهاراتك إلى المستوى التالي من خلال التوجه
00:09:50إلى Brilliant.
00:09:53بهذا نصل إلى نهاية هذا الفيديو.
00:09:56إذا كنت ترغب في دعم القناة ومساعدتنا في الاستمرار في تقديم فيديوهات كهذه، يمكنك
00:09:57القيام بذلك عبر زر “شكراً” الموجود بالأسفل.
00:09:59كما هو الحال دائماً، شكراً لكم على المشاهدة وأراكم في الفيديو القادم.
00:10:03وذلك من خلال استخدام زر “شكراً” الموجود بالأسفل.
00:10:06وكالعادة، شكراً لكم على المشاهدة وأراكم في الفيديو القادم.