ما هو WebMCP؟ وكيف تجهّز موقعك لوكلاء الذكاء الاصطناعي

WebMCP واجهة جديدة في المتصفح بتخلي أي موقع يقدّم أدوات لوكلاء الذكاء الاصطناعي، أو الـAI Agents، زي ChatGPT وChrome. كل أداة ليها اسم، ووصف بيقول بتعمل إيه وإمتى تتستخدم، ومدخلات محددة زي اسم المنتج أو أقصى سعر.

والأداة نفسها بتشتغل جوه صفحة الموقع، بالـJavaScript بتاع الموقع، وبنفس جلسة المستخدم. يعني لو الزبون مسجّل دخول في المتجر، الـAgent بيستخدم الأداة بنفس الحساب، من غير ما تبني API منفصل.

خلينا نرجع لطلب الزبون، ونشوف الـAgent هيعمل إيه في الحالتين. اختار الحالة، واضغط «الخطوة التالية»، وتابع الجزء اللي الـAgent بيلمسه في الصفحة في كل خطوة.

الفرق مش في عدد الخطوات وبس. من غير WebMCP، كل خطوة مبنية على تخمين الـAgent لشكل الصفحة، وأي تعديل في التصميم ممكن يبوّظها. ومع WebMCP، الموقع هو اللي بيحدد الأداة ومدخلاتها، والـAgent بينفّذ.

قبل ما تكتب أي كود، اسأل نفسك سؤال واحد: الزبون بيعمل إيه في موقعي أصلًا؟ في متجر القهوة بتاعنا، الإجابة غالبًا أربع حاجات: يدوّر على منتج، ويشوف هو متاح ولا لأ، ويضيفه للسلة، ويتابع طلبه بعد ما يشتري. وكل حاجة فيهم ممكن تبقى أداة:

والعمود الأخير هو أهم عمود في الجدول. الأدوات اللي بتقرا بس آمنة تسيبها للـAgent يستخدمها براحته، لكن أي أداة بتغيّر حاجة، زي السلة أو الدفع، لازم المستخدم يفضل شايفها ومتحكم فيها. وده بالظبط اللي هنطبقه في الكود.

أسهل بداية هي فورم البحث، لأنه موجود عندك أصلًا. كل اللي بتعمله إنك بتضيف للفورم اسم ووصف، ولكل خانة وصف اختياري، ودي الطريقة اللي توثيق Chrome بيسميها Declarative API:

<form toolname="search_products"
      tooldescription="Search the store's products by name, with an optional maximum price in EGP."
      action="/search">
  <input name="q" toolparamdescription="Product name or type, like manual coffee grinder">
  <input name="max_price" type="number" toolparamdescription="Highest price in EGP">
  <button>Search</button>
</form>

كده الفورم بقى أداة اسمها search_products. لما الـAgent يستدعيها، المتصفح بيركّز على الفورم ويملا الخانتين قدام الزبون، والزبون هو اللي بيضغط «بحث»، زي ما شفت في المحاكاة.

ولو شلت toolname أو tooldescription، الأداة بتختفي. أما toolautosubmit فمناسب لفورم البحث، لأنه مش بيغيّر حاجة، لكنه مش مناسب لفورم دفع أو حذف.

مش كل حاجة فورم. الكمية المتاحة من منتج مثلًا بتيجي من API عندك، ومفيش فورم الزبون بيملاه علشانها. هنا بتسجّل الأداة بكود، ودي الطريقة اللي اسمها Imperative API:

document.modelContext.registerTool({
  name: "check_stock",
  description: "Returns how many units of a product are in stock.",
  inputSchema: {
    type: "object",
    properties: { sku: { type: "string" } },
    required: ["sku"],
  },
  annotations: { readOnlyHint: true },
  execute: async ({ sku }) => {
    const res = await fetch(`/api/stock?sku=${encodeURIComponent(sku)}`);
    return res.json();
  },
});

الكود ده بيعرّف الأداة بنفس الحاجات اللي في الفورم وزيادة. name وdescription زي الفورم بالظبط، وinputSchema بيحدد المدخلات بصيغة JSON Schema، يعني الأداة محتاجة sku ونوعه نص. وexecute هو الكود اللي بيتنفذ فعلًا، واللي بيرجّعه بيوصل للـAgent. أما readOnlyHint فبيقول للـAgent إن الأداة بتقرا بس ومش بتغيّر حاجة.

ولو الأداة بتغيّر حاجة، زي add_to_cart، بتستخدم consequentialHint بدل readOnlyHint، علشان تعلّم إنها بتعمل حاجة مهمة أو مينفعش ترجع فيها.

ولو لقيت مقالات أو أمثلة بتكتب navigator.modelContext، فده الاسم القديم. المواصفة الحالية نقلته لـdocument.modelContext، فاكتب الجديد.

