Install

1. Install the extension

Install UiToolbar from the Chrome Web Store. No npm packages, no code changes, no config files.

2. Start the provider

The provider bridges the extension to your IDE. One command:

npx uitoolbar

This auto-detects your IDE and starts on the default port. The extension connects automatically.

3. Select and edit

Open your app in Chrome. Press Alt+S to enter select mode. Hover any element to see it highlighted — click to select it.

Type a change description in the side panel. Your agent executes it and streams the result in real-time. Done.

That's it

No <Component /> to add. No build plugin. No framework lock-in. UiToolbar works on any live page — React, Vue, vanilla HTML, production sites.

For React apps, you can optionally add a one-line script to unlock component name and file path detection.

Keyboard shortcuts

Next steps

• Set up your IDE — Cursor, Claude Code, VS Code, or MCP
• React detection — add component name + file path to selections
• Features — move, resize, rotate, inline edit, multi-select