# UiToolbar

> Visual element selection with IDE bridge integration for AI-assisted editing

## What is UiToolbar?

UiToolbar is a Chrome extension that lets you select any element on a live webpage and send it to VS Code, Cursor, or custom MCP servers for AI-assisted editing.

## Features

- **Visual Element Selection** — Hover and click to select any element on the page with highlight overlays
- **React Component Detection** — Automatically detects React components via Bippy fiber tree access
- **Multi-IDE Bridge** — Connects to VS Code, Cursor, or MCP servers
- **Inline Text Editing** — Double-click to edit text directly on the page
- **Element Repositioning** — Drag elements to reorder or freely position them
- **Element Scaling** — Resize elements with drag handles
- **Keyboard Shortcuts** — Alt+S to toggle selection, Alt+M for move mode, Escape to deactivate

## How It Works

1. Install the Chrome extension
2. Click the UiToolbar button or press Alt+S to activate selection mode
3. Hover over elements to see highlights and component info
4. Click to select an element
5. The element data is sent to your connected IDE for AI-assisted editing

## Tech Stack

- **Extension**: Chrome MV3 with SolidJS overlay
- **Providers**: Hono servers for IDE integration
- **Website**: Next.js 15 with React 19

## Links

- Website: https://uitool.bar
- GitHub: https://github.com/uistudioai/uitoolbar
- Documentation: https://uitool.bar/install