Ui Annotator Mcp

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.