Ui MCP Server

Annotates any web page with hover labels for AI assistants — zero extensions, any browser

Local serverstdio

What is the Ui MCP server?

Annotates any web page with hover labels for AI assistants — zero extensions, any browser. Exposed over MCP by the ui mcp server, that capability becomes something an assistant can invoke while it works, not something you go and do afterwards.

What it actually does

The only tool that puts visible labels on every web element. Hover any element, see its name. Tell your AI assistant "make the sidebar wider" — it knows exactly which element you mean. No screenshots, no CSS selectors, no miscommunication.

Its toolset

Everything the assistant can do here goes through one of these:

  • Communication — "The div.flex.gap-4 inside the second child of..."
  • Language — CSS/HTML technical terms
  • Setup — Teach people to open DevTools + navigate the DOM
  • OmniParser — Screenshot + CV detection
  • Agentation — npm embedded in your app
  • Manual — The Manual tool exposed by this server

Adding it to your client

Installation goes through your MCP client rather than a global install: point it at @mcpware/ui-annotator on npm and it is fetched when the client starts. The copy-paste blocks for Claude Desktop, Claude Code and Cursor are further down this page.

When to reach for it

Among the browser automation options, the useful question is rarely "what can it do" but "what does it cost you to run" — permissions, credentials, and how much of your context its toolset consumes. Ui's toolset — Communication, Language, Setup and 3 more — is a fair guide to whether it matches your workflow. It is maintained by mcpware; worth a glance at recent repository activity before you build anything load-bearing on it.

This entry was verified against Ui's own documentation before publication; SyncDev keeps the directory reviewed rather than auto-generated.

Caveats

  • It runs with your machine's permissions. That is convenient and also the reason to think about what you point it at before you approve a tool call.
  • MCP clients confirm each tool call by default. Leave that on until you have watched what the ui mcp server does with a few real requests.

Available tools

ToolWhat it does
Communication"The div.flex.gap-4 inside the second child of..."
LanguageCSS/HTML technical terms
SetupTeach people to open DevTools + navigate the DOM
OmniParserScreenshot + CV detection
Agentationnpm embedded in your app
ManualThe Manual tool exposed by this server.

How to install the Ui MCP server

{
  "mcpServers": {
    "ui-annotator": {
      "command": "npx",
      "args": ["-y", "@mcpware/ui-annotator"]
    }
  }
}

Add to claude_desktop_config.json, then restart Claude Desktop.

Example prompts to try

  • Use Ui to Communication.
  • Use Ui to Language.
  • Use Ui to Setup.

Frequently asked questions

It connects Ui to MCP-compatible AI assistants such as Claude and Cursor, exposing 6 tools (Communication, Language, Setup, and more) that the assistant can call on your behalf. Instead of copying data back and forth by hand, the assistant works with Ui directly.