Build your store with Claude Code

Claude Code writes the shop front; your Tuppence store stays the back end: products, prices, tax, delivery, payments and orders. Everything below works the same with any coding agent that reads a repository’s AGENTS.md.

What you need

• Your store’s publishable key, pk_test_…, from Developers › API keys. It is the only key the shop front uses, and it is safe in the browser.
• At least one product online (Selling products online).
• Node 22 and Claude Code.

Start from the starter

Tuppence’s Next.js starter is a whole shop: home, collections, product pages, search, basket, checkout and order status, already on the Storefront API. Its AGENTS.md and CLAUDE.md give Claude Code the store’s rules before it changes anything.

1. Copy .env.example to .env.local and set NEXT_PUBLIC_TUPPENCE_PUBLISHABLE_KEY.
2. npm install, then npm run dev, and open http://localhost:3000.
3. Start claude in the folder and ask for what you want changed.

Restyle this store for a candle shop: warm, quiet, lots of white space. Keep every price,
total and delivery date exactly as the Storefront API answers it, as AGENTS.md says.

Start from nothing

In an empty project, give Claude Code the rules first, then build it a page at a time with the prompt kit: a product grid, a product page, a basket and a checkout. Each prompt there comes with the code it should lead to, so you can check what Claude Code wrote.

Build a Next.js App Router shop front for my Tuppence store. Read
https://docs.tuppence.ai/docs/llms.txt and the Storefront API at
https://docs.tuppence.ai/docs/openapi.storefront.json first. The publishable key is in
NEXT_PUBLIC_TUPPENCE_PUBLISHABLE_KEY. Never compute a price, a tax or a delivery date in the
client: show the API's answers. Take card details only through @tuppence/js.

Let it search the docs

With the Tuppence MCP server added, Claude Code can look things up as it works: search_docs finds the section of these docs that answers a question. It needs no scope, so any restricted test key will do.

claude mcp add tuppence --env TUPPENCE_API_KEY=rk_test_… -- npx -y @tuppence/mcp

Allow your site’s address

Calls from your server always work. Calls from a browser work only from the sites listed under Store › Settings › Developers › Allowed origins: https:// addresses with no port, such as https://shop.example.com. A missing one answers 403 origin_not_allowed with a link to the setting.

On your own machine the starter’s pages load, but the basket and checkout run in the browser. To try them, open the site through an https tunnel to localhost:3000 and add the tunnel’s address, or deploy a preview and add its address.

Apple Pay and Google Pay

Every allowed origin is set up for Apple Pay and Google Pay. Apple also needs one file on your domain, /.well-known/apple-developer-merchantid-domain-association; the starter serves it. In your own project, ask Claude Code to add it as the Storefront API page describes.

Go live

Once your account is live, add your origins again in live mode, set the key to your pk_live_… key where your site runs, and deploy. The code doesn’t change.

Next

• Store prompt kit
• The Storefront API
• Build your store with Lovable or with v0