onUI — Summary

onUI is a browser extension (Chrome, Edge, Firefox) plus a local MCP server that enables annotation-first UI pair programming: developers can mark up any live web page with element annotations (intent + severity), region drawings (rectangle/ellipse), and export the structured context to AI coding agents without modifying a single line of app source code. The extension overlays visual markers on selected DOM elements; the local MCP server (onui-mcp) exposes 8 tools for agents to list, get, search, update, and delete annotations. The result: an agent can see "the login button has a broken focus ring — high severity" as structured JSON rather than trying to screenshot-parse UI state. Distributed as a browser extension (Chrome Web Store + Microsoft Edge Add-ons + Firefox) and a Node.js MCP server; GPL-3.0 license. With 62 stars and 3 contributors, it is a specialized niche tool with no parallel in any seed: no seed addresses browser UI annotation as an agent context source.

onUI — Overview

Origin

Personal project by Tushar S (onllm.dev). 3 contributors. 62 stars. GPL-3.0. Active, last commit 2026-04-28.

Philosophy

"No integration into app code"

"Annotate Any UI for AI Agents"

onUI targets a specific pain point: when developers need agents to work on UI issues, they have to describe what's wrong with a UI ("the button in the top-right is misaligned") or share screenshots. onUI provides a structured way to annotate live UI elements with machine-readable intent and severity, then expose those annotations to agents via MCP.

Key Design Choices

• No app code changes required — the extension injects into any web page via Shadow DOM (preventing style pollution)
• Per-tab ON/OFF control — disabled by default; explicitly enabled per tab
• Shadow DOM isolation — stable styling regardless of page CSS
• Multiple export formats — compact, standard, detailed, forensic
• Local-only — no cloud backend required (MCP server runs locally)

Why MCP

The MCP server bridges the browser extension (which stores annotations locally in the browser) and the AI coding agent. The extension uses a native messaging host to communicate between browser and the local Node.js MCP server process.

onUI — Architecture

Distribution

• Chrome Web Store: chromewebstore.google.com/detail/onui/hllgijkdhegkpooopdhbfdjialkhlkan
• Microsoft Edge Add-ons: microsoftedge.microsoft.com/addons/detail/onui/fkcmlckehjhcicihbnmhkadfhjhfnond
• Firefox: Manual load (download + load unpacked from release artifact)
• One-command installer: curl -fsSL .../install.sh | bash (handles extension + optional MCP setup)
• Windows: irm .../install.ps1 | iex

Three-Package Monorepo (pnpm workspaces)

packages/
  core/         — @onui/core: shared annotation/report types + formatters
  extension/    — @onui/extension: browser extension runtime
    background/ — Service worker
    content/    — Content script (injected into pages)
    popup/      — Extension popup UI
  mcp-server/   — @onui/mcp-server: local MCP server + native bridge tooling
    src/
      bin/      — onui-cli.js entry point
      mcp/
        server.ts  — MCP server (stdio)
        tools/     — 8 MCP tools
      store/    — Annotation store (local JSON)
      native/   — Native messaging host
      setup/    — MCP auto-configuration
      doctor/   — Health check tooling

Architecture

Browser extension (content script + popup)
    ↓ annotates DOM elements + stores locally
    ↓ native messaging
Local MCP server (Node.js, onui-mcp binary)
    ↓ stdio MCP protocol
AI coding agent (Claude Code, Codex, etc.)

Required Runtime

• Node.js >= 20 (MCP server)
• pnpm (development)
• Chrome stable / Edge stable / Firefox stable (extension)

Config for Claude Code / Codex

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

MCP Server Version

@onui/mcp-server v2.2.3, using @modelcontextprotocol/sdk ^1.17.5

onUI — Components

Browser Extension Features

MCP Server Tools (8 tools)

CLI (onui-mcp binary)

Store

Local annotation store at a path resolved by store/path.ts — JSON-based, local to the user's machine. No cloud sync.

Build + Release

app.sh is the local release entrypoint. Artifacts: 4 extension zips + 1 MCP bundle zip + install scripts + checksums.

onUI — Uniqueness

differs_from_seeds

onUI has no parallel in the 11 seeds or in the entire batch. No seed addresses browser UI annotation as an agent context mechanism. The closest seed by distribution archetype is ccmemory (Archetype 3: MCP-anchored toolserver), since both ship an MCP server that exposes domain-specific data to agents. But ccmemory stores code/chat memory in Neo4j while onUI stores UI annotations from a browser extension in a local JSON store. The "remote control surface" angle is indirect: onUI doesn't control agents — it augments the context agents have access to when working on UI issues.

Positioning

onUI occupies the "browser annotation → structured agent context" niche. It is not a remote control tool in the traditional sense but fits the batch theme because it creates a new input surface (browser extension annotations) that agents consume via MCP. The competitive comparison is screenshot-based UI description (ad-hoc, brittle) vs structured annotation export (precise, queryable, reproducible).

Observable Failure Modes

1. GPL-3.0 license: viral copyleft may concern commercial projects
2. 3-contributor project: limited maintenance bandwidth
3. Native messaging complexity: browser ↔ Node.js native messaging is a security boundary that requires careful setup; doctor command exists to diagnose failures
4. No cross-page aggregation in current tools: onui_list_pages returns pages but agents must query each separately
5. Annotation quality depends on human discipline: if annotations are vague, agent context is vague
6. Firefox support is "unpacked" only: no Firefox Add-ons Store listing

What Is Genuinely Novel

• First framework in the corpus to use browser extension annotations as structured agent context
• Four-level export verbosity (compact/standard/detailed/forensic) — a content-detail taxonomy for agent information
• Shadow DOM injection — styling never breaks host page
• setup + doctor CLI pattern for MCP configuration validation (best-practice for MCP server distribution)
• Cross-browser (Chrome + Edge + Firefox) with platform-specific installer scripts (macOS/Linux bash + Windows PowerShell)