Ui Annotator Mcp
Overlay hover labels on any web page so your agent can see element names and targets while you iterate on UI fixes without browser extensions.
Overview
io.github.mcpware/ui-annotator-mcp is an MCP server for the Build phase that labels web page elements on hover so agents can target frontend fixes accurately.
What is this MCP server?
- Adds hover labels on web pages to expose structure for AI assistants
- Works with any browser—no Chrome extension or plugin install required
- stdio npm package @mcpware/ui-annotator (registry ui-annotator-mcp v0.1.6)
- Bridges “what is this button?” gaps during agent-led UI debugging
- GitHub mcpware/ui-annotator-mcp for IDE-side MCP registration
- Server version 0.1.6; npm package @mcpware/ui-annotator
- Documented positioning: zero extensions, any browser
- stdio transport via MCP registry packages metadata
What problem does it solve?
Agents mis-click and mis-edit UIs because screenshots and raw HTML lack stable, human-readable element references during frontend builds.
Who is it for?
Solo devs doing agent-assisted frontend debugging on local or staging sites who want labeled DOM context without maintaining a custom Chrome extension.
Skip if: Native mobile apps outside the browser, teams that already standardized on Playwright trace-only workflows, or security reviews that forbid interactive page overlays.
What do I get? / Deliverables
With the annotator MCP running, your agent can use labeled page regions to propose CSS, component, and interaction changes with fewer wrong selectors.
- Hover-labeled view of page elements consumable by agent tools
- Clearer element targeting for CSS, component, and interaction edits
- Extension-free labeling workflow across supported browsers
Recommended MCP Servers
Journey fit
Build is where solo builders implement and debug interfaces; giving the model a labeled view of the DOM shortens fix cycles on real pages. Frontend subphase is canonical because annotations help agents reason about components, selectors, and layout bugs on live markup—not backend schemas.
How it compares
DOM labeling browser MCP tool, not a component generator or E2E test framework skill.
Common Questions / FAQ
Who is io.github.mcpware/ui-annotator-mcp for?
Frontend-focused solo builders using MCP agents who need clearer element references while fixing or extending web UIs in any browser.
When should I use io.github.mcpware/ui-annotator-mcp?
Use it during Build when an agent is implementing or patching a web interface and labeled hover targets reduce ambiguity on live pages.
How do I add io.github.mcpware/ui-annotator-mcp to my agent?
Install @mcpware/ui-annotator from npm, configure the stdio MCP server in Claude Code or Cursor per the GitHub README, load the page under test, then call annotator tools before UI edit requests.