Для чего этот сервер?

Этот сервер решает проблему непонимания между человеком и AI при работе с интерфейсами. Он показывает живые метки на каждом элементе страницы: при наведении мыши видно имя компонента. AI теперь ссылается на «sidebar» или «SearchButton», а человек подтверждает. Никаких скриншотов и css-селекторов. Просто прокси, без расширений и изменения кода.

Что он умеет?

Открывает веб-страницы через прокси и навешивает на все элементы живые подписи: видно имя, CSS-селектор, текст и размеры. По команде возвращает список этих элементов с позициями, подсвечивает конкретный элемент, чтобы пользователь подтвердил выбор, и умеет пересканировать страницу после изменений в DOM. Удалённо включает режим инспектирования, когда клик по элементу копирует его имя в буфер обмена.

Каталог MCP
mcpware/ui-annotator-mcp

mcpware/ui-annotator-mcp

от mcpware

MCP сервер, который через обратный прокси добавляет на любую веб-страницу визуальные подписи ко всем элементам. Наведите курсор – увидите имя, селектор и размеры. Теперь вы и AI говорите на одном я...

Github NPM Сайт сервера

README

5 инструментов

Версии

Установить сервер

UI Annotator MCP

license

English | 廣東話

Bridge the gap between what you see and what AI can reference — in any browser, zero extensions.

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.

Demo

Why It Matters

Dramatically improves AI-driven UI design and iteration. The pain: telling AI "move that button next to the search bar" never works because the AI can't see your page. UI Annotator fixes this — hover over any element and its component name appears as a label. Now you say "move SearchButton below NavBar" and Claude edits the right component instantly. No browser extensions, works with any framework. The workflow becomes: open page → hover to identify elements → describe changes using real component names → Claude edits → refresh and repeat. Turns a frustrating back-and-forth into a fluid design loop.

Часто задаваемые вопросы

Инструменты были проиндексированы: 15.10.2026

annotate

Открывает веб-страницу с аннотациями при наведении. Возвращает прокси-URL, который добавляет интерактивные метки элементов на любую страницу. Пользователь открывает этот URL в любом браузере, чтобы увидеть аннотации при наведении.

Параметры

urlstringобязательный
Целевой URL для аннотирования, например "http://localhost:3847" или "localhost:3847"

get_elements

Получает все элементы интерфейса, обнаруженные на текущей аннотированной странице. Возвращает имена элементов, CSS-селекторы, позиции и размеры. Используйте это, чтобы понять, что имеет в виду пользователь, когда описывает элемент интерфейса.

Параметры

Без параметров.

highlight_element

Кратко подсвечивает конкретный элемент на странице, чтобы пользователь мог увидеть, о каком элементе идёт речь. Полезно для подтверждения: «Вы имеете в виду этот элемент?»

Параметры

namestringобязательный
Название элемента или CSS-селектор для подсветки

inspect_mode

Переключает режим инспекции на аннотированной странице. Когда ВКЛЮЧЕН, пользователь может щёлкнуть по любому элементу, чтобы скопировать его имя. Когда ВЫКЛЮЧЕН, страница ведёт себя нормально. Используйте это, чтобы помочь пользователю копировать имена элементов для передачи изменений в дизайне.

Параметры

enabledbooleanобязательный
true для включения режима инспекции, false для отключения

rescan_elements

Принуждает аннотированную страницу повторно просканировать все элементы пользовательского интерфейса. Используйте это после того, как содержимое страницы изменилось (например, после навигации, обновления DOM или взаимодействия с пользователем).

Параметры

Без параметров.

`0.1.6`основная	21.03.2026
`0.1.5`	21.03.2026
`0.1.4`	20.03.2026
`0.1.3`	20.03.2026
`0.1.2`	20.03.2026
`0.1.1`	20.03.2026
`0.1.0`	19.03.2026

Выберите клиент, чтобы установить mcpware/ui-annotator-mcp:

Любой клиент

Конфиг добавления MCP сервера стандартный, обычно он не меняется вообще, поэтому подходит практически к любому ИИ клиенту, поддерживающему MCP.

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

Cursor

Перейдите по ссылке и сервер автоматически будет добавлен в Cursor. Либо откройте/создайте файл ~/.cursor/mcp.json(%USERPROFILE%\.cursor\mcp.json на Windows) и добавьте конфиг сервера:

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

