MCP server · Developer tools
UI Annotator MCP server
by mcpware
Hover any web page element to see its name, then tell your AI exactly which part to change.
UI Annotator is a small helper that puts labels on every element of a web page you are looking at. You open your page through it, hover over any button, box, or menu, and its name appears right there. It is handy for anyone who works on a website with an AI assistant and keeps struggling to explain which part they mean.
What is an MCP server? The 30-second version
On its own, your AI can only chat. It cannot see the web page you have open in your browser. An MCP server is a small helper program that gives your AI a new skill or a connection to something, and here it connects your AI to the web page you are viewing. Once it is running, your AI and you look at the same element names, so when you say "make the sidebar wider", it knows exactly which box you mean.
What this MCP server does
You start the helper, and it opens a special address for your page. You open that address in your usual browser, and now every element on the page has a name you can see by hovering. The helper scans the page, collects the names, selectors, and sizes of all the elements, and shares that list with your AI. When you ask your AI to change something, it looks up the element by the name you saw, and it can also flash that element on your screen so you can confirm it picked the right one. After you refresh the page, the helper rescans automatically.
Click to zoomWhat you can do with it
- Hover any element to see its name, selector, and size
- Click an element in Inspect mode to copy its name to your clipboard
- Ask your AI to highlight a specific element so you can confirm it
- Ask your AI to rescan the page after you change something
- Turn Inspect mode on or off from your AI instead of clicking the toolbar
- Get a full list of all detected elements with their positions
Try asking your AI
- “Annotate my app at localhost:3847”
- “Show me all the elements on the page”
- “Highlight the sidebar element so I can check it”
- “Rescan the page, I just added a new button”
What it gives back to you
You get a list of elements with their names, CSS selectors, positions, and sizes, shown as text in your chat. When you ask for a highlight, the element flashes on your screen in the browser. When you ask for a rescan, you get an updated list. Everything stays in the chat as plain readable text.
Before you start
What you need
- Node.js installed on your computer (the helper runs on it)
- A web page or app running locally that you want to annotate
- An AI assistant that supports MCP servers, like Claude Code or the Claude desktop app
Good to know
Inspect mode pauses normal clicks on the page, so turn it off before you try to use buttons or links.
Install it with your AI
Add UI Annotator MCP server to your AI, no technical skills needed
You don't install anything by hand. You copy one prompt, paste it into an AI that can work on your computer, and it checks, installs and connects the server for you, asking you when it needs something.
Sign in to get the install prompt
Members get a ready-made prompt that lets the Claude desktop app check UI Annotator MCP server, install it and connect it for them, step by step. You don't need any technical skills: you copy, paste and answer a few questions. Your connected AI can also find and install any of the 4,066 MCP servers here for you.
Who it's for
Designers, product managers, QA testers, and junior developers who want to talk to an AI about a web page without learning CSS selectors or the browser DevTools.
