onUI

Lightweight browser extension (Chrome + Edge + Firefox) + local MCP bridge for annotation-first UI pair programming.

[!NOTE]onUIis now stable and production-ready.

Click the preview above to play the full demo video.

- 🧩 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)

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

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

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

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

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 withSet up local MCP bridge now? [y/N], enteryto enable MCP.
- Openchrome://extensionsoredge://extensions
- EnableDeveloper mode
- ClickLoad unpacked
- Select~/.onui/extensions/current(or%USERPROFILE%\.onui\extensions\currenton Windows)

Chromium browsers require this final manual step for unpacked extensions.
- Downloadonui-firefox-add-ons-vX.Y.Z.zipfrom the GitHub release page.
- Extract it to a local folder.
- Openabout:debugging#/runtime/this-firefox.
- ClickLoad Temporary Add-on...
- Select the extractedmanifest.json.
- Open any supported website tab.
- Click the onUI extension icon.
- EnableThis Tab.
- Use the on-page launcher to open the compact toolbar.
- ToggleAnnotate modefor element targeting orDraw modefor region targeting.
- HoldShiftand click multiple elements to batch-select targets.
- ReleaseShiftto open a shared annotation dialog for selected targets.
- Save once to create one annotation per selected element (or one region annotation in draw flow).
- Open toolbarSettingsto choose output level and configureClear on copy.
- Copy exported output from the toolbar.

Recommended path: use the same installer command above and answerywhen prompted.

If you want to force MCP setup in non-interactive mode:

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

Windows (PowerShell, set env var before running installer):

$env:ONUI_INSTALL_MCP=1; irm https://github.com/onllm-dev/onUI/releases/latest/download/install.ps1 | iex

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:

pnpm build:mcp pnpm setup:mcp pnpm doctor:mcp

Manual JSON config for custom MCP routers/clients

If your MCP router uses an object-stylemcpServersmap, use this canonical entry:

{ "mcpServers": { "onui-local": { "command": "node", "args": [ "/ABSOLUTE/PATH/TO/onUI/packages/mcp-server/dist/bin/onui-cli.js", "mcp" ] } } }

Use anabsolute pathforonui-cli.js(relative paths are often rejected or resolved incorrectly by routers).

If your router uses a list/array schema instead of an object map, adapt the same command/args shape like this:

{ "servers": [ { "name": "onui-local", "command": "node", "args": [ "/ABSOLUTE/PATH/TO/onUI/packages/mcp-server/dist/bin/onui-cli.js", "mcp" ] } ] }

The list example above is a schema adaptation pattern, not a claim about any specific router's exact key names.

-

Runpnpm build:mcpfirst sopackages/mcp-server/dist/bin/onui-cli.jsexists.

Keep the server entry name asonui-local.

Runpnpm doctor:mcpafter wiring config to confirm local setup health.

Auto-registersonui-localfor Claude Code and Codex when those CLIs are installed.

Browser support in this release:Chrome stable + Edge stable + Firefox stable (unpacked).

@onui/mcp-serveris workspace-local (private: true), so run setup/doctor from this repo.

- docs/mcp-setup.md
- docs/doctor.md
- docs/release.md

app.shis the local release entrypoint (no CI/CD dependency).
- Prereq checks (Node 20+, pnpm, git, zip)
- Build order:@onui/core->@onui/extension->@onui/mcp-server
- MCP tests
- MCP doctor smoke check (warnings allowed, errors fail)
- Artifact packaging intoartifacts/vX.Y.Z/
- onui-extension-unpacked-vX.Y.Z.zip
- onui-chrome-web-store-vX.Y.Z.zip(manifestkeystripped for CWS)
- onui-edge-add-ons-vX.Y.Z.zip(manifestkeystripped for Edge Add-ons)
- onui-firefox-add-ons-vX.Y.Z.zip
- onui-mcp-bundle-vX.Y.Z.zip
- install.sh
- install.ps1
- checksums.txt
- Clean git tree
- Current branch ismain
- gh auth statussucceeds
- Auto patch bump from rootpackage.json
- Sync version across extension + MCP runtime strings
- Run full--build
- Commit + tagvX.Y.Z
- Push commit/tag
- Create GitHub release with packaged assets

pnpm install pnpm check pnpm test:coverage

packages/ core/ Shared annotation/report types + formatters extension/ Browser extension runtime (background/content/popup) mcp-server/ Local MCP server + native bridge setup/doctor tooling

If onUI is useful to you, please star the repo:https://github.com/onllm-dev/onUI

Build and deploy full-stack Next.js apps with 98 tools for React, AWS, and MongoDB