شرح WebMCP: جهّز نماذج موقعك لوكلاء الذكاء الاصطناعي

نموذج ويب زجاجي يتصل بوكيل ذكاء اصطناعي في المتصفح، تمثيل لشرح WebMCP وتجهيز نماذج المواقع

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

بصراحة: هذا المقال قراءة لتوثيق Chrome الرسمي ولمقال فريق Elementor، ولم نجرّب WebMCP على موقع حقيقي بعد. الميزة نفسها ما زالت تجريبية.

ما هو WebMCP بلغة صاحب الموقع؟

WebMCP معيار ويب مقترح يسمح لصفحتك بأن تعلن لـ وكيل الذكاء الاصطناعي (AI Agent) الذي يعمل داخل متصفح الزائر عن الأفعال المتاحة فيها: «ابحث في المنتجات»، «أرسل رسالة»، «احجز موعداً». كل فعل يسمى أداة (Tool)، وله اسم ووصف وقائمة بالمعلومات التي يحتاجها.

الوكيل يختار الأداة ويملأ تفاصيلها، ثم ينفّذ كود موقعك نفسه الطلب. لا شيء يُثبَّت عند الزائر، ولا خادم منفصل تبنيه أنت، والأداة تعمل داخل تبويب الزائر وبجلسة الدخول الخاصة به.

الحالة الآن (نوفمبر 2026): يعمل WebMCP في Chrome وEdge بشكل تجريبي. بحسب توثيق Chrome، بدأت التجربة الأولية (Origin Trial) من الإصدار 149، أي أن الميزة تعمل مع زوار حقيقيين فقط على المواقع التي تسجّل فيها وتضيف رمز التجربة إلى صفحاتها. ويذكر مقال Elementor أن تجربتي Chrome وEdge تستمران حتى 30 مارس 2027.

الفرق بين WebMCP وخادم MCP

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

مقارنة سريعة

WebMCP مقابل خادم MCP

من يستفيد، وماذا يحتاج كل منهما؟

المعيارخادم MCPWebMCP
المستخدم المستهدفصاحب الموقع وفريقهأي زائر بوكيل
ربط أو تثبيتيربطه المستخدملا شيء
مكان التشغيلخارج المتصفحداخل تبويب الزائر
الصلاحياتحسب الربطجلسة الزائر
دعم Safariلا يعتمد عليهغير مدعوم
الاستقرارمستخدم الآنتجريبي
ابن موقعك قطعة قطعةarabcms.com

خادم MCP (MCP Server) يتيح لمساعد مثل Claude أن يقرأ موقعك ويتصرف فيه، لكن بشرط أن يربطه المستخدم بمساعده بنفسه، وهذه خطوة لن يقوم بها زائر عادي. لذلك يناسب صاحب الموقع وفريقه. أما WebMCP فموجّه لأي زائر يستخدم وكيلاً في متصفحه، دون أي ربط أو تثبيت.

ماذا يعني WebMCP لموقع ووردبريس؟

أغلب النماذج في مواقع ووردبريس تأتي من عدد محدود من الإضافات، لذلك قد يكفي تحديث واحد لإضافة نماذج شهيرة لتحويل ملايين النماذج إلى أدوات. ثلاثة أشياء تستحق المتابعة:

  • واجهة القدرات (Abilities API): أضيفت في ووردبريس 6.9، وتتيح للنواة والإضافات تعريف «قدرة» باسم ووصف ومخطط مدخلات ومخرجات وفحص صلاحيات مرتبط بأدوار المستخدمين. القدرات خاصة افتراضياً، والإضافة هي التي تقرر ما تكشفه. ويرى فريق Elementor أن القدرة تحمل أصلاً ما تحتاجه أداة WebMCP، فتحويلها خطوة صغيرة نسبياً.
  • إضافة WordPress MCP Adapter: تعرض هذه القدرات اليوم كأدوات MCP من الموقع نفسه، وتناسبك إذا أردت ربط مساعدك الخاص بموقعك.
  • Elementor 4.4: يذكر فريق Elementor أن الإصدار، وهو في مرحلة البيتا حالياً، يضيف قائمة باسم Agent Ready فيها أدوات WebMCP للقراءة فقط وملف llms.txt ونسخ Markdown من الصفحات، مجاناً، وأن دعم WebMCP في الأفعال مخطط له بدءاً من Atomic Forms.