VS Code

Создайте .vscode/mcp.json в проекте (ключ верхнего уровня — servers):

{
  "servers": {
    "mcpware-ui-annotator-mcp-fwdqayoozw": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "@mcpware/ui-annotator"
      ]
    }
  }
}

Либо добавьте сервер через терминал:

code --add-mcp "{\"name\":\"mcpware-ui-annotator-mcp-fwdqayoozw\",\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"@mcpware/ui-annotator\"]}"

Claude Desktop

Откройте Settings → Developer → Edit Config — это откроет файл claude_desktop_config.json:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

Впишите сервер и полностью перезапустите Claude Desktop:

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

Claude Code

Добавьте сервер одной командой в терминале:

claude mcp add mcpware-ui-annotator-mcp-fwdqayoozw -- npx @mcpware/ui-annotator

Либо через JSON-конфиг:

claude mcp add-json mcpware-ui-annotator-mcp-fwdqayoozw "{\"command\":\"npx\",\"args\":[\"@mcpware/ui-annotator\"]}"

Codex

Добавьте сервер командой в терминале:

codex mcp add mcpware-ui-annotator-mcp-fwdqayoozw -- npx @mcpware/ui-annotator

Либо вручную в ~/.codex/config.toml(%USERPROFILE%\.codex\config.toml на Windows):

[mcp_servers.mcpware-ui-annotator-mcp-fwdqayoozw]
command = "npx"
args = ["@mcpware/ui-annotator"]

Perplexity

MCP доступен подписчикам Perplexity Pro / Max / Enterprise. Локальные серверы — только в приложении для macOS.

Откройте Настройки аккаунта → Connectors.
Установите вспомогательное приложение PerplexityXPC (один раз).
Нажмите Add Connector → вкладка Simple.
В поле Server Name укажите mcpware/ui-annotator-mcp, а в поле команды запуска — строку ниже:

npx @mcpware/ui-annotator

Нажмите Save и дождитесь статуса Running.

Windsurf

Откройте Windsurf Settings → Cascade → MCP Servers или отредактируйте файл ~/.codeium/windsurf/mcp_config.json:

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

Cline

В панели Cline нажмите иконку MCP Servers → Configure → Configure MCP Servers (или отредактируйте ~/.cline/mcp.json) и добавьте сервер:

{
  "mcpServers": {
    "mcpware-ui-annotator-mcp-fwdqayoozw": {
      "command": "npx",
      "args": [
        "@mcpware/ui-annotator"
      ],
      "disabled": false,
      "autoApprove": []
    }
  }
}

Continue

Создайте файл в .continue/mcpServers/ (например mcpware-ui-annotator-mcp-fwdqayoozw.yaml) или добавьте блок в config.yaml. MCP работает только в режиме agent:

mcpServers:
  - name: mcpware-ui-annotator-mcp-fwdqayoozw
    command: npx
    args:
      - "@mcpware/ui-annotator"

Zed

Выполните agent: add context server или откройте настройки (zed: open settings file) и добавьте сервер в объект context_servers:

{
  "context_servers": {
    "mcpware-ui-annotator-mcp-fwdqayoozw": {
      "command": "npx",
      "args": [
        "@mcpware/ui-annotator"
      ]
    }
  }
}

Конфиг для установки сервера

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

Нужен npx

Сервер запускается через npx
Без него ничего работать не будет.

Как установить npx

Информация о сервере

Номер в рейтинге: #195
Звезд на Github: 21
Форков на Github: 5
Загрузок: 3 253
Язык реализации: JavaScript
Лицензия: MIT
Официальный сервер: Нет
Дата обновления данных: 19.10 в 06:54
Идентификатор: oZ69bVTl05U1F0Uh
Категории: Автоматизация браузера, Инструменты для разработчиков

mcpware/ui-annotator-mcp

UI Annotator MCP

Why It Matters

Часто задаваемые вопросы

Похожие MCP-сервера

just-every/mcp-screenshot-website-fast

Browserbase MCP

kimtth/mcp-aoai-web-browsing

copperline-labs/rendex-mcp

apireno/DOMShell

feedthrough/feedthrough