tweaker

Visual editor for your codebase. Click any element in the browser, drag to adjust, and your source code updates in real time.

Chrome extension  -->  tweaker server  -->  AI agent (Claude Code, Cursor, etc.)

Quickstart

1. Install the Chrome extension (coming soon)
2. In your project directory:

npx tweaker init

That's it. Tweaker detects your framework, configures your agent, and starts the server.

Next time, npm run dev starts tweaker automatically — zero extra steps.

What it does

• Select any element on your localhost dev server
• Drag handles to adjust padding, margin, font-size, colors
• Use the natural language bar for complex changes ("make this bolder", "add 8px gap")
• Changes go to your AI agent, which edits the actual source files
• Works with Tailwind classes, CSS modules, inline styles — whatever your project uses

How it works

┌─────────────────────────────────────────────────┐
│  tweaker serve                                  │
│                                                 │
│  WebSocket :7890  <-- Chrome extension          │
│  REST API  :7891  <-- Any agent (HTTP polling)  │
│  MCP stdio        <-- Claude Code               │
└─────────────────────────────────────────────────┘

The server bridges visual changes from the Chrome extension to your AI coding agent:

• Claude Code — via MCP (auto-configured by tweaker init)
• Cursor / Windsurf / others — via REST API polling
• Custom agents — GET /changes, POST /changes/:id/applied

CLI

tweaker init           # Set up tweaker in the current project
tweaker serve          # Start the relay server
tweaker serve -p 8080  # Use a custom port
tweaker help           # Show help

Supported frameworks

Auto-detected from package.json:

| Framework | Default port | |-----------|-------------| | Next.js | 3000 | | Vite | 5173 | | Create React App | 3000 | | Gatsby | 8000 | | Nuxt | 3000 | | SvelteKit | 5173 | | Astro | 4321 | | Angular | 4200 | | Remix | 5173 |

REST API

For non-MCP agents, poll the REST API:

# Check server status
curl localhost:7891/health

# Get pending changes
curl localhost:7891/changes

# Mark a change as applied
curl -X POST localhost:7891/changes/:id/applied

# Mark a change as failed
curl -X POST localhost:7891/changes/:id/failed -d '{"reason": "..."}'

License

MIT