Shopify Agentic Starter Kit

A Next-Gen CLI tool that supercharges your standard Shopify Apps with AI Coding Assistant skills, pre-configured DevEnvironments, and a unified Vitest/Playwright testing pipeline.

This starter kit is designed to be injected into officially generated Shopify apps to instantly lift the developer experience so you can start building powerful Shopify apps securely and intelligently from day one.

Features Added

• 🤖 AI Coding Assistant Skills (.agent/): Injects deep contextual knowledge about Shopify’s latest GraphQL APIs, App Bridge features, Polaris Components, and Webhook patterns. Your IDE's AI (Cursor, GitHub Copilot, Gemini) will write flawless Shopify code without hallucinating outdated APIs.
• 🐳 Pre-configured Dev Environment (.devcontainer/): A fully containerized workspace supporting Node, the GitHub CLI, SQlite, and correct VS Code extensions for Shopify theme/ruby/eslint formatting out of the box.
• 🧪 Unified Testing Pipeline: Automatically sets up and configures vitest for backend logic and playwright for End-to-End browser testing of embedded UIs.
• 🧩 Production Blueprints (app/lib/shopify-kit): Reusable React hooks and server utilities for Shopify Admin API workflows (Products, Orders, Customers, Inventory, Metafields, Billing).
• 🚦 GitHub Actions CI/CD (.github/workflows): Ready-to-run CI and deployment workflows for validation and automated release pipelines.

Production Blueprint Coverage

The injected blueprint hooks currently include:

• useProducts.ts
• useOrders.ts
• useCustomers.ts
• useInventory.ts
• useMetafields.ts
• useBilling.ts

And server-side helper utilities:

• utils/shopify-utils.server.ts
• utils/shopify-webhooks.server.ts
• utils/shopify-gdpr.server.ts
• utils/shopify-graphql-retry.server.ts
• utils/shopify-app-proxy.server.ts

Phase 2 utility test templates are also included:

• utils/shopify-webhooks.server.test.ts
• utils/shopify-gdpr.server.test.ts
• utils/shopify-graphql-retry.server.test.ts
• utils/shopify-app-proxy.server.test.ts

Usage Guide

1. Initialize your Shopify App

Since this starter kit acts as an "envelope" around Shopify's constantly-updating architecture, you first need to use the official tool to scaffold your app:

npm create @shopify/app@latest

Follow the prompts to configure your app name and connect to your Partner organization.

2. Inject the Starter Kit

Change directory into your new app and unleash the starter kit:

cd my-shopify-app
npx shopify-starter-kit .

Note: You can run npx shopify-starter-kit <directory> if you are outside the app folder.

3. Select your Integrations

The CLI will gracefully prompt you to select which features you want to inject. Press <Space> to toggle features, and <Enter> to confirm:

? Which Next-Gen features do you want to add? › - Space to select. Return to submit 
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    a: Toggle all
    enter/return: Complete answer
◉   AI Coding Assistant Skills (.agent)
◉   Pre-configured Dev Environment (.devcontainer)
◉   Unified Testing Pipeline (Vitest/Playwright)
◉   Production Blueprints (React Hooks & Utils)
◉   GitHub Actions (CI/CD Workflows)

4. Start Developing!

If you installed the Testing Pipeline, make sure to install the new dependencies:

npm install

If you chose the Dev Environment, you may receive a prompt from VS Code or Cursor asking if you'd like to "Reopen in Container". Click Yes for the optimal, dependency-free development experience!

Finally, start your app:

npm run dev

Contributing

Issues and Pull Requests are welcome! Since the world of Shopify Apps moves fast, we openly welcome new documentation to the .agent/skills/ directory to help AI autocomplete engines stay on top of new API releases.