Skip to content
Switches

pnpm add switches-react && npx switches init

Let your client pick the version, on the real site.

Switches is a free, source-available React package that keeps several AI-made versions of a page section on your live site, so anyone can flip between them, pick one and send the picks back to Claude Code.

How you use it

  1. AI makes the versions. Ask Claude Code for three versions of a section; all of them go into the page.
  2. Open the shared link. You, or your client on their own, open the preview link.
  3. Flip through them in the panel behind the round button at the bottom left.
  4. Pick one per section and add a note if you like: “the split one, but with a bigger headline.”
  5. Press Copy my picks. The picks become plain text for an email or chat.
  6. Paste it into Claude Code. It applies the picks.

Claude Code keeps the picked version of each section and deletes the rest, along with code and files only they used, and applies each note as a small tweak. It does not ask which version to keep; it asks only if a name, option or note looks wrong or unsafe. If a section or version can’t be found, it says so. Then it runs the build and reports what it kept, deleted and changed.

How Claude uses it

npx switches init installs a Claude Code skill with three jobs. You ask in plain words:

  • Make versions. “Make 3 versions of the hero.” Claude wraps each in a <Variant>, keeps an existing design as the default and names versions after the idea, never A, B, C.
  • Apply picks. Paste the copied text as it is. Claude keeps each picked version, deletes the others with the code only they used and applies the notes.
  • Finish. “Finish Switches.” Before launch, Claude removes the panel and the package and leaves a normal site.

“Copy my picks” gives plain text that reads fine in an email and works as a prompt. Each line names the section, the version picked, the page it is on and the note, if there is one. The link opens the site with the same versions showing:

Clipboard
Switches picks: hero: split · pricing: simple
hero: split (/) — note: bigger headline
pricing: simple (/pricing)
Link: https://preview.example.com/pricing?switches=hero%3Asplit%2Cpricing%3Asimple
Apply these picks: keep the chosen version of each section and delete the others.

No account and no server: the picks travel by copy and paste, and in the link itself. More in Claude Code.

Try it

This sample page has three versions. Open the round button at the bottom left of your screen and pick one.

Version: Big headline

Make something with your hands this week.

Evening pottery classes. Clay and firing included.

Book a class
Version: Photo split

Evening pottery for beginners.

Six people per table.

See dates
Version: Class list

This week

  • Wheel basicsTue 18:30
  • Hand-built mugsThu 19:00
  • Glazing nightSat 11:00

Picks travel in the link too. Open this page with Photo split or Class list already picked.

Install

Terminal
pnpm add switches-react && npx switches init

This adds the package, plus a Claude Code skill and a short block in CLAUDE.md. Then put <Switches /> first inside <body> (Claude Code adds it if it is missing), ask for versions and send the preview link to whoever is choosing. Step by step in Getting started. Run npx switches only after installing switches-react; the bare name switches on npm is an unrelated package.

Remove it before launch. Tell Claude Code “Finish Switches”: it removes the panel, keeps the default version of any section still undecided, deletes the Claude Code setup and uninstalls the package. Until then, the production server or build output prints a one-time reminder while <Switches /> renders and the flag isn’t off.