Building with Shopify's Dev MCP and Claude Code

With the 2025-01 Shopify API release, it became possible to build 'Extension-Only' discount apps - meaning Shopify would host and render your custom Admin UI for configuring a discount function, eliminating the need to pay for your own app infrastructure and hosting just to render a custom discount UI to the admin. Shopify will host the extension and render it all for you in context - you just bring your own code.

I imagine you're saying "yeah, I knew about this in November of 2024, I'm subscribed to the changelog". Okay, but check this out - since that release, we've seen the release of the Shopify Dev MCP, as well as Claude Code alongside the new Anthropic models. I've been using these all together for an extremely satisfying developer experience.

While Sonnet 3.7 was super powerful, I found that I often needed to hold its hand through Shopify-specific development because it would just write generic react code, instead of using Shopify's specific UI Components. Or, it would imagine the API endpoints based on the inferred behaviour expected. Recently, I'm simply pointing Claude Code to use the Shopify MCP to inform itself, and it can easily one-shot a full custom function or extension in under 10 minutes. (My personal record is 3 minutes -- try to beat it!)

APPROACH

We'll use Claude Code with the Shopify Dev MCP to:

• Bootstrap a new Shopify extension-only app project
• Generate and configure a custom discount function (based off the tutorial)
• Create Admin UI Extensions for the custom discount management, without needing to host any app backend
• Handle the deployment and testing workflow with the Shopify CLI through Claude Code

GETTING STARTED

You'll need a few things off the bat:

• Claude Code -- Installation could not be simpler - it's a terminal-based agentic coding tool.
• Shopify CLI -- Install this globally so that Claude Code can interact with it directly in the terminal as well.
• Shopify MCP -- Also super simple to install. Just ask Claude Code to configure it to itself, that'll work.
• A partner account -- This is critical to manage your app and the dev or store environment to which it will be connected. The Shopify CLI is eventually going to ask you for this. If you don't have one, you should set it up now.
• (Optional) Github -- Connecting the project to Github for source control is nice, but optional for small single-use projects.

SETTING UP THE PROJECT

First, we need to initialise a new Shopify App in your Partner account. This will make the steps of testing and validating the extensions much, much easier and give us an App Client ID to properly connect our project. Navigate to your project directory, then run the following command to begin a new app project, and choose 'Build an Extension-Only App' from the dropdown:

shopify app init

You should see the Shopify CLI has created the necessary project structure for you in your project folder. Next, let's generate the sample discount function extension to work off. Follow the prompt and scroll down until you see the 'Discount - Function' option, then give it a name and choose your language (for me, that's Javascript)

shopify app generate extension

Okay, we're done with the Shopify CLI! We have our template discount function. Let's switch over to using Claude Code.

USING CLAUDE CODE TO BUILD AN EXTENSION

I'll pick this up assuming that you're seeing the same thing as I am above in your Claude Code, after having checked the Shopify Dev MCP connection is successful with the following commands: /mcp or /mcp list

Once the dev-mcp is successfully connected, we can start to teach Claude Code how to use it effectively. I'd recommend using its help to configure a CLAUDE.md file that can be used as context whenever you're working on the project. For example, I like to provide it instructions that match my prompt style, so when I refer to something from the 'dev docs', Claude knows it should be using the connected MCP to look up the terms I'm using to help guide it's code.

We're going to add an Admin UI Extension to interact with the discount function we generated earlier. Let's start by giving Claude the tutorial: https://shopify.dev/docs/apps/build/discounts/build-ui-extension?extension=javascript

(There are times I see Claude going off track a bit and searching related pages - let it do it's thing. The more context it has, the better.)

Some tips for a cleaner implementation:

• Ask Claude Code to provide you an implementation plan before it goes off and starts writing code. It's preconfigured to work off of 'to-do' lists on it's own, but acting like it's product owner is extremely helpful. Come up with a plan together, and build a clear picture of what milestones you expect it to hit.
• At any point, you can hit 'esc' to pause Claude and review it's work so far, and you can also continue to talk to it while it's working on something, to steer it a little more.
• Hit 'shift + tab' to auto-accept edits that aren't using bash commands. There's going to be a lot it'll ask you to approve otherwise -- unless you want to use this as a training exercise to watch its every step, which can be helpful.
• Unless you've provided Claude context on using the Shopify CLI commands, it's going to take some trial and error to find the right parameters it needs to generate an extension itself. In my experience, it does always get there without my help. You'll know it works when you see the below wave pattern:

Once Claude Code is done working, you should see its completed to-do list. It likes to run tests before it does so, which is an optional step if you're familiar with Shopify App development. We're going to be checking it's work shortly, anyway.

To check the project is running successfully, you're going to start a new terminal and use the following command:

shopify app dev

CHECKING THE WORK

Provided everything was configured properly, you'll see a prompt to choose which development store to preview your app within. If you're served an error, simply copy it and go tell Claude Code in the other terminal about the error and what you think might be wrong. For example, in my first pass at this, Claude Code forgot to apply the proper access scopes to my app. We sorted it out together.

When you've chosen your development store, first preview 'App Home' to install the app and accept the access scopes so it can read and write discounts. Then you're ready to test it out! Visit your Discounts settings page, create a new Discount, and you should see your custom discount listed as an option under your App's heading.

Some things to triple-check:

• Build a discount and create it - make sure it genuinely is created as a new discount to be used in your store.
• Make sure that the field values you input in the Discount UI actually matches what the discount provides at Checkout.
• Try multiple different discount configurations; lock it to a customer segment, give it a start time, make it an automatic discount with conditions, etc.

SUMMARY

Using Claude Code with Shopify's Dev MCP transforms the development experience from managing multiple tools to having an intelligent assistant that understands your entire Shopify workflow. What would typically be a multi-hour project becomes just a 10-15 minute workflow.

Key takeaways:

• The Shopify Dev MCP integration negates the need to deeply understand the Shopify API landscape. You can teach Claude Code how to teach itself.
• Claude Code can interact with the Shopify CLI when it needs to during app and extension development, becoming a really powerful assistant.
• By following along Claude Code's development process, you can train yourself in typical Shopify app development patterns extremely quickly.

A bonus fact: I had a separate Claude Code terminal open helping me write this blog post as I was building the demo to follow along above. I talked to it along the way with voice-to-text in Mac to prompt it to note what I was doing along the way. It understood how I structure these posts, understood my general tone of voice, so all I needed to really do was clean up some paragraphs and take the screenshots along the way!

✌️