ui-annotator-mcp

[](https://www.npmjs.com/package/@mcpware/ui-annotator) [](LICENSE) [](https://github.com/mcpware/ui-annotator-mcp) [](https://github.com/mcpware/ui-annotator-mcp/fork)

See what every UI element is called — in any browser, zero extensions.

An MCP server that adds interactive hover annotations to any web page. Open a proxied URL, hover any element, see its name. Tell your AI assistant "make the sidebar wider" — it knows exactly what you mean.

When reviewing a web UI with an AI coding assistant, the hardest part isn't the code change — it's describing which element you want changed.

> "That thing on the left... the second row... no, the one with the icon..."

You don't know what it's called. The AI doesn't know what you're pointing at. You waste time on miscommunication instead of shipping.

Open your page through the annotator proxy. Hover any element — instantly see its name, CSS selector, and dimensions. Now you both speak the same language.

# Start the MCP server
npx @mcpware/ui-annotator

# Open in ANY browser
http://localhost:7077/localhost:3847

That's it. No browser extensions. No code changes. No setup. Works in Chrome, Firefox, Safari, Edge — any browser.

Your app (localhost:3847)
        │
        ▼
┌─────────────────────┐
│  UI Annotator Proxy  │ ← Reverse proxy on port 7077
│  (MCP Server)        │
└─────────────────────┘
        │
        ▼
Proxied page with hover annotations injected
        │
        ├──► User sees: hover overlay + tooltip with element names
        └──► AI sees: structured element data via MCP too