Ui Annotator Mcp

@mcpware

About Ui Annotator Mcp

MCP server that annotates any web page with hover labels for AI assistants. Reverse proxy injection — zero browser extensions, works in any browser. 5 tools: annotate, get_elements, highlight_element, rescan_elements, inspect_mode.

#mcp #ui-annotation #developer-tools #reverse-proxy #browser #design-feedback #dom-inspector #claude

Config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "ui-annotator": {
      "command": "npx",
      "args": [
        "-y",
        "@mcpware/ui-annotator"
      ]
    }
  }
}

Tools

Open a web page with hover annotations. Returns a proxy URL that adds interactive element labels to any page. User opens this URL in any browser to see annotations on hover.

Get all UI elements detected on the currently annotated page. Returns element names, CSS selectors, positions, and sizes. Use this to understand what the user is referring to when they describe a UI element.

Briefly flash-highlight a specific element on the page so the user can see which element you are referring to. Useful for confirming "do you mean this element?"

Force the annotated page to rescan all UI elements. Use this after the page content has changed (e.g. after navigation, DOM updates, or user interaction).

Toggle inspect mode on the annotated page. When ON, the user can click any element to copy its name. When OFF, the page behaves normally. Use this to help the user copy element names for communicating design changes.

Overview

What is Ui Annotator Mcp?

Ui Annotator Mcp is an MCP server that adds interactive hover annotations to any web page. It works as a reverse proxy that injects a lightweight script, allowing users to see element names, CSS selectors, and dimensions without browser extensions or code changes. Designed for anyone who needs to communicate UI element references to an AI coding assistant.

How to use Ui Annotator Mcp?

Run npx @mcpware/ui-annotator to start the proxy on port 7077 (or override with UI_ANNOTATOR_PORT env). Open a proxied URL like http://localhost:7077/localhost:YOUR_PORT in any browser. Hover any element to see its information. AI assistants can use MCP tools such as annotate(url), get_elements(), highlight_element(name), rescan_elements(), and inspect_mode(enabled).

Key features of Ui Annotator Mcp

Hover any element to see its name, CSS selector, content preview, and dimensions
Click‑to‑copy element name via inspect mode
Collapsible toolbar with inspect toggle and element count
Auto‑rescan DOM via MutationObserver after page changes
Zero external dependencies: uses Node.js built‑in http and @modelcontextprotocol/sdk

Use cases of Ui Annotator Mcp

Describing UI elements to an AI assistant with precise, shared names
Reviewing web UIs collaboratively without needing DevTools knowledge
Onboarding non‑technical team members to identify and reference UI components
Debugging layout or naming issues by viewing element selectors and dimensions
Integrating with MCP‑compatible AI tools to perform targeted UI changes

FAQ from Ui Annotator Mcp

What makes Ui Annotator Mcp different from browser DevTools?

DevTools requires DOM/CSS knowledge and is for debugging. Ui Annotator Mcp provides human‑readable element names for communication with AI, requires zero learning, and works in any browser without setup.

Does Ui Annotator Mcp require a browser extension or code changes?

No. It uses a reverse proxy to inject the annotation script. No extensions, no code changes, and works in Chrome, Firefox, Safari, Edge, and any other browser.

How does Ui Annotator Mcp communicate with the browser and AI?

The proxy serves the annotated page. The browser sends detected elements via HTTP POST to the server. The AI queries the server via MCP stdio tools. No WebSocket or Express needed.

What runtime dependencies does Ui Annotator Mcp have?

Only Node.js and the @modelcontextprotocol/sdk package. The proxy is built using Node’s built‑in http module.

What transports and authentication does Ui Annotator Mcp support?

It uses MCP stdio transport. No authentication is mentioned; it runs locally on localhost. The proxy rewrites Content-Security-Policy headers to allow the injected script.

Frequently asked questions

What makes Ui Annotator Mcp different from browser DevTools?

Does Ui Annotator Mcp require a browser extension or code changes?

No. It uses a reverse proxy to inject the annotation script. No extensions, no code changes, and works in Chrome, Firefox, Safari, Edge, and any other browser.

How does Ui Annotator Mcp communicate with the browser and AI?

The proxy serves the annotated page. The browser sends detected elements via HTTP POST to the server. The AI queries the server via MCP stdio tools. No WebSocket or Express needed.

What runtime dependencies does Ui Annotator Mcp have?

Only Node.js and the `@modelcontextprotocol/sdk` package. The proxy is built using Node’s built‑in `http` module.

What transports and authentication does Ui Annotator Mcp support?

It uses MCP stdio transport. No authentication is mentioned; it runs locally on localhost. The proxy rewrites `Content-Security-Policy` headers to allow the injected script.

Comments

Basic information

More Other MCP servers

EverArt

modelcontextprotocol

Model Context Protocol Servers

88.1K

Glasswarp

See and control a real Windows PC you own — from any MCP client, locally or remotely. Observe (UIA + screenshots), click/type/drag/scroll, launch apps, owner Live View. BYOH: your machine, your key.

ICSS

chokcoco

不止于 CSS

20.7K

Activepieces

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

23.2K

ghidraMCP

LaurieWired

MCP Server for Ghidra

9.4K