WebMCP: الدليل العربي الكامل لربط موقعك بأدوات الذكاء الاصطناعي

الساعة الحادية عشرة ليلاً. عميل يفتح متجر عطور على هاتفه ويكتب لمساعده الذكي: «اطلب لي العود نفسه الذي اشتريته الشهر الماضي». المساعد الذكي يفتح الصفحة، يلتقط صورة لها، يخمّن مكان زر البحث، يكتب، يخطئ في الفلتر، يعيد المحاولة، ويضيف الحجم الخطأ إلى السلة. ثلاث دقائق، وطلب خاطئ.

منذ 21 أغسطس 2026 صار المشهد نفسه مختلفاً على أي متجر Shopify: المساعد الذكي لا يخمّن. المتجر نفسه يقول له «هذه أداة البحث، وهذه أداة السلة، وهذه مدخلاتها»، والمساعد الذكي يستدعيها مباشرة. ما غيّر المشهد اسمه WebMCP.

هذا المقال يشرح لك ما هو بالضبط، ولماذا انتقل من فكرة إلى تشغيل افتراضي على ملايين المتاجر خلال ستة أشهر، وكيف تجهّز موقعك أو متجرك له من اليوم. بلا تهويل، وبلا ترجمة حرفية لمقالات إنجليزية.

ما هو WebMCP بالضبط

لسنوات كان الموقع مصمماً لعين الإنسان ويده: أزرار وقوائم وألوان. عندما دخلت مساعدات الذكاء الاصطناعي على الخط اضطرت إلى تقليد الإنسان: تصوّر الصفحة، تقرأ شجرة الصفحة (DOM)، وتضغط كأنها مستخدم. هذا الأسلوب يسمّونه actuation (التحريك البصري)، وهو بطيء ومكلف ويتكسر مع أي تعديل في التصميم.

WebMCP يقلب المعادلة. بدل أن يخمّن المساعد الذكي ما تستطيع الصفحة فعله، الصفحة تعلن له: هذه أدواتي، وهذا وصف كل أداة، وهذه المدخلات التي تحتاجها. المساعد الذكي يقرأ القائمة، يرسل المعاملات المطلوبة، ويستلم نتيجة منظمة.

المعيار مطوّر من مهندسين في فريق Chrome لدى Google وفريق Edge لدى Microsoft، ويُحتضن داخل مجموعة Web Machine Learning Community Group في W3C. أُعلن رسمياً في 10 فبراير 2026 كمعاينة مبكرة في Chrome 146 Canary خلف خيار تجريبي، وفي يونيو دخل مرحلة تجريبية عامة يستطيع أي موقع الانضمام إليها.

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

الفرق بينه وبين MCP: أين تعيش الأداة؟

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

هذا ممتاز للعمليات الخلفية. لكنه يواجه ثلاث مشكلات عندما يكون التطبيق واجهة ويب تفاعلية، والمواصفة نفسها تسمّيها بالاسم:

• تجاوز الواجهة: التفاعل يحدث بين المساعد الذكي والخادم، والصفحة التي فتحها المستخدم لا ترى شيئاً.
• تكرار الحالة والصلاحيات: عليك إعادة بناء جلسة المستخدم وسياقه وتسجيل دخوله على خادم منفصل.
• عبء المطوّر: لكي تكشف قدرات موجودة أصلاً في JavaScript الواجهة، تحتاج إلى كتابة خادم كامل.

WebMCP يحل المشكلات الثلاث بخطوة واحدة: الأداة تُعرَّف في سكربت الصفحة، وتنفَّذ بالجلسة نفسها والصلاحيات نفسها والكود نفسه. ولهذا بنت Cloudflare جسراً يحوّل خادم MCP الموجود لديك أصلاً إلى أدوات WebMCP داخل الصفحة. ليس بديلاً، بل امتداداً.

كيف يعمل تقنياً

كل أداة في WebMCP لها أربعة أجزاء: name اسم فريد، وdescription وصف بلغة طبيعية يقرؤه النموذج، وinputSchema مخطط JSON Schema للمدخلات، وexecute الدالة التي تنفذ العمل وترجع النتيجة.

الواجهة البرمجية اسمها document.modelContext. وإذا رأيت في مقالات قديمة navigator.modelContext فهو الاسم الأول نفسه: تغيّر مع Chrome 150 وبقي الاسم القديم بديلاً مؤقتاً. المواصفة الحالية تستخدم الجديد.

الطريقة الأولى: أداة برمجية

// تسجيل أداة بحث في كتالوج المتجر
const controller = new AbortController();

