onUI

Coding Agents 💻 TypeScript ⚖️ GPL-3.0 🟡 Quiet lately
98 stars

onUI is a lightweight browser extension for Chrome, Edge, and Firefox that lets developers annotate any UI for AI agents without modifying application code. It provides a local MCP bridge for annotation-first UI pair programming, enabling AI tools to understand and act on UI elements. It is designed for developers and teams working with AI coding assistants.

onUI demo
🎞️ Demo from the project README

✨ Key features

  • No integration into app code required
  • Per-tab ON/OFF control, off by default
  • In-page annotation dialog with intent and severity
  • Draw mode for region annotations (rectangle and ellipse)
  • Export outputs in compact, standard, detailed, or forensic formats
  • Local MCP server with native bridge, no cloud backend

🎯 Use cases

  • Annotate UI elements for AI agents to understand and interact with
  • Provide context to AI coding assistants during pair programming
  • Create region-based annotations for visual testing or documentation
  • Export structured annotations for debugging or analysis

📦 Installation

🧰 Requirements: Requires a Chromium browser (Chrome or Edge) or Firefox, and Node.js 20+ for MCP setup. No API keys or accounts required.

Option A: Browser Extension Stores (recommended)

Chrome Web Store: https://chromewebstore.google.com/detail/onui/hllgijkdhegkpooopdhbfdjialkhlkan?authuser=0&hl=en-GB

Microsoft Edge Add-ons: https://microsoftedge.microsoft.com/addons/detail/onui/fkcmlckehjhcicihbnmhkadfhjhfnond

Option B: One-command installer from latest GitHub release

macOS/Linux:

curl -fsSL https://github.com/onllm-dev/onUI/releases/latest/download/install.sh | bash

macOS/Linux (Firefox artifact):

curl -fsSL https://github.com/onllm-dev/onUI/releases/latest/download/install.sh | bash -s -- --firefox

Windows (PowerShell):

irm https://github.com/onllm-dev/onUI/releases/latest/download/install.ps1 | iex

Windows (PowerShell, Firefox artifact):

iwr https://github.com/onllm-dev/onUI/releases/latest/download/install.ps1 -OutFile install.ps1; .\install.ps1 -Firefox

The installer handles extension install and can set up MCP in the same run. When prompted with Set up local MCP bridge now? [y/N], enter y to enable MCP.

Then load it in Chrome or Edge:

  1. Open chrome://extensions or edge://extensions
  2. Enable Developer mode
  3. Cl

🚀 Usage

  1. Open any supported website tab.
  2. Click the onUI extension icon.
  3. Enable This Tab.
  4. Use the on-page launcher to open the compact toolbar.
  5. Toggle Annotate mode for element targeting or Draw mode for region targeting.
  6. Hold Shift and click multiple elements to batch-select targets.
  7. Release Shift to open a shared annotation dialog for selected targets.
  8. Save once to create one annotation per selected element (or one region annotation in draw flow).
  9. Open toolbar Settings to choose output level and configure Clear on copy.
  10. Copy exported output from the toolbar.

⚠️ Good to know

The project is stable and production-ready, but browser support is limited to Chrome stable, Edge stable, and Firefox stable (unpacked).

❓ FAQ

Does onUI require modifying my application code?

No, onUI is designed to annotate any UI without integration into app code.

How do I set up the local MCP bridge?

Run the installer and answer 'y' when prompted, or use the --mcp flag on macOS/Linux or set ONUI_INSTALL_MCP=1 on Windows.

Can I use onUI with Firefox?

Yes, onUI supports Firefox stable, but you need to install it manually as a temporary add-on from the release artifact.

What output formats are available for annotations?

You can export annotations in compact, standard, detailed, or forensic formats.

📊 Repository

Stars★ 98
Forks🍴 8
Open issues🐛 1
Last commit🕒 Apr 28, 2026
Created📅 Feb 2026
Language💻 TypeScript
License⚖️ GPL-3.0

🤖 Overview, features, install steps and FAQ were generated from the project's README on Sep 4, 2026. Always check the original source before running commands.