في Elementor: إذا كانت مواقع عملائك مبنية على Elementor، فراقب قائمة Agent Ready في 4.4 قبل أن تكتب أي كود بنفسك. الـ API ما زال يتغير، وترك المنصة تتابع تحديثاته أوفر من صيانته يدوياً في كل موقع.

جرّبه على نموذج واحد: الطريقة التصريحية

أسهل طريقة هي الطريقة التصريحية (Declarative API): تضيف خاصيتين إلى نموذج موجود أصلاً، فيحوّله Chrome إلى أداة، وتصبح حقول النموذج مدخلاتها. ابدأ بنموذج البحث، لأنه لا يغيّر أي بيانات.

الخاصيتان الأساسيتان بحسب توثيق Chrome:

  • toolname: اسم الأداة.
  • tooldescription: وصف ما تفعله. حذف أي منهما يلغي تسجيل الأداة.

وهناك خاصيتان اختياريتان: toolparamdescription على كل حقل لوصفه (وإن غابت يستخدم المتصفح نص الـ <label> المرتبط به أو aria-description)، وtoolautosubmit لإرسال النموذج تلقائياً عند استدعاء الوكيل للأداة. هذا مثال التوثيق الرسمي لنموذج بحث:

<form toolautosubmit toolname="search_tool"
  tooldescription="Search the web" action="/search">
  <input type=text name=query>
</form>

خطوات التجربة محلياً:

تجربة محلية

أول أداة WebMCP في 4 خطوات

  1. أضف خاصيتين للنموذج

    toolname و tooldescription على نموذج البحث.

  2. فعّل علامة الاختبار

    chrome://flags/#enable-webmcp-testing ثم أعد التشغيل.

  3. افحص من DevTools

    Application ثم WebMCP، وجرّب Run tool.

  4. للزوار الحقيقيين

    سجّل في Origin Trial وأضف الرمز لصفحاتك.

ابن موقعك قطعة قطعةarabcms.com
  1. أضف toolname وtooldescription إلى نموذج البحث في نسخة اختبار من موقعك.
  2. افتح chrome://flags/#enable-webmcp-testing في Chrome، واجعلها Enabled، ثم أعد تشغيل المتصفح.
  3. افتح DevTools ثم تبويب Application واختر لوحة WebMCP. ستجد قائمتي Available Tools وInvoked Tools، وزر Run tool لتجربة الأداة يدوياً، وتنبيهاً عند مخالفة المخطط.
  4. إذا أردت أن يحصل عليها زوار حقيقيون، سجّل في التجربة الأولية وأضف رمزها إلى صفحاتك.

ملاحظة: في ووردبريس، يأتي وسم <form> عادة من إضافة النماذج أو من القالب، فراجع توثيق إضافتك لتعرف هل تسمح بإضافة خصائص مخصصة إلى الوسم من الواجهة أو عبر فلتر، قبل أن تعدّل ملفاتها مباشرة.

ماذا عن العربية؟ أوصاف الأدوات نصوص عادية يقرؤها نموذج لغوي، ويمكن أن تأخذ وصف الحقل من نص الـ label العربي. لكن جودة تعامل الوكلاء مع أوصاف وحقول عربية لم تُختبر بالعربية بعد، فاختبرها قبل الاعتماد عليها.

الطريقة البرمجية: أدوات لغير النماذج

لأي فعل ليس نموذجاً، مثل إضافة منتج إلى السلة أو حساب سعر، توفر الطريقة البرمجية (Imperative API) الدالة document.modelContext.registerTool(). تمرر لها اسماً ووصفاً ومخطط مدخلات بصيغة JSON Schema، ودالة execute تعمل عند استدعاء الوكيل للأداة. لاحظ أن الـ API تغيّر مرة واحدة على الأقل، من navigator.modelContext إلى document.modelContext.

هذا مثال التوثيق الرسمي كما هو:

await document.modelContext.registerTool({
  name: 'book_flight',
  description: 'Book a flight for the user with confirmed flight details.',
  inputSchema: {
    type: 'object',
    properties: {
      flightId: { type: 'string', description: 'ID of the flight to book' },
      passengers: { type: 'number', description: 'Number of tickets to purchase' },
    },
    required: ['flightId', 'passengers'],
  },
  annotations: {
    readOnlyHint: false,
    consequentialHint: true,
    untrustedContentHint: false,
    debugging: false,
  },
  execute: async ({ flightId, passengers }) => {
    // Add your flight booking transaction logic here.
    return `Booked ${passengers} passenger(s) on flight ${flightId}.`;
  },
});

