Visual AI Coding Assistant
Select elements on your page, describe changes in plain English, and Claude Code makes it happen in your source code.
Features
Everything you need
A complete visual editing toolkit powered by Claude Code. Select, describe, ship.
Smart Element Picker
Select any element with a gold highlight overlay. Captures CSS selectors, computed styles, and full HTML context for precise edits.
Natural Language Edits
Describe what you want to change in plain English. "Make this button rounded with a subtle shadow" — done.
Real-time Streaming
Watch Claude work in the side panel. See file reads, edits, and tool calls as they happen.
Session Persistence
Chat history and session state survive sidebar reloads. Pick up right where you left off.
Cost Tracking
Monitor token usage, spend per turn, and cumulative cost. Full transparency, no surprises.
Model Flexibility
Switch between Sonnet, Opus, and Haiku on the fly. Use the right model for the right task.
How It Works
Four steps to visual editing
From setup to shipping changes in under a minute.
Start the Server
Run the bridge server with a single command. It connects your browser to Claude Code.
$ pnpm dlx claude-studio servePick an Element
Toggle the element picker with Ctrl+Shift+E. Hover over any element to see the gold highlight.
Describe the Change
Type what you want in the floating prompt widget. Press Ctrl+Enter to send.
Watch It Happen
Claude edits your source files. Next.js HMR reloads the page instantly with your changes.
See It In Action
From prompt to production
$ pnpm dlx claude-studio serve
Bridge server running on ws://localhost:7281
[ext] Element selected: button.cta-primary
[you] "Make this button rounded with a gold border"
Reading app/components/Button.tsx...
Editing app/components/Button.tsx:12-15
Done. 1 file changed.
[hmr] Page reloaded
Get Started
Start building with Claude Studio
$ pnpm dlx claude-studio setupOpen source. No analytics. No telemetry.