cmdzero
v0.9.1
Published
Tweak your UI live in the browser and write the changes straight to source. Copy and Tailwind edits cost zero tokens; everything else routes to a right-sized model via headless claude.
Maintainers
adamwade2384Readme
CmdZero
Press ⌘0 and edit a real page with the real overlay, running entirely in your browser. Copy, style, reorder, delete and undo all work; natural-language prompts are scripted (no model is called) and nothing is written to disk.
Tweak your UI live in the browser — the changes are written straight to your source files.
- Copy: click any text, edit in place, Enter. Written to the JSX literal. 0 tokens.
- Style: padding/margin per side, font sizes and colors from your design system tokens. Deterministic Tailwind class edits. 0 tokens.
- Reorder: every selected section/card gets a move toolbar — arrows (
↑↓for columns,←→for rows) or drag the⠿grip. Cards in a.map()reorder the backing array; written-out siblings swap in place; a section's outer container moves the whole<Section/>among its siblings in the page. 0 tokens. - Anything else: describe it — a layered router picks a model and an effort level sized to the request, then runs headless
claude -pscoped to the exact file your selection maps to.
Changes show live automatically — the overlay reloads the page (preserving scroll + selection) after a write settles, so HMR gaps (module-scope consts, structural edits) never need a manual refresh. Toggle it bottom-left.
Model routing
| Tier | What it covers | Model | Effort (by complexity) |
|---|---|---|---|
| 1 | Styles, copy, component tweaks, existing components | claude-sonnet-5 | low / medium / high |
| 2 | New logic & functionality (handlers, state, forms, data) | claude-opus-4-8 | medium / high / xhigh |
| 3 | Multi-feature or cross-cutting work | claude-opus-4-8 | xhigh |
| 3+ | Mission-critical (auth, payments, data, security) or very high complexity | claude-fable-5 | high |
Routing is layered (RouteLLM-style): deterministic lexicon + structure scoring first (<1ms, free); requests with no clear signal fall through to a Haiku classifier with structured output (~1–3s, ~$0.001). Inspect any routing decision without running it: POST /api/classify {"instruction": "..."}.
Overrides: CMDZERO_T1_MODEL, CMDZERO_T2_MODEL, CMDZERO_T3_MODEL, CMDZERO_T3_CRITICAL_MODEL, and CMDZERO_ROUTER=heuristic|hybrid|llm (default hybrid).
Quickstart (Next.js)
npm i -D cmdzero @cmdzero/reactjsconfig.json/tsconfig.json:{ "compilerOptions": { "jsxImportSource": "@cmdzero/react" } }- Root layout:
import { CmdZeroOverlay } from '@cmdzero/react'; // inside <body>: {children}<CmdZeroOverlay /> - Run the daemon next to your dev server, from the project root:
npx cmdzero - Open your app, press
⌘0, click anything.
Works with Turbopack, webpack, and Vite — stamping happens in React's dev JSX runtime, not the bundler. Server components included. Production builds are untouched (the prod runtime is a passthrough).
Telemetry
The daemon sends anonymous usage telemetry: package version, node version, OS platform, whether Tailwind was detected, and per-lane tweak counts. Never code, file paths, file names, prompts, or anything identifying. A disclosure prints the first time the daemon runs.
Opt out permanently:
export CMDZERO_TELEMETRY=0 # or DO_NOT_TRACK=1 — both respectedTelemetry never blocks or breaks the daemon: it's fire-and-forget with a 3s
timeout and no retries. It's also silent about its own failures by default — set
CMDZERO_TELEMETRY_DEBUG=1 to log delivery errors, or read
curl -s localhost:4100/api/health | jq for the last send and last error.
Options
npx cmdzero --port 4101(+<CmdZeroOverlay origin="http://localhost:4101" />)CMDZERO_FAST_MODEL/CMDZERO_SMART_MODEL— model aliases for the router (defaulthaiku/sonnet)CMDZERO_BASELINE_COST/CMDZERO_BASELINE_MS— baseline for the savings counterCMDZERO_TELEMETRY=0/DO_NOT_TRACK=1— opt out of telemetry;CMDZERO_TELEMETRY_DEBUG=1logs delivery failures- Natural-language tweaks require the Claude Code CLI (
claude) on your PATH; copy/style lanes work without it.