await document.modelContext.registerTool({
  name: "search_products",
  description: "يبحث في منتجات المتجر بالاسم أو النوع ويرجع أفضل 5 نتائج",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "كلمة البحث مثل: عود كمبودي" },
      maxPrice: { type: "number", description: "أعلى سعر مقبول" }
    },
    required: ["query"]
  },
  async execute({ query, maxPrice }) {
    // دالة البحث نفسها التي تستخدمها الواجهة أصلاً
    const items = await searchCatalog(query, maxPrice);
    renderResults(items); // المستخدم يرى النتائج على الشاشة
    return { content: [{ type: "text", text: JSON.stringify(items) }] };
  }
}, { signal: controller.signal });

// لإلغاء التسجيل لاحقاً: controller.abort()

لاحظ السطرين المهمين: execute تستدعي دالة البحث الموجودة لديك، وترسم النتائج على الشاشة. هذا جوهر المعيار: المساعد الذكي لا يتجاوز واجهتك، بل يشغّلها.

الطريقة الثانية: نموذج HTML وصفي (Declarative)

أغلب المواقع فيها نماذج جاهزة: بحث، تواصل، حجز. المعيار يجعل المتصفح يحوّل النموذج إلى أداة تلقائياً بثلاث خصائص فقط:

<form action="/search"
      toolname="search_products"
      tooldescription="ابحث في المنتجات بالاسم مع حد أعلى للسعر"
      toolautosubmit>
  <input name="q" required
         toolparamdescription="اسم المنتج أو نوعه">
  <input name="max" type="number"
         toolparamdescription="أعلى سعر مقبول">
  <button>بحث</button>
</form>

toolname وtooldescription يقابلان الاسم والوصف في الطريقة البرمجية. وtoolautosubmit خاصية منطقية: إذا وُجدت يرسل المساعد الذكي النموذج مباشرة بعد التعبئة، وإذا غابت يملأ الحقول ويترك الضغط للمستخدم. هذا التفصيل الصغير هو صمام الأمان في النماذج الحساسة.

دورة حياة الاستدعاء

1. التسجيل

   الصفحة تسجّل أداة أو أكثر عبر registerTool() أو عبر خصائص النموذج.

2. الاكتشاف

   المساعد الذكي المتصل بالصفحة يسأل المتصفح عن قائمة الأدوات النشطة ومخططاتها، مثلاً عبر getTools().

3. الاستدعاء

   المساعد الذكي يرسل معاملات مطابقة للمخطط، والمتصفح يتوسط ويتحقق من المصدر والصلاحيات.

4. التنفيذ

   دالة execute تعمل في سياق صفحتك، بجلسة المستخدم نفسها، وتستطيع إيقافها بإشارة إلغاء.

5. الرد

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

جرّب المحاكي: كيف يبدو استدعاء أداة فعلياً

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

الفرق مع الطريقة القديمة ليس في السرعة فقط. الفرق أن كل خطوة كانت قابلة للتكرار: الاستدعاء نفسه، النتيجة نفسها، بغض النظر عن لون الزر أو مكانه في التصميم.

ما الذي تغيّر في أغسطس 2026

لو كُتب هذا المقال في يوليو لكان عن «معيار واعد قيد التجربة». ما حدث في أغسطس نقله إلى «طبقة مشغّلة على جزء كبير من التجارة الإلكترونية». وهذا ترتيب الأحداث كما وثّقته المصادر:

Shopify: مفعّل على كل متجر، بلا طلب من التاجر

في 5 أغسطس أعلنت Shopify إضافة WebMCP إلى كل واجهات المتاجر المبنية على Liquid (أي عملياً كل قالب Shopify قياسي) وإلى متاجر Hydrogen في معاينة المطورين. الأدوات المسجلة تلقائياً: البحث في الكتالوج، إدارة السلة، بدء الدفع، والاستعلام عن السياسات. لا شيء يثبّته التاجر. والتفعيل الفعلي بحسب المتابعات المستقلة بدأ في 21 أغسطس.

القيد المهم الذي لا يُذكر في العناوين: هذا يعمل حالياً في المتصفحات المبنية على Chromium ضمن المرحلة التجريبية، ولمتسوق يأتي ومعه مساعد ذكي. أي أن الأثر اليوم محدود، لكن البنية صارت جاهزة قبل الطلب.

Cloudflare: أي موقع بزر واحد

بعدها بيوم، في 6 أغسطس، أطلقت Cloudflare معاينة مطورين تتيح لأي موقع خلف شبكتها تفعيل WebMCP من لوحة التحكم بلا تعديل في الكود ولا تغيير على الخادم الأصلي. الآلية: سكربت وسيط (bridge) يُحقن في HTML عند حافة الشبكة، يبحث عن واجهة WebMCP في المتصفح، وإذا لم يجدها يصمت وتعمل الصفحة كما هي.

