Handle Extension
Refine directly in your Chrome browser
Explore, refine, and land UI changes by working on your live product. Use your existing agent and work with precision tools on top of real code.
Design on the real thing
Real components, real data, real interactions. No more designing at a distance — your product is the canvas.
Best for Design Engineers
Easy add-on to your existing workflow. Keep using your current agent and local devserver and just use /handle to invoke.
SUPPORTED AGENTS
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Rovo Dev, and Windsurf
Working with Handle Extension
Install Handle Extension by copying or typing this command in your terminal:
FREE AND OPEN SOURCE
Works with your existing agent. No new setup required.
1
Invoke from your agent
From an agent session, type /handle
2
Start your local app
Run your local dev server, navigate to your app in Chrome, and open the Handle Extension.
3
Make changes in Handle Extension
Select components and elements to change and dial in the details of your app.
4
Send changes back to your agent
Handle returns the right context to your agent so it can land the changes you specified in code.
Revision History
v1.0.3
This revision updates the agent setup. Run npx handle-ext@latest init again before using these features.
- Use the /handle skill only once per session.
- Double click on text elements to edit inline.
- Use natural language to describe changes you want to make to an element.
Enjoying Handle Extension? Try Handle Studio.
$15/MONTH FIRST MONTH FREE
No credit card required to download or use Handle Studio during the free trial period. Bring your own agents.
macOS 13+ on Apple Silicon