WebMCP في Shopify: كيف تجهّز متجرك لوكلاء الذكاء الاصطناعي

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

WebMCP أم MCP الخاص بـ Shopify؟

لكل متجر Shopify الآن نقطة نهاية MCP على المسار /api/mcp، تستدعيها تطبيقات الذكاء الاصطناعي للبحث عن المنتجات وإدارة السلال ومعرفة السياسات. وهي تعمل على خوادم Shopify ولا تتحكّم أنت في أدواتها. أما WebMCP فمختلف: الأدوات موجودة في صفحتك، وتعمل في متصفح المتسوّق، وتفعل بالضبط ما تصمّمه، مثل نصائح المقاسات أو قواعد الباقات الخاصة بك. ويعمل الاثنان معًا بشكل جيد. ويشرح دليلنا WebMCP مقابل MCP الفرق بينهما.

أين يوضع الكود

• القالب: ملف سكربت يُحمَّل من theme.liquid. طريقة بسيطة ومناسبة لمتجر واحد، لكنها تحتاج إلى انتباه عند تغيير القالب.
• امتداد تطبيق للقالب (theme app extension): كتلة تضمين تطبيق يفعّلها التاجر من محرّر القالب. تبقى بعد تغيير القالب، وهي الطريق الأفضل للوكالات ولمن لديه عدة متاجر.

أداة للبحث عن المنتجات

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

const mc = document.modelContext || navigator.modelContext;
if (mc && mc.registerTool) {
  mc.registerTool({
    name: 'search_products',
    description: 'Search this store. Returns up to 5 products with price, availability and link.',
    inputSchema: {
      type: 'object',
      properties: { query: { type: 'string', description: 'Keywords, e.g. linen shirt' } },
      required: ['query'],
    },
    annotations: { readOnlyHint: true },
    execute: async ({ query }) => {
      const url = new URL('/search/suggest.json', location.origin);
      url.searchParams.set('q', String(query).slice(0, 80));
      url.searchParams.set('resources[type]', 'product');
      url.searchParams.set('resources[limit]', '5');
      const data = await (await fetch(url)).json();
      return JSON.stringify(data.resources.results.products.map((p) => ({
        name: p.title, price: p.price, available: p.available, url: p.url,
      })));
    },
  });
}

إجراءات السلة تحتاج إلى المتسوّق

يمكن للأداة استدعاء /cart/add.js بجلسة المتسوّق نفسه، لكن ميّزها بـ consequentialHint: true ليوافق المتسوّق أولًا. واترك إتمام الشراء والدفع للمتسوّق. ولا تضع رمز Admin API في كود واجهة المتجر: فكل ما في المتصفح مكشوف للجميع.

قواعد الأمان

• ابدأ بالقراءة فقط. البحث والتفاصيل أولًا، وميّزها بـ readOnlyHint.
• اسأل قبل التنفيذ. ميّز إجراءات السلة والحجز والنماذج بـ consequentialHint ليؤكّدها الزائر.
• تحقّق على الخادم. المتصفح ليس حدًّا أمنيًّا، لذا تحقّق من كل مدخل وكل صلاحية في الواجهة الخلفية.
• أعِد أقل قدر ممكن. أرسل فقط ما يحق للعميل رؤيته، ولا ترسل أبدًا بيانات الإدارة أو سجلات عملاء آخرين.

اختبر الأدوات

1. استخدم إصدارًا حديثًا من Chrome مع تفعيل WebMCP، عبر التجربة الأولية (origin trial) أو إعداد الاختبار.
2. استدعِ كل أداة بمدخلات صحيحة وأخرى خاطئة.
3. تأكّد من أن الزوار العاديين لا يلاحظون أي تغيير.
4. شغّل فاحص WebMCP المجاني على الصفحة نفسها التي توجد فيها أدواتك.

تريد أن ننفّذه لك؟

نضيف أدوات WebMCP إلى Shopify وتقنيات أخرى، بدءًا بتقييم مجاني للجاهزية. اطّلع على خدمات دمج WebMCP.