حزمتا الأدوات الأوليتان: واحدة تكشف بيانات Content Credentials للمحتوى، والثانية تحوّل خادم MCP الموجود لديك (افتراضياً على المسار /mcp من النطاق نفسه) إلى أدوات داخل الصفحة تنفَّذ بجلسة الزائر. وجاء الإطلاق ضمن أسبوع Cloudflare للمساعدات الذكية الذي شمل كذلك رموز PACT للوصول الخاص بالتعاون مع Mozilla و Google و Microsoft و Shopify، وصيغة Markdown للمساعدات الذكية.

ثلاث إشارات أصغر، وأثرها أكبر

• ChatGPT Desktop صار مدرجاً في صفحة حالة الدعم الرسمية كبيئة تدعم WebMCP، و Brave أضاف دعماً تجريبياً في مساعد Leo.
• Edge 150 بدأ مرحلته التجريبية، فصار المعيار على المتصفحين الأكثر انتشاراً في بيئات الشركات.
• هاكاثون WebMCP Challenge الذي تنظّمه OpenAI بمشاركة Chrome و Cloudflare و Shopify و Vercel و Render و Netlify من 25 أغسطس إلى 3 سبتمبر 2026. عندما تجتمع هذه الأسماء على معيار واحد، فلم يعد تجربة فريق.

دعم المتصفحات الآن

الخلاصة العملية: لا تفترض وجود WebMCP لدى أي زائر. المعيار مصمم على مبدأ التحسين التدريجي (Progressive Enhancement): تفحص وجود document.modelContext قبل التسجيل، وإذا غاب تعمل الصفحة كما هي. ولهذا بالضبط ما زال Schema Markup والبنية الدلالية النظيفة هما الأساس الذي يقرؤه كل مساعد ذكي، بوجود WebMCP أو من دونه.

ماذا يعني هذا للمواقع والمتاجر العربية

هنا يجب أن أكون واضحاً بدل أن أكون متحمساً. حتى تاريخ كتابة هذا المقال لم أجد إعلاناً من أي منصة متاجر عربية، مثل سلة أو زد أو غيرهما، عن دعم WebMCP. المتاجر العربية على Shopify حصلت عليه تلقائياً، ومتاجر ووكومرس تستطيع إضافته بنفسها، ومنصات السوق الإقليمية ما زالت خارج الصورة رسمياً. إذا تغيّر هذا سأحدّث المقال.

لكن المسألة أعمق من «من يدعم». ما يحدث الآن هو انتقال جزء من رحلة الشراء من التصفح إلى التفويض: العميل لا يفتح عشرة متاجر، بل يقول لمساعده الذكي ما يريد والمساعد الذكي يقارن وينفّذ. في هذه الرحلة، المتجر الذي يعلن أدواته بوضوح يكمل الصفقة، والمتجر الذي يعتمد على «انظر إلى الصفحة وخمّن» يخسرها بصمت، من دون أن يعرف أنه كان في المنافسة أصلاً.

وهذا المنطق نفسه الذي شرحته في الظهور في إجابات جوجل الذكية: المساعد الذكي يفضّل المصدر الذي يستطيع قراءته والتنفيذ عليه بلا احتكاك. WebMCP هو نسخة «التنفيذ» من الفكرة نفسها.

كيف تجهّز موقعك اليوم: خطة من خمس خطوات

1. حدّد ثلاث مهام يطلبها عملاؤك فعلاً

   ليس «كل الوظائف». ثلاث فقط: بحث في المنتجات، تتبع طلب، حجز موعد أو طلب عرض سعر. استخرجها من رسائل واتساب والدعم التي تصلك، لأنها هي التي سيطلبها المساعد الذكي نيابة عن العميل.

2. ابدأ بالنماذج الوصفية

   أسرع مكسب: أضف toolname وtooldescription إلى نموذج البحث ونموذج التواصل، وtoolparamdescription إلى كل حقل. من دون toolautosubmit في أي نموذج يرسل بيانات حساسة.

3. غلّف منطق JavaScript الموجود بأدوات برمجية

   افحص وجود document.modelContext أولاً، وسجّل أدواتك بوصف دقيق ومخطط صارم. الوصف يقرؤه نموذج لغوي، فاكتبه كأنك تشرح لموظف جديد ماذا تفعل الأداة ومتى تُستخدم.

