Ui Annotator Mcp

Name: Ui Annotator Mcp
Author: mcpware

@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

Basic information

Config

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

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

Tools

No tools detected

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

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.