Developers · Tools

Tools

Your theme's files live in a workspace on our side. The browser editor, the CLI and Claude all read and write those same files, so you can switch between them in the middle of a change.

Choose

Three ways to work

Pick by where you like to type. Nothing you make in one is locked to it.

	Browser editor	CLI in any editor	Claude
Install	Nothing	Node.js, and one npm command	A Claude plan, plus one connector
Where you edit	File tree and code editor at app.whizzycommerce.com	VS Code or any editor, on your own disk	claude.ai, Claude Code, or VS Code with the Claude Code extension
Preview	Beside the code	whizzy-theme dev opens it and refreshes on save	preview_theme returns a link; screenshot_page shows Claude the result
Git and CI	No	Yes, with a WHIZZY_TOKEN	Through Claude Code in your repository
AI	Optional assistant on your own Anthropic API key	Whatever you already use	Your Claude plan or API key
Good for	A quick fix, or no local setup	Daily work, version control, teams	Drafting sections, chores, getting a release ready

Terminal

The CLI

whizzy-theme runs the installer's own validator on your machine, so a clean local run is a clean submission. It signs in to your developer account, not to one shop.

npm i -g https://whizzycommerce.com/cli/whizzy-theme.tgz
whizzy-theme login
whizzy-theme init harbour
cd harbour
whizzy-theme dev --page=home

Command	What it does
`whizzy-theme login`	Opens the browser to sign in to your developer account, and stores a token on this machine.
`whizzy-theme logout`	Forgets the stored token.
`whizzy-theme whoami`	Prints the developer account and the person you are signed in as.
`whizzy-theme init <slug> [dir]`	Creates a theme workspace from the reference theme, or from the published version when the slug is one of your listed themes, and writes its files to a folder.
`whizzy-theme pull <slug> [dir]`	Downloads a workspace's current files, for example on a second computer.
`whizzy-theme push [dir]`	Uploads the folder to its workspace. Refuses if the workspace changed since your last pull.
`whizzy-theme dev [dir] --shop=ten_… --page=product`	Pushes on every save and previews on a development shop. Both flags are optional.
`whizzy-theme validate [dir]`	Runs the installer's own validator locally and prints anything it would drop.
`whizzy-theme submit [dir] -m "changelog"`	Submits the workspace's files for review with that changelog. Push first if you changed anything locally.
`whizzy-theme status [slug]`	Shows each release's review status and the reviewer's notes.
`whizzy-theme reset [dir] --yes`	Throws away every unsubmitted change and starts again from the published version, then pulls it.
`whizzy-theme schema [file]`	Prints or writes the theme JSON Schema for editor completion.

validate exits with 0 when nothing would be dropped, 2 when the theme installs but something would be dropped, and 1 when it does not install. WHIZZY_ORIGIN points the CLI at another platform address, which you only need if we ask you to test against staging.

Editor completion. The folder init writes already has "$schema" at the top of theme.json, so VS Code completes and explains every field without an extension. It also writes AGENTS.md with the performance rules, which coding assistants read on their own.

Automation

CI with a token

In CI there is no browser to sign in with. Create a token under Developer › Tokens and store it as a secret named WHIZZY_TOKEN. When that variable is set, the CLI uses it instead of login.

This GitHub Actions workflow validates and pushes every commit on main to your workspace, and submits a release when you push a tag that starts with v. Bump version in theme.json before you tag.

name: theme
on:
  push:
    branches: [main]
    tags: ["v*"]

