mcpware/ui-annotator-mcp

Overview

An MCP server that injects hover labels onto any web page, revealing element names or annotations without requiring browser extensions. It works in any browser by proxying or modifying page content to display labels on hover.

Best for

Best for
Developers who need instant UI element identification without installing browser extensions

Use cases

• Inspecting UI element names during frontend development
• Debugging accessibility by identifying unlabeled components
• Quickly mapping page structure for testing or documentation

How to use

Install

npx @mcpware/ui-annotator

Tools exposed

• UI_ANNOTATOR_PORT

Tested with

Claude Code, Cursor

Notes

An MCP server that injects hover labels onto any web page, revealing element names or annotations without requiring browser extensions. It works in any browser by proxying or modifying page content to display labels on hover.

6 stars on GitHub. Last updated 2026-03-24. Licensed MIT.

Use cases

• Inspecting UI element names during frontend development
• Debugging accessibility by identifying unlabeled components
• Quickly mapping page structure for testing or documentation

Pros

• No browser extensions needed, works across all browsers
• Simple to set up as a standalone MCP server
• Lightweight and focused on a single useful task

Cons

• Low community adoption (6 stars) suggests early or niche tool
• Requires running a separate server process
• Hover labels may interfere with page interactions or clutter complex UIs

Indexed from awesome-mcp-servers-punkpeye and enriched against its public facts.