WebMCP für Shopify: So machen Sie Ihren Shop bereit für KI-Agenten

KI-Agenten beginnen, für Menschen einzukaufen, und ein Shopify-Shop eignet sich gut dafür: Produkte, Preise und Lagerbestand liegen bereits hinter sauberen APIs. Dieser Leitfaden zeigt, wie Sie WebMCP-Tools in einer Shopify-Storefront ergänzen. Ist das Thema neu für Sie? Lesen Sie zuerst, was WebMCP ist.

WebMCP oder das eigene MCP von Shopify?

Jeder Shopify-Shop hat inzwischen unter /api/mcp einen MCP-Endpunkt, den KI-Apps für Produktsuche, Warenkörbe und Richtlinien aufrufen können. Er läuft auf den Servern von Shopify, und seine Tools können Sie nicht steuern. WebMCP funktioniert anders: Die Tools liegen auf Ihrer Seite, laufen im Browser des Kunden und tun genau das, was Sie festlegen, zum Beispiel Ihre eigene Größenberatung oder Ihre Regeln für Produktbundles. Beides ergänzt sich gut. Unser Leitfaden WebMCP vs. MCP erklärt den Unterschied.

Wohin der Code gehört

• Theme: eine Skript-Datei, die aus theme.liquid geladen wird. Das ist einfach und für einen einzelnen Shop in Ordnung, verlangt aber Sorgfalt bei einem Theme-Wechsel.
• Theme App Extension: ein App-Embed-Block, den der Händler im Theme-Editor einschaltet. Er übersteht einen Theme-Wechsel und ist der bessere Weg für Agenturen und mehrere Shops.

Ein Produktsuche-Tool

Der Predictive-Search-Endpunkt von Shopify ist öffentlich und liefert nur, was Kunden ohnehin sehen. Er braucht deshalb keinen privaten Schlüssel:

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

Warenkorb-Aktionen brauchen den Kunden

Ein Tool kann /cart/add.js mit der eigenen Sitzung des Kunden aufrufen. Kennzeichnen Sie es aber mit consequentialHint: true, damit der Kunde zuerst zustimmt. Überlassen Sie Checkout und Zahlung dem Kunden. Setzen Sie kein Admin-API-Token in den Code der Storefront: Alles im Browser ist öffentlich.

Sicherheitsregeln

• Starten Sie mit reinem Lesezugriff. Zuerst Suche und Details; kennzeichnen Sie diese mit readOnlyHint.
• Fragen Sie vor dem Handeln. Kennzeichnen Sie Warenkorb-, Buchungs- und Formularaktionen mit consequentialHint, damit der Besucher bestätigt.
• Prüfen Sie auf dem Server. Der Browser ist keine Sicherheitsgrenze. Prüfen Sie deshalb jede Eingabe und jede Berechtigung in Ihrem Backend.
• Geben Sie wenig zurück. Senden Sie nur, was ein Kunde sehen darf, niemals Admin-Daten oder Datensätze anderer Kunden.

Testen

1. Nutzen Sie ein aktuelles Chrome mit aktiviertem WebMCP, über den Origin Trial oder das Test-Flag.
2. Rufen Sie jedes Tool mit gültigen und ungültigen Eingaben auf.
3. Prüfen Sie, dass normale Besucher keine Änderung bemerken.
4. Prüfen Sie genau die Seite, auf der Ihre Tools liegen, mit dem kostenlosen WebMCP-Checker.

Sollen wir das für Sie übernehmen?

Wir ergänzen WebMCP-Tools in Shopify und anderen Systemen – beginnend mit einem kostenlosen Readiness-Check. Sehen Sie sich unsere WebMCP-Integrationsservices an.