jobs:
  ship:
    runs-on: ubuntu-latest
    env:
      WHIZZY_TOKEN: ${{ secrets.WHIZZY_TOKEN }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm i -g https://whizzycommerce.com/cli/whizzy-theme.tgz
      - run: whizzy-theme validate .
      - run: whizzy-theme push .
      - run: whizzy-theme submit . -m "${{ github.ref_name }}: see CHANGELOG.md"
        if: startsWith(github.ref, 'refs/tags/v')

Tokens are for one developer account. A token can edit and submit your themes. It cannot see earnings or payouts, and it cannot reach any merchant's shop. Revoke it under Developer › Tokens if it leaks.

Claude

Claude through the developer connector

The connector gives your own Claude the tools to read, write, check, preview and submit your themes. Claude runs on your plan. Our server only runs the tool calls.

claude.ai

In the browser

Open Settings › Connectors and choose Add custom connector.
Name it WhizzyCommerce developer, and paste https://app.whizzycommerce.com/mcp/dev.
Press Connect, sign in to WhizzyCommerce and approve access to your developer account.
In a new chat, turn the connector on from the tools menu.

Terminal

Claude Code

claude mcp add --transport http whizzy-dev https://app.whizzycommerce.com/mcp/dev

Then run /mcp inside Claude Code and sign in. Claude Code on the web works the same way with your theme's repository.

VS Code

With the Claude Code extension

Install the Claude Code extension, run the same claude mcp add command in the integrated terminal, and open your theme folder. Claude edits files through the connector, or on disk with the CLI beside it.

Tool	What it does
`list_themes`	Lists the themes in your developer account, with their revision and whether each is in the catalogue yet.
`create_theme`	Creates a workspace from the reference theme or a blank one.
`read_theme_file`	Reads one file with the theme's current revision, or lists every file when the path is empty.
`write_theme_files`	Writes several files at once. If the theme changed since Claude last read it, nothing is written and Claude reads it again.
`delete_theme_file`	Deletes one file. theme.json cannot be deleted.
`validate_theme`	Runs the release checks on the current files: does it install, what CSS is dropped, is the version newer, class collisions, plugins.
`preview_theme`	Puts the files on a development shop as drafts and returns a preview link, with what was dropped.
`screenshot_page`	Returns a screenshot of one page at a width from 320 to 1920 pixels, so Claude can see what it built.
`submit_release`	Submits the current files for review with a changelog. Claude asks you to confirm first.
`reset_theme`	Starts the working copy again from the published version. Claude asks you to confirm first.
`get_release_status`	Returns the latest submitted versions with their review status and the reviewer's notes.

A conversation that ends in a submission looks like this.

You
Add a lookbook section to harbour: a large photo with three product cards beside it, stacked on phones.
Claude
read_theme_file, write_theme_files
Reads theme.json and an existing section for the conventions, writes sections/lookbook.json, and adds it to templates/home.json.
Claude
validate_theme
The validator drops one CSS property. Claude replaces it with one the sanitizer keeps.
Claude
preview_theme, screenshot_page
Previews the home page on your development shop at 390 and 1440 pixels, notices the cards overflow on a phone, and fixes the grid.
You
Looks good. Make it 1.3.0 and submit it.
Claude
write_theme_files, submit_release
Bumps the version, writes the changelog from what changed, and asks you to confirm before it submits.
Claude
get_release_status
Reports that every check passed and the release is waiting for review.

No install

The browser editor

Developer › Themes › your theme › Editor. A file tree, a code editor that validates as you type, a preview of your development shop and a Submit button.

The editor has an optional assistant panel. It stays switched off until you paste your own Anthropic API key into it. The key is checked with Anthropic, sealed at rest, kept on that workspace only, and you can remove it at any time. Every request the assistant makes is billed by Anthropic to that key.

Plainly

Who pays for AI

You do, directly, and only for what you use.

WhizzyCommerce never runs AI on its own key for developers. Your Claude plan or your Anthropic API key pays for your model use. Our servers only run the tool calls the connector receives, which are free. We do not resell, meter or mark up tokens.

Why there is no hosted terminal. A terminal in our app would mean running a sandboxed machine per developer, and running your Claude login on our servers. Claude Code on the web already is that terminal: it runs against your repository, Anthropic maintains it, and your plan pays for it. Add the connector there and you have everything a hosted terminal would give you. For the rest, see Getting started.

NextTheme format →