WebMCP بيتلخبط مع حاجتين: MCP، لأن الاسم جاي منه، وSchema، لأن الاتنين بيوصفوا الموقع لآلة. والجدول ده بيفرّق بين التلاتة:

المواصفة نفسها بتوصف الصفحة اللي فيها WebMCP إنها شبه سيرفر MCP، بس أدواته مكتوبة في كود الصفحة بدل ما تكون على سيرفر. وفي نفس الوقت WebMCP مش بديل لـSchema: الـSchema بتوصف المنتج نفسه، وWebMCP بيخلي الـAgent يعمل حاجة بيه، زي إنه يدوّر عليه أو يضيفه للسلة.

WebMCP موجود في Chrome، لكنه لسه مش مفعّل لكل الناس. علشان تجربه على جهازك:

1. افتح Chrome واكتب في شريط العنوان chrome://flags/#enable-webmcp-testing، وخلّي الخيار Enabled، واقفل Chrome وافتحه تاني.
2. نزّل إضافة Model Context Tool Inspector اللي Chrome بيرشحها، وحط فيها API Key من Gemini، لأنها بتستخدمه علشان تجرّب الأدوات بكلام عادي.
3. افتح صفحة فيها أدوات WebMCP، زي الديموهات اللي Chrome بيشاورلها، أو أي صفحة في موقعنا، لأن كل صفحاته فيها أداة search_courses للبحث في الكورسات، وهتلاقي الإضافة بتعرض كل أداة باسمها ووصفها ومدخلاتها.
4. اطلب حاجة بالكلام، زي «دوّرلي على مطحنة يدوية تحت 1500»، وتابع الأداة اتستدعت إزاي، وإيه اللي اتملى في الفورم.

ولو عايز تعرف صفحة من موقعك جاهزة ولا لأ من غير ما تفعّل حاجة في متصفحك، افحصها بـأداة فحص WebMCP، وهتقولك الصفحة فيها أدوات ولا لأ، والوكلاء يقدروا يدخلوها ولا لأ، وإيه اللي ناقصها وإزاي تصلحه.

ولما تبقى جاهز إن زوارك الحقيقيين يستخدموه، Chrome عامل Origin Trial من نسخة 149: بتسجّل موقعك، وبتحط الـToken اللي بتاخده في الصفحة. وخلي خيار Third-party matching مقفول وانت بتسجّل، لأن Chrome بيتجاهل الـToken ده لو اتحط في الصفحة نفسها، وخلي بالك كمان إن WebMCP مش بيشتغل غير على HTTPS.

وفي ChatGPT، افتح المتصفح المدمج في تطبيق الكمبيوتر وادخل الصفحة. لو فيها أدوات، هيظهر سهم في شريط العنوان، رمادي لما الأدوات متاحة وأزرق وChatGPT بيستخدمها. وشرحنا خطوات الميزة دي في مميزات شات جي بي تي المتقدمة.

خلينا نكون واضحين من الأول: مفيش أي دليل إن WebMCP بيأثر على ترتيبك في جوجل، وتوثيق Chrome نفسه مبيتكلمش عن البحث خالص. فلو حد قالك إنه عامل ترتيب جديد، ده كلام مش مبني على مصدر.

اللي بيتغير فعلًا هو طريقة استخدام المواقع. جزء من الناس بقى يطلب من ChatGPT، أو من متصفح فيه Agent، إنه يدوّر أو يحجز بداله، والـAgent هو اللي بيدخل الموقع. ولو الموقع مش واضح للـAgent، المهمة ممكن تفشل، حتى لو صفحتك أول نتيجة في جوجل.

والجزء اللي يخصك ككاتب سيو هو كتابة الأدوات نفسها، لأن اسم الأداة ووصفها هما اللي الـAgent بيختار على أساسهم، زي ما العنوان والوصف هما اللي الزبون بيختار على أساسهم في نتايج البحث. ودي نصايح Chrome لكتابة الأدوات، بأمثلة من المتجر:

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

• أي أداة بتغيّر حاجة مينفعش ترجع فيها، زي الدفع أو الحذف، سيب فيها الإرسال للمستخدم، ومتستخدمش معاها toolautosubmit، ولو بالـJavaScript علّمها بـconsequentialHint.
• خلي رسالة الخطأ بتقول السبب، زي «المنتج ده مش متاح» أو «رقم الطلب غلط»، علشان الـAgent يفهم ويجرّب تاني ببيانات صح.
• WebMCP لسه مسودة وتفاصيله بتتغير، واسم الواجهة نفسه اتغير من navigator لـdocument، فراجع التوثيق قبل ما تطلق أي حاجة.
• الدعم الموثّق لحد دلوقتي في Chrome، وفي ChatGPT عن طريق Site Tools، فمتعتمدش عليه لوحده في أي حاجة أساسية في الموقع.
• ولما تخلّص، افحص الصفحة بـأداة فحص WebMCP علشان تتأكد إن الفورم بقى أداة، وإن كل خانة فيه ليها وصف.