أهم ما في المثال هو كتلة annotations:

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

ويوضح مقال Elementor أن هذه العلامات مجرد تلميحات، والقرار النهائي في احترامها للمتصفح والوكيل.

المخاطر والقيود قبل أن تعتمد عليه

  • الأمان أولاً: الأداة تعمل بصلاحيات الزائر المسجّل، فتستطيع فعل كل ما يستطيعه. وقد تحاول صفحة خبيثة أو تعليق أو مراجعة خداع الوكيل عبر حقن التعليمات (Prompt Injection) ليستدعي أداة لا يجب أن يستدعيها، ولا حل كاملاً لهذه المشكلة حتى الآن. ويحذّر توثيق Chrome أيضاً من أن إضافات Chrome تستطيع قراءة أدوات WebMCP وتشغيلها.
  • الـ API غير مستقر: ما تكتبه اليوم قد يحتاج إلى تعديل قبل أن يصبح معياراً.
  • ليس كل المتصفحات معه: بحسب مقال Elementor، تعارض WebKit (محرك Safari) الفكرة لأسباب تتعلق بالخصوصية والأمان وتصميم الـ API، وموقف Mozilla محايد. ولأن أغلب متصفحات iPhone مبنية على WebKit، سيغيب WebMCP عن شريحة كبيرة من زوار الجوال.
  • الوكلاء لم يلحقوا بعد: تسجيل الأداة لا يعني أن وكيلاً سيستخدمها.

التكلفة: WebMCP ميزة في المتصفح وليس خدمة مدفوعة، فلا اشتراك فيه، والتكلفة الحقيقية هي وقت التطوير والصيانة مع تغيّر الـ API. أما توفر وكلاء المتصفح التي تستخدمه في مصر والخليج فـ غير مؤكد ويختلف من وكيل لآخر.

تنبيه: ابدأ بأدوات للقراءة فقط مثل البحث، وأبقِ أي أداة ترسل أو تشتري أو تحذف خلف تأكيد بشري. واعتبر WebMCP طبقة إضافية فوق نماذجك، لا الطريقة الوحيدة لاستخدامها.

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

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

س: ما الفرق بين WebMCP و MCP؟
ج: خادم MCP يحتاج إلى أن يربطه المستخدم بمساعده، فيناسب صاحب الموقع وفريقه. WebMCP يعمل داخل متصفح أي زائر وبجلسة دخوله، دون ربط أو تثبيت.

س: هل يعمل WebMCP في Safari أو على iPhone؟
ج: لا حالياً. يعمل تجريبياً في Chrome وEdge، وتعارضه WebKit، وأغلب متصفحات iPhone مبنية عليها.

س: هل أحتاج إلى برمجة لاستخدام WebMCP في ووردبريس؟
ج: الطريقة التصريحية تحتاج فقط إلى إضافة خاصيتين إلى وسم النموذج، لكن الوصول إلى هذا الوسم قد يتطلب تعديل قالب إضافة النماذج. وقد توفره منصات مثل Elementor 4.4 دون كود.

س: هل WebMCP آمن على موقعي؟
ج: المخاطرة الرئيسية حقن التعليمات، لأن الأداة تعمل بصلاحيات الزائر. ابدأ بأدوات للقراءة فقط، واطلب تأكيداً بشرياً لأي فعل له عواقب.

الخلاصة

WebMCP أقرب محاولة حتى الآن لجعل الوكلاء يتصرفون في المواقع لا يقرؤونها فقط، وأساسه في ووردبريس موجود عبر Abilities API. لكنه تجريبي، والـ API يتغير، وSafari خارج الصورة، والأمان سؤال مفتوح.

خد نموذج البحث في نسخة الاختبار، ضيف له الخاصيتين وجرّبه من DevTools في ربع ساعة. كده تبقى فاهم الموضوع بإيدك قبل ما عميلك يسألك «موقعي جاهز للـ AI ولا لأ؟».

مراجع إضافية: WebMCP – Chrome for Developers، Declarative API – Chrome for Developers، Imperative API – Chrome for Developers

مرجع المقال (بالإنجليزية): From reading to acting: WebMCP and the agent-ready web
المقال ده مش ترجمة حرفية: متكيّف للقارئ العربي ومضاف عليه سياق ووردبريس وElementor وJetEngine.

اترك تعليقاً