TL;DR

UI Studio used to stop at copying context for your coding agent. Now it can directly talk to the agent to edit the code — all from the browser.

What stays the same

UI Studio is free to use
It works with any AI coding tool (Claude Code, Cursor, VS Code)
The core idea: "click an element, get real React context and file paths"

What's new

The big change is that UI Studio can now spin up agents like Claude Code or Cursor directly from the page. Instead of copying context to your clipboard, you can now:

Run multiple UI tasks at once, each attached to the element you clicked
Make changes to your code without leaving the browser
See real-time status updates as the agent works

Here's how a typical workflow looks:

typescript

// 1. You click a button on the page
// 2. UI Studio extracts the component info:
{
  componentName: "PricingCard",
  filePath: "src/components/pricing-card.tsx",
  props: { tier: "pro", price: 29 }
}

// 3. You type: "Make the price bigger and add a discount badge"

// 4. The agent edits your file directly

The agent architecture

Under the hood, UI Studio uses a provider system that can talk to different AI backends:

Claude Code (CLI)

The Claude Code provider uses the official @anthropic-ai/claude-agent-sdk to communicate with your local Claude Code installation. This means:

Changes are made directly to your files
Full access to your project context
Works with your existing Claude Code configuration

Cursor Agent

For Cursor users, we use the cursor-agent CLI that comes with Cursor IDE. Same idea — select an element, type your request, watch the changes happen.

Claude Direct (API)

If you prefer not to run a local server, you can use the Claude Direct API mode. This sends requests directly to Anthropic's API from your browser. You'll need to provide your own API key.

Why this matters

The vision for UI Studio has always been about closing the gap between design and code. When you're looking at a UI element and you know exactly what you want to change, you shouldn't have to:

Figure out what file it's in
Navigate to the right component
Understand the structure
Make the change
Check if it's right

With agent integration, steps 1-4 happen automatically. You just describe what you want, and the agent handles the rest.

Getting started

If you're already using UI Studio, the agent features are available today. Just:

Start your provider server (Claude Code or Cursor)
Open the extension settings
Select your preferred agent backend
Click any element and start prompting

For Claude Code specifically:

bash

# Start the Claude Code provider with your project
UISTUDIO_CWD=/path/to/your/project pnpm dev:claude-code

What's next

We're working on a few things:

Multi-agent support: Run different agents for different tasks
Undo/redo: Better integration with version control
Component generation: Create new components from scratch

Stay tuned for more updates.

UI Studio for Agents