onUI

Annotate Any UI for AI Agents

Lightweight Chromium extension (Chrome + Edge) + 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
• 👀 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: Chrome Web Store (recommended)

Install directly from Chrome Web Store:

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

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

Windows (PowerShell):

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

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.

🧠 Usage

1. Open any supported website tab.
2. Click the onUI extension icon.
3. Enable This Tab.
4. Use the on-page launcher to annotate and manage notes.
5. Hold Shift and click multiple elements to batch-select targets.
6. Release Shift to open a shared annotation dialog for selected targets.
7. Save once to create one annotation per selected element.
8. 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):

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-style mcpServers map, use this canonical entry:

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

Use an absolute path for onui-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.

Setup/verification notes:

• Run pnpm build:mcp first so packages/mcp-server/dist/bin/onui-cli.js exists.

• Keep the server entry name as onui-local.

• Run pnpm doctor:mcp after wiring config to confirm local setup health.

• Auto-registers onui-local for Claude Code and Codex when those CLIs are installed.

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

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

See:

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

Maintainer Build + Release

app.sh is the local release entrypoint (no CI/CD dependency).

Local validation + artifact packaging

./app.sh --build

This runs:

1. Prereq checks (Node 20+, pnpm, git, zip)
2. Build order: @onui/core -> @onui/extension -> @onui/mcp-server
3. MCP tests
4. MCP doctor smoke check (warnings allowed, errors fail)
5. Artifact packaging into artifacts/vX.Y.Z/

Artifacts:

1. onui-extension-unpacked-vX.Y.Z.zip
2. onui-chrome-web-store-vX.Y.Z.zip (manifest key stripped for CWS)
3. onui-edge-add-ons-vX.Y.Z.zip (manifest key stripped for Edge Add-ons)
4. onui-mcp-bundle-vX.Y.Z.zip
5. install.sh
6. install.ps1
7. checksums.txt

Local release + GitHub publish

./app.sh --release

Release gates:

1. Clean git tree
2. Current branch is main
3. gh auth status succeeds

Release actions:

1. Auto patch bump from root package.json
2. Sync version across extension + MCP runtime strings
3. Run full --build
4. Commit + tag vX.Y.Z
5. Push commit/tag
6. Create GitHub release with packaged assets

🛠️ Development

pnpm install
pnpm check
pnpm test:coverage

🗂️ Repository Structure

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

⭐ Support

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

It helps other users discover the product.

Star History

📄 License

GPL-3.0