OnUI: Browser Extension for Precise UI Feedback to Claude Code

OnUI is a browser extension that provides visual context for UI fixes when working with Claude Code. It solves the common problem of having to describe which UI element needs attention by allowing direct annotation on webpages.

What OnUI Does

You can click elements or draw regions on any webpage, add notes about what's wrong, and export a structured report. Claude Code reads this report via local MCP (Model Context Protocol), giving it exact information about the DOM element, its path, your intent, and severity level. This eliminates ambiguous descriptions like "the button on the right, no the other one."

Technical Implementation

The developer built OnUI using Claude Code over several weeks. Claude Code wrote most of the TypeScript codebase, including both the browser extension and the local MCP server. Specific technical challenges addressed during development include:

• Iterating on Shadow DOM isolation to avoid CSS clashes with host pages
• Building the annotation dialog UI and export formatters
• Debugging the native messaging bridge between the extension and local MCP

Availability and Licensing

OnUI is free to use with no paid tiers. It's available for one-click installation from the Chrome Web Store and also works on Edge and Firefox. The project is licensed under GPL-3.0, has zero cloud dependencies, zero telemetry, and is completely free.

Development Workflow

The developer notes the irony of building a tool for Claude Code using Claude Code itself. Their current UI iteration workflow is: annotate → Claude fixes → verify → repeat.