UiToolbar

Direct visual design for coding agents

UiToolbar is a browser extension + CLI tool for direct visual design with IDE bridge integration. Simply select, edit and send structured context to Cursor, Claude Code, or any coding agent — directly from the browser.

Your agent reads the context and modifies the source file for you. For devs and designers who want fine-grained control and direct manipulation.

Quick start

  1. Install the Chrome extension from the Chrome Web Store
  2. Open your local dev server in Chrome
  3. Press Alt+S to activate select mode
  4. Click any element — UiToolbar highlights it and finds its source
  5. Describe your change and send it to Cursor, Claude Code, or VS Code

How it works

UiToolbar injects a lightweight overlay into the page. When you select an element, it uses React fiber tree inspection to find the owning component, its file path, and line number. This context is sent to your AI agent along with your natural-language instruction.

The agent edits the source file, and your dev server hot-reloads the change — you see the result instantly in the browser.