WebMCP pour Shopify : comment préparer votre boutique aux agents IA

Les agents IA commencent à faire des achats à la place des gens, et une boutique Shopify s’y prête bien : les produits, les prix et le stock sont déjà accessibles via des API propres. Ce guide montre comment ajouter des outils WebMCP à un storefront Shopify. Vous découvrez le sujet ? Commencez par ce qu’est WebMCP.

WebMCP ou le MCP de Shopify ?

Chaque boutique Shopify dispose désormais d’un endpoint MCP à l’adresse /api/mcp, que les applications d’IA peuvent appeler pour la recherche de produits, les paniers et les conditions de la boutique. Il fonctionne sur les serveurs de Shopify et vous ne contrôlez pas ses outils. WebMCP est différent : les outils se trouvent sur votre page, s’exécutent dans le navigateur de l’acheteur et font exactement ce que vous avez prévu, par exemple vos propres conseils de taille ou vos règles de lots. Les deux fonctionnent bien ensemble. Notre guide WebMCP ou MCP explique la différence.

Où placer le code

• Thème : un fichier de script chargé depuis theme.liquid. C’est simple et cela convient pour une boutique, mais il faut y faire attention quand vous changez de thème.
• Extension de thème d’application : un bloc intégré que le marchand active dans l’éditeur de thème. Il résiste aux changements de thème et c’est la meilleure voie pour les agences et les marchands avec plusieurs boutiques.

Un outil de recherche de produits

L’endpoint de recherche prédictive de Shopify est public et renvoie ce que les acheteurs peuvent déjà voir : il ne nécessite donc aucune clé privée :

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,
      })));
    },
  });
}

Les actions de panier exigent l’acheteur

Un outil peut appeler /cart/add.js avec la session de l’acheteur, mais signalez-le avec consequentialHint: true pour que l’acheteur donne d’abord son accord. Laissez la commande et le paiement à l’acheteur. Ne placez pas de jeton Admin API dans le code du storefront : tout ce qui se trouve dans le navigateur est public.

Règles de sécurité

• Commencez en lecture seule. La recherche et les détails d’abord ; signalez-les avec readOnlyHint.
• Demandez avant d’agir. Signalez les actions de panier, de réservation et de formulaire avec consequentialHint, pour que le visiteur confirme.
• Vérifiez côté serveur. Le navigateur n’est pas une barrière de sécurité : validez chaque paramètre et chaque permission dans votre backend.
• Renvoyez le minimum. N’envoyez que ce qu’un client a le droit de voir, jamais de données d’administration ni les informations d’autres clients.

Testez

1. Utilisez une version récente de Chrome avec WebMCP activé, via l’origin trial ou le flag de test.
2. Appelez chaque outil avec des paramètres valides et invalides.
3. Vérifiez que les visiteurs habituels ne voient aucune différence.
4. Lancez le vérificateur WebMCP gratuit sur la page précise où se trouvent vos outils.

Vous préférez nous le confier ?

Nous ajoutons des outils WebMCP à Shopify et à d’autres technologies, en commençant par un audit de préparation gratuit. Découvrez nos services d’intégration WebMCP.