onllm-dev/onUI

Annotate Any UI for AI Agents
Lightweight browser extension (Chrome + Edge + Firefox) + local MCP bridge for annotation-first UI pair programming.
Powered by onLLM.dev.
> [!NOTE]
> onUI is now stable and production-ready.
Demo
Click the preview above to play the full demo video.
✨ Why onUI
- 🧩 No integration into app code
- 🎛️ Per-tab ON/OFF control (off by default)
- 🎯 In-page annotation dialog with intent + severity
- ✍️ Draw mode for region annotations (rectangle + ellipse)
- ⚙️ Compact toolbar with pop-out settings (output level + clear on copy)
- 👀 Visual markers and hover targeting
- 🧾 Export outputs in compact / standard / detailed / forensic formats
- 🛡️ Shadow DOM isolation for stable styling
- 🔌 Local MCP server + native bridge (no cloud backend required)
Install (Current)
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
Use this if you want the latest version (store updates may lag) or for Firefox:
macOS/Linux:
macOS/Linux (Firefox artifact):
Windows (PowerShell):
Windows (PowerShell, Firefox artifact):
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. Click **Load unpacked**
4. Select ~/.onui/extensions/current (or %USERPROFILE%\.onui\extensions\current on Windows)
> Chromium browsers require this final manual step for unpacked extensions.
Firefox (manual from release artifact):
1. Download onui-firefox-add-ons-vX.Y.Z.zip from the GitHub release page.
2. Extract it to a local folder.
3. Open about:debugging#/runtime/this-firefox.
4. Click **Load Temporary Add-on...**
5. Select the extracted manifest.json.
🧠 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.
🔌 Local MCP Setup
Recommended path: use the same installer command above and answer y when prompted.
If you want to force MCP setup in non-interactive mode:
macOS/Linux (--mcp):
Windows (PowerShell, set env var before running installer):
MCP setup now uses a prebuilt release bundle (no local build required), but still needs Node 20+.
Manual MCP setup from source is still supported:
Manual JSON config for custom MCP routers/clients