Quick start

Zero to visual editing in 3 steps

1
Install the extension

Add UiToolbar to Chrome from the Chrome Web Store. No build plugins or framework lock-in.

2
Start the provider

The provider is a local server that bridges the extension to your coding agent. Run this in your project directory:

Terminal
1npx uitoolbar

Prompts you to select a provider and target URL. The extension auto-connects when it detects a provider on localhost.

Or use the dev command with explicit flags:

Terminal
1# Cursor (default, app on port 3000)
2npx uitoolbar dev --provider cursor --app 3000
3# Claude Code
4npx uitoolbar dev --provider claude-code
5# MCP server
6npx uitoolbar dev --provider mcp
3
Select and edit

Open your app in Chrome. Press Alt+S to enter select mode. Click any element to select it — type your change in the side panel and your agent edits the source file directly.

Optional: React component detection

For React apps, add a one-line script to unlock component name and file path detection. See the guides for setup instructions per framework.

Keyboard shortcuts

Toggle select modeAltS
Move toolAltM
Annotation toolAltA
Toggle side panelAltC
DeactivateEsc

Next steps