ui-annotator-mcp — MCP-сервер для Claude Code: что делает
Сервер запускает прокси для разметки веб-страниц плавающими бейджами. Он связывает видимые в браузере блоки с именами компонентов для ассистента.
claude mcp add ui-annotator-mcp -- npx -y @mcpware/ui-annotatorЧто делает ui-annotator-mcp
Сервер поднимает локальный обратный прокси на порту 7077 и встраивает скрипт разметки в открытую веб-страницу. При наведении курсора на любой блок всплывает оверлей с понятным названием элемента, его CSS-селектором и размерами в пикселях. Это убирает путаницу, когда человеку и ИИ нужно сослаться на одну и ту же часть интерфейса.
Для работы не нужны плагины браузера или правки в коде проекта. Инструмент поддерживает режим инспекции, при включении которого клик по объекту копирует его имя в буфер обмена и блокирует стандартные переходы по ссылкам. Через встроенные инструменты MCP вроде annotate, get_elements и highlight_element агент запрашивает координаты узлов DOM и подсвечивает их прямо в окне браузера.
Прокси рассчитан на передачу страницы через порт, например http://localhost:7077/localhost:3847. Если локальный сервер приложения не запущен на целевом порту, прокси не сможет загрузить исходный DOM и передать разметку ассистенту.
Какие задачи решает
- Находить точные названия компонентов при наведении курсора в браузере
- Передавать ассистенту координаты и селекторы элементов через вызовы MCP
- Копировать имена блоков интерфейса в буфер обмена в режиме инспекции
- Подсвечивать нужные части вёрстки по запросу модели
Примеры запросов агенту
- Открой через прокси страницу localhost:3847 и покажи список найденных элементов
- Включи режим инспекции на странице и подсвети кнопку SearchButton
- Сделай компонент sidebar шире на 40 пикселей после повторного сканирования DOM
Как установить ui-annotator-mcp
Командой платформы
claude mcp add ui-annotator-mcp -- npx -y @mcpware/ui-annotatorКомандой платформы
codex mcp add ui-annotator-mcp -- npx -y @mcpware/ui-annotatorФайл настроек
{
"mcpServers": {
"ui-annotator-mcp": {
"command": "npx",
"args": [
"-y",
"@mcpware/ui-annotator"
]
}
}
}Файл настроек
{
"servers": {
"ui-annotator-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@mcpware/ui-annotator"
]
}
}
}Командой платформы
gemini mcp add ui-annotator-mcp npx -y @mcpware/ui-annotatorПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о ui-annotator-mcp
Как установить ui-annotator-mcp в Claude Code?
Выполните команду claude mcp add ui-annotator-mcp -- npx -y @mcpware/ui-annotator.
Зачем нужен ui-annotator-mcp?
Он связывает визуальные блоки в браузере с именами для нейросети, чтобы вы могли называть конкретные компоненты без ручного поиска селекторов в консоли разработчика.
Требуются ли расширения для браузера или изменение кода?
Нет, сервер работает через встроенный обратный прокси на порту 7077 и внедряет скрипт разметки на лету в любых современных браузерах.
