Zum Inhalt springen

Shopify-Apps und -Themes mit KI bauen

Shopify-APIs ändern sich oft, Agenten raten Felder und schreiben fehlerhaften Code.

3 SchritteMittel
CursorClaude CodeShopify DevGitHub

So hängt es zusammen

Ihre KI erreicht Ihre Apps über kleine Connectoren, sogenannte MCP-Server.
Ihre KI
CursorClaude Code
Connectoren
Shopify DevGitHub
Ihre Apps
ShopifyGitHub

Dieses Setup ist für Entwickler, die Shopify-Apps, Extensions oder Themes mit einem KI-Coding-Agenten bauen. Der Dev-MCP-Server von Shopify liefert Cursor oder Claude Code aktuelle Shopify-Dokumentation und GraphQL-Schemas, der GitHub-Server lässt den Agenten mit Branches und Pull Requests arbeiten. So prüft der Agent seinen Code gegen die echten Shopify-APIs statt gegen Felder aus älteren Versionen.

Einrichten

3 Schritte. Öffnen Sie einen für Details.
  1. 1Shopify Dev MCP hinzufügen

    Fügen Sie den Shopify-Dev-MCP-Server in Cursor oder Claude Code mit dem Befehl npx -y @shopify/dev-mcp@latest hinzu. Er braucht Node, aber keine Shopify-Anmeldung, da er öffentliche Doku und Schemas liefert. Lassen Sie den Agenten zum Test nach einem bekannten Thema wie Webhooks suchen.

    Tipp: Notieren Sie die verwendete API-Version im Projekt, damit der Agent das richtige Schema prüft.

  2. 2GitHub verbinden

    Fügen Sie den MCP-Server von GitHub hinzu, gehostet oder lokal mit einem Fine-grained Personal Access Token, der auf das Repository Ihrer App beschränkt ist. Erlauben Sie Code lesen, Branches anlegen und Pull Requests öffnen. Schützen Sie den Main-Branch, damit jede Änderung ein Review durchläuft.

    Tipp: Ein auf ein Repository begrenzter Token begrenzt den Schaden, falls er leakt.

  3. 3Mit echten Schemas bauen

    Beschreiben Sie die Funktion, etwa füge ein Produkt-Metafield hinzu und zeige es in einem Theme-App-Extension-Block. Lassen Sie den Agenten das Admin-GraphQL-Schema abfragen und seine Queries validieren, bevor er Code schreibt. Starten Sie die App lokal mit Shopify CLI auf einem Development Store und prüfen Sie den Pull Request.

    Tipp: Nennen Sie die Zielfläche wie Admin API, Storefront API, Functions oder Liquid, damit der Agent in der richtigen Doku sucht.

Dann einfach fragen

Was Sie sagen können, sobald es verbunden ist. Zum Kopieren klicken.
Fragen Sie Cursor…Cursor

Gut zu wissen

Was Sie brauchen, was es nicht kann und wie es sicher bleibt.
Was Sie brauchen
  • Node.js für npx
  • Ein Shopify-Partner-Konto und ein Development Store
  • Cursor oder Claude Code
  • Ein GitHub-Repository und ein eingeschränkter Access Token
Grenzen
  • Gültige Schemafelder garantieren keine korrekte Geschäftslogik. Tests und Reviews bleiben nötig.
  • Der Agent kann sich nicht durch den Shopify-Admin klicken oder das Aussehen eines Themes prüfen. Das testen Sie selbst.
  • Die Doku-Suche liefert Auszüge. Bei komplexen Themen müssen Sie eventuell den ganzen Leitfaden lesen.
Sicher bleiben
  • Dev MCP liest nur Doku und Schemas, der Shop bleibt unberührt.
  • Pull Requests vor dem Deploy prüfen.
Shopify Dev MCP Server (docs-read, api-schema-read) GitHub MCP Server (repository-read, issue-write, pull-request-write)

Häufige Fragen

Klare Antworten vor dem Start
Kann der Dev-MCP-Server meinen Shop ändern?
Nein. Er durchsucht nur Dokumentation und liest API-Schemas. Änderungen am Shop kommen aus Ihrem App-Code, den Sie mit Shopify CLI und eigenen Zugangsdaten ausführen.
Was kostet das?
Der Shopify-Dev-MCP-Server ist kostenlos und läuft lokal über npx. Zum Testen brauchen Sie ein Shopify-Partner-Konto und einen Development Store, die Shopify kostenlos bereitstellt.
Welche Editoren funktionieren?
Cursor, Claude Code und andere MCP-Clients mit lokalen Servern. Claude Desktop geht auch, bringt ohne Zugriff auf Ihren Code aber weniger.
Was ist mit Liquid-Themes?
Der Server deckt neben den APIs auch Theme- und Liquid-Doku ab. Testen Sie Theme-Änderungen mit shopify theme dev auf einem Development Store, bevor Sie veröffentlichen.

Beteiligte Produkte

Die beteiligten Produkte