4. صمّم الأمان قبل الأدوات لا بعدها

   عامل مدخلات المساعد الذكي كمدخلات غير موثوقة مثل أي نموذج عام. لا تكشف عمليات إدارية أبداً. اطلب تأكيداً بشرياً على الشاشة لأي دفع أو حذف أو إرسال. وقيّد الإذن عبر ترويسة Permissions-Policy حسب حاجتك.

5. اختبر بأدوات Chrome قبل أن تعلن

   فعّل الخيار التجريبي chrome://flags/#enable-webmcp-testing وأعد التشغيل، وافتح تبويب WebMCP في DevTools لترى أدواتك المسجلة، وثبّت إضافة Model Context Tool Inspector لتستدعيها يدوياً وتجرّبها بلغة طبيعية. وللأتمتة توجد واجهة اختبار navigator.modelContextTesting.

مثال واقعي: موقع خدمات على ووردبريس

هذا مقتطف حقيقي يصلح لأي موقع استشارات أو خدمات، ويُضاف عبر إضافة مقتطفات الكود في قسم head من الصفحة. يسجّل أداتين: واحدة تشرح الخدمات، وثانية تجهّز طلب فحص من دون أن ترسل شيئاً تلقائياً:

if ("modelContext" in document) {
  document.modelContext.registerTool({
    name: "list_services",
    description: "يعرض خدمات السيو ومحركات الإجابة المتاحة مع رابط كل خدمة",
    inputSchema: { type: "object", properties: {} },
    async execute() {
      const links = [...document.querySelectorAll("nav a[href*='/']")]
        .map(a => ({ title: a.textContent.trim(), url: a.href }));
      return { content: [{ type: "text", text: JSON.stringify(links) }] };
    }
  });

  document.modelContext.registerTool({
    name: "prepare_audit_request",
    description: "يجهّز رسالة طلب فحص سيو بموقع العميل ويعرضها للمستخدم ليؤكد الإرسال بنفسه",
    inputSchema: {
      type: "object",
      properties: { site: { type: "string", description: "رابط موقع العميل" } },
      required: ["site"]
    },
    async execute({ site }) {
      const msg = "أريد فحص سيو لموقعي: " + site;
      // نعرض الرسالة على الشاشة، والمستخدم هو الذي يضغط إرسال
      showConfirmBox(msg);
      return { content: [{ type: "text", text: "prepared, waiting for user confirmation" }] };
    }
  });
}

لاحظ أن الأداة الثانية لا ترسل شيئاً. تجهّز وتعرض وتنتظر. هذا هو الفرق بين أداة تخدم العميل وأداة تفتح باباً للإزعاج الآلي.

الحدود والمخاطر بصراحة

لا أريدك أن تخرج من المقال وتعيد بناء موقعك حول معيار عمره ستة أشهر. هذه الحدود كما هي:

• ما زال تجريبياً: واجهة برمجية غيّرت اسمها مرة خلال نصف سنة تستطيع أن تتغير مرة ثانية. اكتب كودك مع فحص وجود الواجهة وخطة تراجع.
• لا يصل إلى كل الزوار: Chromium فقط اليوم، ولزوار يستخدمون مساعداً ذكياً. أغلب زوارك ما زالوا بشراً يقرؤون صفحاتك.
• لا يرفع ترتيبك في جوجل: WebMCP طبقة تنفيذ للمساعدات الذكية داخل المتصفح، وليس إشارة ترتيب. إذا أردت ظهوراً في نتائج البحث وإجابات الذكاء الاصطناعي، فالطريق ما زال المحتوى والبنية وتحسين محركات الإجابة.
• الأمان مسؤوليتك: المواصفة نفسها تفتح أسئلة عن التأكيد البشري والتدفق والتعرض للمساعد الذكي المدمج في المتصفح. أي أداة تكشفها هي باب جديد لموقعك، وحقن التعليمات (Prompt Injection) عبر محتوى الصفحة خطر حقيقي.
• مصمم ليبقى الإنسان مشرفاً (Human in the loop): المواصفة تستبعد صراحة المساعدات الذكية المستقلة كلياً والتصفح بلا واجهة. إذا كانت حالتك أتمتة خلفية، فـ MCP التقليدي هو مكانك.

الأسئلة الشائعة

الخلاصة التي أريدك أن تخرج بها: WebMCP لا يطلب منك أن تصدّق وعداً، بل يطلب منك ثلاث أدوات مكتوبة بعناية وفحص وجود قبل التسجيل. من يبدأ الآن بهذه البساطة يكون جاهزاً يوم يصير المساعد الذكي هو العميل الأول على موقعه. وإذا أردت أن تعرف من أين تبدأ في موقعك تحديداً، تواصل معي.