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

mcpware/ui-annotator-mcp

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

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.

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

annotate

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

Параметры

urlstringобязательный
The target URL to annotate, e.g. "http://localhost:3847" or "localhost:3847"

get_elements

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

Параметры

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

highlight_element

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

Параметры

namestringобязательный
The element name or CSS selector to highlight

inspect_mode

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

Параметры

enabledbooleanобязательный
true to enable inspect mode, false to disable

rescan_elements

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

Параметры

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

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

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

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

Нужен npx

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

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

FAQ

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

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

Что он умеет?

Сервер открывает страницы в любом браузере через прокси-URL с навесными подписями элементов, получает полный список элементов с именами, CSS-селекторами, координатами и размерами, также подсвечивает конкретный элемент, включает и отключает режим клика для копирования имени, принудительно пересканирует DOM после изменений страницы.

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

Номер в рейтинге: #197
Звезд на Github: 16
Форков на Github: 4
Загрузок: 2 164
Язык реализации: JavaScript
Лицензия: MIT
Официальный сервер: Нет
Дата обновления данных: 09.09 в 04:10
Идентификатор: oZ69bVTl05U1F0Uh
Категории: Автоматизация браузера, Агенты для программирования, ИИ и машинное обучение, Инструменты дизайна, Инструменты для разработчиков

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

just-every/mcp-screenshot-website-fast

Быстрый MCP-сервер для скриншотов веб-страниц, оптимизированный под Claude Vision. Автоматически разбивает полные страницы на тайлы 1072x1072. Поддерживает скринкасты, захват CSS-селекторов и настр...

webscraping-ai/webscraping-ai-mcp-server

официальный

MCP сервер для веб-скрапинга через WebScraping.AI — извлекает текст, HTML и структурированные данные, задаёт вопросы по содержимому страниц. Поддерживает JavaScript-рендеринг, CSS-селекторы, выбор прокси и эмуляцию устройств. Идеален для интеграции с LLM при сборе информации с сайтов.

pzfreo/build123d-mcp

MCP сервер для 3D CAD на build123d, позволяющий AI-агентам создавать, инспектировать и итерировать геометрию. Закрывает цикл обратной связи: AI видит результат, а не пишет вслепую. Полезен инженера...

corralimited/snapdiff-mcp

MCP сервер для визуального сравнения веб-страниц через SnapDiff API. Позволяет разработчикам и QA автоматически снимать скриншоты, сравнивать UI на изменения и рендерить HTML/CSS в картинки. Подход...

21st-dev/Magic-MCP

MCP сервер 21st.dev Magic AI Agent помогает разработчикам создавать UI-компоненты через описание на естественном языке. Интегрируется с Cursor, Windsurf и VS Code, генерируя готовые компоненты.

themesberg/flowbite-mcp

MCP сервер для работы с компонентами Flowbite на Tailwind CSS. Даёт доступ к 60+ UI-элементам, умеет генерировать тему по hex-цвету и превращать Figma-макет в код. Помогает разработчикам быстрее создавать интерфейсы.