Build a Shopify App With AI: A Practical Guide for Builders

You can build a Shopify app with AI, but not by asking a chatbot for "a Shopify app" and pasting the result. Start from Shopify's official CLI template, connect your AI editor to Shopify's docs through the Dev MCP server, and have the agent build one small feature at a time. The AI writes most of the code. You still handle the parts Shopify checks closely: auth, webhooks, billing and security.

Why the generic approach goes wrong

Shopify's APIs change often. Models trained on older data will happily write GraphQL queries against fields that no longer exist, or reach for old auth patterns. The result looks fine until you run it.

Two things fix most of this: a real scaffold, so the agent isn't inventing your app structure, and live docs access, so it isn't guessing at the API.

What you need before you start

• A Shopify developer account and a development store to test on.
• Node.js. The Shopify plugin repo lists Node 18+ with npm/npx as a requirement.
• An AI tool that supports MCP. Shopify's docs list Claude Code, Codex (skills and MCP only), Cursor, Gemini CLI and Visual Studio Code.
• The Shopify CLI installed.

Windsurf, Lovable, Bolt, v0 and Replit weren't on that list in what I found. If you use one of those, check whether it supports MCP servers before you count on the setup below. I haven't verified it.

Step 1: Scaffold the app with the CLI, not the AI

Don't ask the agent to generate the project skeleton. Shopify already ships one. Its docs say the React Router template is recommended for most new apps. The template gives you a working app with OAuth, billing and webhooks already wired up.

Run this in the folder where you want the project:

shopify app init

Log in when prompted and pick Build a React Router app. Per the scaffold tutorial, the CLI creates the app in the Dev Dashboard, connects your local code to it and installs the dependencies. Then start the dev server:

shopify app dev

The template README says local development runs through the CLI, which handles login, environment variables and a tunnel. Press P to open your app URL, then install it on your dev store.

Do this before you open the AI editor. If the blank template doesn't run, the agent will build on a broken base and you'll chase bugs that aren't its fault.

Step 2: Connect your AI tool to Shopify's docs

Shopify's AI Toolkit connects your AI tools to the platform through a plugin, skills or an MCP server. The docs call plugins the recommended route. If you'd rather use MCP, the Dev MCP server runs locally and doesn't need authentication.

Claude Code:

claude mcp add --transport stdio shopify-dev-mcp -- npx -y @shopify/dev-mcp@latest

Cursor: go to Settings, then Tools and MCP, then New MCP server, and add:

{
  "mcpServers": {
    "shopify-dev-mcp": {
      "command": "npx",
      "args": ["-y", "@shopify/dev-mcp@latest"]
    }
  }
}

On Windows, the community docs show a cmd /k npx ... variant if the plain config fails.

What you get, according to Shopify's plugin repo: search of docs and API schemas, code generation for the GraphQL Admin API, Storefront API, Functions and Liquid, and validation of components, GraphQL and theme files against hallucinations. Restart your editor after setup, then ask it something about the Admin API and see whether it searches the docs. If it doesn't, the connection isn't working.

Step 3: Write a spec before you prompt

Vague asks produce sprawling code. Before the first prompt, write five lines in a SPEC.md:

• What the app does, in one sentence.
• Which Shopify data it reads or writes.
• The minimum access scopes it needs.
• What the merchant sees on the main screen.
• What is explicitly out of scope for v1.

Keep the first version boring. A "tag orders over a certain total" app teaches you more than a "AI-powered everything" app, and it's far easier to debug.

Step 4: A prompt you can paste

Put this in your agent's first message, with your own feature swapped in:

You're working in a Shopify app created with `shopify app init`
(React Router template). Read SPEC.md first.

Rules:
- Use the Shopify Dev MCP server to check docs and validate every
  GraphQL query before you write it into the code.
- Keep the template's existing auth in app/shopify.server.ts.
  Don't replace it or write your own OAuth.
- Request only the scopes the spec needs. Tell me if you want more.
- Make one feature at a time. After each, tell me how to test it
  on my dev store.
- Don't add new dependencies without asking.

First task: add a page to the app that lists the 10 most recent
orders and lets me tag one. Explain which files you changed.

The "don't replace auth" line matters. Agents like to "simplify" things, and auth is where that goes badly.

Step 5: Work in small loops

1. Ask for one feature.
2. Run shopify app dev and test it in the dev store admin.
3. If it breaks, paste the actual error and the file, not a description.
4. Commit when it works. Then ask for the next thing.

Commit often. When an agent goes sideways across twelve files, git reset is cheaper than arguing with it.

What to let the AI do, and what to check yourself

Task	AI is fine for	You should verify
UI pages	Layouts, forms, tables	It looks native in the Shopify admin
GraphQL queries	Drafting and fixing them	Validated against the schema, scopes kept minimal
Auth and sessions	Using the template's helpers	You didn't swap in custom code
Webhooks	Handlers for your events	Mandatory ones exist and verify signatures
Billing	Wiring up plans	Test charges only, on a dev store

The App Store review is the real test

Getting the app to run is the easy part. If you plan to list it, Shopify's published requirements apply to every app in the store. Several of them are things AI-generated code tends to miss:

• The app must be a stable, finished product and generally free of bugs.
• It must be protected against common web security vulnerabilities and have a valid TLS/SSL certificate.
• It must subscribe to mandatory webhooks.
• It must not expose its shared secret or a shop's offline access token.

Third-party guides add that webhook endpoints need to verify the HMAC signature, and that charges should go through Shopify's Billing API. Treat those as worth checking against Shopify's current docs rather than as gospel.

Before submitting, read through the checklist yourself. Then ask your agent to audit the codebase against it, and check anything it flags. Also install the app on a brand-new dev store, not the one you built on. Broken first installs are an easy way to fail review.

Common mistakes

• Skipping the template. A from-scratch app means rebuilding auth and webhooks that Shopify already gives you.
• Letting the agent hardcode secrets. Keep keys in environment variables, and check that nothing sensitive lands in git.
• Requesting broad scopes "just in case." Ask for what the spec needs.
• Treating SQLite as a production database. The template uses Prisma with SQLite by default, and the README says that works in production only if your app runs as a single instance. Plan a move to Postgres or MySQL if you'll scale.

FAQ

Can I build a Shopify app with AI if I can't code?

You can get a prototype running on a dev store. Shipping to real merchants is harder, because you'll need to understand auth, webhooks, billing and security well enough to spot problems the agent won't flag. Start with a tiny internal app for your own store and learn from that.

Do I need the Dev MCP server?

No, but it helps. Without it, your AI relies on training data that may be out of date, and that's where invented API fields come from. With it, the agent can search Shopify's docs and validate code as it works. The setup takes a few minutes.

Which AI tool is best for Shopify apps?

I can't name a winner. Claude Code and Cursor both have documented Shopify setup steps, so they're the safest starting points. Pick the one you already know, since that matters more than small differences between tools.

Cover photo: Blake Connally on Unsplash