Claude Studio

About

Claude Studio turns your browser into a visual coding tool for Next.js. Select any element on your live page, describe what you want to change in plain English, and Claude Code edits your source files directly.

No more switching between browser and editor. No more hunting for the right file. Point at what you want to change, say what you want, and it's done.


HOW IT WORKS

1. Run the Claude Studio bridge server locally (one command: pnpm dlx claude-studio).
2. Open your Next.js app in Chrome.
3. Press Ctrl+Shift+E (Cmd+Shift+E on Mac) to activate the element picker.
4. Click any element on the page — a button, a heading, a card, a section.
5. Type your change: "make this text larger", "change the background to blue", "add a subtle shadow", "replace this icon with a shopping cart".
6. Claude reads your source code, finds the exact file and component that renders the element, and makes the edit.

Your page updates. Your source files are saved. That's it.


WHAT GETS CAPTURED WHEN YOU SELECT AN ELEMENT

Claude Studio captures rich context about the element you click — CSS selector, tag name, classes, ID, text content, HTML snippet, computed styles (color, background, font size, padding, margin), the full parent chain, and sibling/child counts. This context lets Claude pinpoint the correct source file and make surgical edits without touching anything else.


THE SIDE PANEL

Claude Studio includes a full chat interface in Chrome's side panel. You can:

· See the live connection status to your local bridge server
· View the conversation log with Claude, including streaming responses
· Select which Claude model to use
· Start new sessions
· Monitor token usage and session stats
· Use slash commands for common operations

The side panel stays open alongside your page, so you can iterate quickly — select an element, describe a change, see it happen, select the next element.


THE ELEMENT PICKER

The picker highlights elements as you hover over them, showing tag name, ID, and class info in a tooltip. When you click, the element gets a gold outline and a prompt widget appears right next to it. You type your instruction directly on the page, close to the element you're changing. While Claude is working, the outline animates to show progress.

Press Escape at any time to cancel. The picker filters out its own UI elements so you never accidentally select the extension's own overlays.


WHAT KINDS OF CHANGES CAN YOU MAKE?

Anything you'd do in code:

· Visual changes: colors, fonts, spacing, sizing, borders, shadows, opacity, layout
· Content changes: text, headings, labels, placeholder text, alt text
· Structural changes: add a new section, remove an element, reorder items, wrap in a container
· Component changes: swap an icon, add a badge, insert a divider, add a tooltip
· Responsive changes: adjust breakpoints, change mobile layout, hide elements on small screens
· Tailwind-first: Claude prefers editing Tailwind classes over inline styles, matching your project's conventions
· CSS Modules: if your project uses CSS Modules, Claude edits those too

Claude finds the right file automatically. Whether your component lives in app/page.tsx, a shared component in src/components/, or a layout file, the extension captures enough context for Claude to trace the component tree and locate the source.


ARCHITECTURE

Claude Studio has three parts:

· Browser extension — the element picker, prompt widget, and side panel UI
· Local bridge server — a lightweight Node.js process that connects the extension to Claude via WebSocket. Runs on your machine, talks to the Claude Agent SDK. Install with pnpm dlx claude-studio or npx claude-studio.
· Claude Code plugin — optional, provides Claude with specialized knowledge about visual editing and auto-formats code after edits

The extension communicates with the bridge server over WebSocket (default: localhost:3578). The server URL is configurable from the extension popup. The bridge server manages Claude sessions, handles streaming responses, and builds structured prompts from element selections.


REQUIREMENTS

· A local Next.js project (App Router or Pages Router)
· Node.js installed on your machine
· An Anthropic API key (set as ANTHROPIC_API_KEY environment variable)
· The Claude Studio bridge server running locally


PRIVACY & SECURITY

· All processing happens locally on your machine
· The extension connects only to your local bridge server — no data is sent to third-party servers other than the Anthropic API for Claude responses
· Element data (HTML snippets, styles, selectors) stays between your browser and your local server
· Your source code is read and edited locally by Claude Code — nothing is uploaded


KEYBOARD SHORTCUTS

· Ctrl+Shift+E / Cmd+Shift+E — Toggle element picker
· Escape — Cancel picking / close prompt widget
· Enter — Submit prompt


OPEN SOURCE

Claude Studio is open source. The full monorepo — extension, server, shared types, and CLI — is available on GitHub.