ui-annotator-mcp — Claude Code MCP server: what it does
Runs a proxy that injects hover overlays onto any web page so AI assistants reference interface elements by exact names.
claude mcp add ui-annotator-mcp -- npx -y @mcpware/ui-annotatorWhat ui-annotator-mcp does
The server starts a local reverse proxy on port 7077 and serves your web app with an injected annotation script. When you move the pointer over any DOM element, a tooltip reveals its component label, CSS selector, dimensions, and text content. This gives both you and your assistant a shared reference for edits.
Setup needs neither browser add-ons nor edits to your source tree. An inspect mode halts link clicks and copies component titles directly to your clipboard upon selection. AI clients access tools like annotate, get_elements, and highlight_element to inspect the layout or flash targeted nodes on the screen.
Routing requires accessing the app through the proxy path, such as http://localhost:7077/localhost:3847. Without the target local process actively listening on that destination port, the proxy cannot fetch the markup or return structured nodes to the model.
What it helps with
- Identify interface components using hover tooltips in any browser
- Share structured DOM nodes and technical selectors with an AI agent
- Copy element identifiers to the clipboard in inspect mode
- Highlight specific page nodes visually during design iterations
Example prompts for the agent
- Annotate the page at localhost:3847 and list all detected components
- Toggle inspect mode and highlight the SearchButton element
- Make the sidebar container 40 pixels wider after rescanning the DOM
How to install ui-annotator-mcp
Platform CLI
claude mcp add ui-annotator-mcp -- npx -y @mcpware/ui-annotatorPlatform CLI
codex mcp add ui-annotator-mcp -- npx -y @mcpware/ui-annotatorConfig file
{
"mcpServers": {
"ui-annotator-mcp": {
"command": "npx",
"args": [
"-y",
"@mcpware/ui-annotator"
]
}
}
}Config file
{
"servers": {
"ui-annotator-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@mcpware/ui-annotator"
]
}
}
}Platform CLI
gemini mcp add ui-annotator-mcp npx -y @mcpware/ui-annotatorStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about ui-annotator-mcp
How do you install ui-annotator-mcp in Claude Code?
Run claude mcp add ui-annotator-mcp -- npx -y @mcpware/ui-annotator.
What does ui-annotator-mcp do?
It proxies your web application and injects visual labels into the DOM so that you and the assistant refer to the exact same UI elements.
Does it require browser extensions or code modifications?
No, it works in standard browsers via an HTTP reverse proxy without altering application source code or installing extensions.
