كيفية إضافة WebMCP إلى تطبيق Next.js الخاص بك

غالبًا ما تواجه وكلاء الذكاء الاصطناعي (AI agents) صعوبة في فهم تطبيقات الويب؛ حيث تقوم بكشط الـ DOM وتخمين وظائف الأزرار، مما يؤدي إلى حدوث أخطاء وهلوسات (hallucinations).

يحل WebMCP هذه المشكلة. فهو معيار من معايير W3C يضيف modelContext API إلى المتصفحات. وبدلاً من التخمين، يخبر تطبيق Next.js الخاص بك الوكيل بالضبط بالوظائف التي يمكنه تشغيلها.

WebMCP مقابل Anthropic MCP

يعمل Anthropic MCP على الخادم (server). ويستخدم JSON-RPC للاتصال بقواعد البيانات أو واجهات برمجة التطبيقات (APIs). وهو يعمل خارج المتصفح.

أما WebMCP فيعمل داخل علامة تبويب المتصفح. ويقوم بتسجيل الأدوات محليًا، ويستخدم جلسة المستخدم الحالية. لا حاجة إلى مصادقة (auth) إضافية أو واجهة خلفية (backend).

يمكنهما العمل معًا؛ حيث يمكنك استخدام MCP للمهام الخلفية (backend) وWebMCP للتفاعلات الأمامية (frontend).

طريقتان لعرض الأدوات:

  • نماذج HTML: أضف سمات toolname و tooldescription إلى نماذجك. سيرى الوكيل الأداة والمعلمات (parameters) دون الحاجة إلى أي JavaScript. استخدم هذه الطريقة للبحث والفلاتر.

  • JavaScript: استخدم navigator.modelContext API للمنطق الديناميكي. هذه هي الطريقة الأفضل لتدفقات العمل متعددة الخطوات.

التنفيذ في Next.js

  1. قم بتثبيت الـ polyfill لدعم المتصفح: npm install @mcp-b/global @mcp-b/react-webmcp

  2. أنشئ WebMCPProvider لتهيئة الـ polyfill في التنسيق (layout) الخاص بك.

  3. استخدم useWebMCP hook في مكونات العميل (client components). يتولى هذا الـ hook عملية تسجيل الأدوات والتنظيف (cleanup) تلقائيًا.

مثال على إعداد أداة:

useWebMCP({
  name: 'searchProducts',
  description: 'Search the product catalog.',
  inputSchema: z.object({
    query: z.string(),
    category: z.string().optional(),
  }),
  execute: async ({ query, category }) => {
    const res = await fetch(`/api/products?q=${query}`);
    return res.json();
  },
});

أفضل الممارسات

  • استخدم HTTPS. يتطلب WebMCP اتصالًا آمنًا في بيئة الإنتاج (production).
  • حافظ على عدد قليل من الأدوات. كثرة الأدوات تزيد من حجم سياق الذكاء الاصطناعي (AI context) وتؤدي إلى إبطاء عملية الاستنتاج. حاول ألا تتجاوز 50 أداة لكل صفحة.
  • قدم أوصافًا غنية. يعتمد الوكلاء على هذه النصوص لفهم متى يجب استخدام الأداة.
  • استخدم طبقة خدمة (service layer). لا تعتمد على حالة React (React state) داخل معالجات الأدوات. استخدم وظائف بسيطة لتجنب البيانات القديمة (stale data).

الاختبار

افتح Chrome 146 أو إصدارًا أحدث. قم بتفعيل علم (flag) WebMCP في chrome://flags. استخدم إضافة Model Context Tool Inspector لاختبار أدواتك دون الحاجة إلى وكيل ذكاء اصطناعي.

يمثل WebMCP مستقبل تصفح الويب القائم على الوكلاء (agentic web browsing). ابدأ في تنفيذه الآن لتكون مستعدًا عندما تقوم المتصفحات بتفعيله افتراضيًا.

المصدر: https://dev.to/webtoolshub/how-to-add-webmcp-to-your-nextjs-app-complete-2026-guide-pbp