Point at any element on your live site. UiToolbar detects the React component, resolves the source file, and sends it to your AI agent — Cursor, Claude Code, or any MCP client — for instant edits.

Quick Start

npx uitoolbar start localhost:3000

Opens a proxy at http://localhost:2000 with the UiToolbar overlay injected into every page. Select an element, and your AI agent edits the code.

Features

• Zero-config proxy — wraps your dev server with a single command, no code changes needed
• React component detection — resolves component name, file path, and line number via fiber tree inspection
• Multi-IDE support — works with Cursor, Claude Code, VS Code, and any MCP-compatible client
• Streaming AI edits — real-time status updates as your agent modifies code
• Per-session undo — revert any AI edit with a single command
• Framework agnostic — works with Next.js, Vite, Remix, and any dev server

How It Works

UiToolbar runs a lightweight HTTP proxy in front of your dev server. It injects a visual overlay into every page that lets you click on any element to select it. The overlay detects the underlying React component and resolves its source location. That context — component name, file path, props, and surrounding code — is sent to a provider server that bridges to your IDE's AI agent. The agent receives rich, structured context about what you're looking at, so it can make precise edits without guessing.

Commands

uitoolbar start [url]

Start a proxy server that injects UiToolbar into the target site.

uitoolbar start localhost:3000

| Option | Default | Description | |--------|---------|-------------| | -p, --port <port> | 2000 | Proxy server port | | --host <hostname> | localhost | Hostname to bind to | | --provider <package> | — | Provider package (e.g. @uitoolbar/provider-cursor) |

When run without arguments, prompts for the target URL and provider interactively.

uitoolbar dev

Start the full development stack: proxy server + provider(s).

uitoolbar dev --provider cursor
uitoolbar dev --provider claude-code
uitoolbar dev --provider mcp
uitoolbar dev --provider both    # cursor + mcp

| Option | Default | Description | |--------|---------|-------------| | -a, --app <port> | 3000 | Your app's dev server port | | -p, --proxy <port> | 2000 | Proxy server port | | --provider <type> | cursor | Provider: cursor, claude-code, mcp, both | | --no-open | — | Don't open browser | | --skip-proxy | — | Skip the proxy, only start providers |

uitoolbar init

Auto-detect your framework and set up UiToolbar in your project.

uitoolbar init

Providers

| Provider | Package | Default Port | |----------|---------|-------------| | Cursor | @uitoolbar/provider-cursor | 5567 | | Claude Code | @uitoolbar/provider-claude-code | 4567 | | MCP | @uitoolbar/provider-mcp | 3001 |

Documentation

Full docs at uitool.bar

License

UNLICENSED