Claude Studio

Visual AI Coding Assistant

Select an element on your live page, describe the change in plain English, and Claude Code edits your source — in any framework. A browser extension and a local agent, talking over WebSocket.

Add to Chrome View on GitHub

Open SourceFree Forever

Privacy-FirstNo Telemetry

Any FrameworkReact · Vue · Svelte · HTML

LocalRuns On Your Machine

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 the selector, computed styles, and full HTML context for precise edits.

Natural Language Edits

Describe what you want in plain English. "Make this button rounded with a subtle shadow" — done, in your source.

Reliable Model Switching

Switch between Sonnet, Opus, Haiku, and Fable on the fly. The agent applies your choice on every turn — no flaky slash commands.

Plugin & Skill Control

Toggle Claude Code plugins and skills straight from the extension's Agent tab. Shape how the agent works without touching config files.

Realtime Config Sync

Tune the model, permissions, turns, and budget from the extension or the server's TUI — changes broadcast to every connected client instantly over WebSocket.

Live Streaming

Watch Claude work in the side panel — file reads, edits, and tool calls as they happen, with token and cost tracking.

How It Works

Four steps to visual editing

From setup to shipping changes in under a minute.

Run the agent

In your project directory, run one command. An interactive terminal UI starts and shows your WebSocket URL.

$ pnpx claude-studio

Connect the extension

Install the browser extension, open the side panel, and point it at the ws:// URL from the terminal.

Pick & describe

Toggle the element picker with Ctrl+Shift+E, select an element, and describe your change in the floating widget.

Watch it ship

Claude Code edits your source files. Save and the change is live — in React, Vue, Svelte, plain HTML, whatever you use.

See It In Action

From prompt to production

claude-studio

$ pnpx claude-studio

Claude Studio 2.0 · WebSocket: ws://localhost:7281

[ext] Element selected: button.cta-primary

[you] "Make this button rounded with a gold border"

Reading src/components/Button.tsx...

Editing src/components/Button.tsx:12-15

Done. 1 file changed.

Get Started

Start building with Claude Studio