WebMCP para Shopify: cómo preparar su tienda para agentes de IA

Los agentes de IA empiezan a comprar por las personas, y una tienda Shopify es un buen lugar para hacerlo: los productos, los precios y las existencias ya están detrás de API limpias. Esta guía muestra cómo añadir herramientas WebMCP a una tienda online de Shopify. ¿Es nuevo en el tema? Empiece por qué es WebMCP.

¿WebMCP o el MCP propio de Shopify?

Cada tienda Shopify tiene ya un endpoint MCP en /api/mcp, al que las aplicaciones de IA pueden llamar para buscar productos, gestionar carritos y consultar políticas. Funciona en los servidores de Shopify y usted no controla sus herramientas. WebMCP es diferente: las herramientas están en su página, se ejecutan en el navegador del comprador y hacen exactamente lo que usted diseñe, como sus propios consejos de tallas o reglas de packs. Los dos funcionan bien juntos. Nuestra guía WebMCP frente a MCP explica la diferencia.

Dónde va el código

• Tema: un archivo de script cargado desde theme.liquid. Es sencillo y sirve para una tienda, pero requiere cuidado cuando cambia de tema.
• Extensión de aplicación de tema: un bloque de inserción de aplicación que el comerciante activa en el editor de temas. Se mantiene al cambiar de tema y es la mejor opción para agencias y para varias tiendas.

Una herramienta de búsqueda de productos

El endpoint de búsqueda predictiva de Shopify es público y devuelve lo que los compradores ya pueden ver, así que no necesita clave privada:

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

Las acciones de carrito necesitan al comprador

Una herramienta puede llamar a /cart/add.js con la propia sesión del comprador, pero márquela con consequentialHint: true para que el comprador apruebe primero. Deje el pago y la finalización de la compra en manos del comprador. No ponga un token de la Admin API en el código de la tienda online: todo lo que está en el navegador es público.

Reglas de seguridad

• Empiece con solo lectura. Primero búsqueda y detalles; márquelos con readOnlyHint.
• Pregunte antes de actuar. Marque las acciones de carrito, reserva y formularios con consequentialHint para que el visitante confirme.
• Compruebe en el servidor. El navegador no es una barrera de seguridad, así que valide cada entrada y cada permiso en su backend.
• Devuelva lo mínimo. Envíe solo lo que un cliente puede ver, nunca datos de administración ni registros de otros clientes.

Pruébelo

1. Use una versión reciente de Chrome con WebMCP activado, mediante la prueba de origen o la opción de pruebas.
2. Llame a cada herramienta con entradas correctas e incorrectas.
3. Compruebe que los visitantes normales no notan ningún cambio.
4. Ejecute el comprobador WebMCP gratuito en la página exacta donde están sus herramientas.

¿Prefiere que lo hagamos por usted?

Añadimos herramientas WebMCP a Shopify y a otras plataformas, empezando con una auditoría de preparación gratuita. Conozca nuestros servicios de integración de WebMCP.