tweaklocal
v0.3.4
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
TweakLocal
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.
- 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.
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: TWEAKLOCAL_T1_MODEL, TWEAKLOCAL_T2_MODEL, TWEAKLOCAL_T3_MODEL, TWEAKLOCAL_T3_CRITICAL_MODEL, and TWEAKLOCAL_ROUTER=heuristic|hybrid|llm (default hybrid).
Quickstart (Next.js)
npm i -D tweaklocal @tweaklocal/reactjsconfig.json/tsconfig.json:{ "compilerOptions": { "jsxImportSource": "@tweaklocal/react" } }- Root layout:
import { TweakLocalOverlay } from '@tweaklocal/react'; // inside <body>: {children}<TweakLocalOverlay /> - Run the daemon next to your dev server, from the project root:
npx tweaklocal - Open your app, press
⌘., 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 TWEAKLOCAL_TELEMETRY=0 # or DO_NOT_TRACK=1 — both respectedOptions
npx tweaklocal --port 4101(+<TweakLocalOverlay origin="http://localhost:4101" />)TWEAKLOCAL_FAST_MODEL/TWEAKLOCAL_SMART_MODEL— model aliases for the router (defaulthaiku/sonnet)TWEAKLOCAL_BASELINE_COST/TWEAKLOCAL_BASELINE_MS— baseline for the savings counter- Natural-language tweaks require the Claude Code CLI (
claude) on your PATH; copy/style lanes work without it.