Аннотация: Аннотация веб-страницы для помощников по программированию на основе ИИ
Annot, разработанный Денолеевым, является бесплатным инструментом сервера MCP, предназначенным для аннотирования пользовательского интерфейса и взаимодействия на платформе mcp. Он работает как обратный прокси, внедряя легкий скрипт аннотации на любую веб-страницу для добавления всплывающих меток. Построенный на Node.js с использованием JavaScript/TypeScript, Annot упрощает процесс передачи ссылок на элементы веб-интерфейса помощникам по программированию на основе ИИ. Он поддерживает HTTP-транспорт и совместим с клиентами ИИ, такими как Claude Code Cursor и VS Code Claude Desktop / JSON, что позволяет выполнять более точные задачи веб-разработки на основе ИИ без обширной настройки.
К чему подключается Annot?
Annot функционирует как обратный прокси, подключаясь к любой веб-странице и обслуживая её для внедрения своего скрипта аннотации. Он общается, используя стандартные HTTP-протоколы, обрабатывая как POST, так и GET-запросы. Этот дизайн позволяет ему работать без необходимости в расширениях браузера или изменениях оригинального кода веб-страницы. Совместимые AI-клиенты для установки и взаимодействия с Annot включают Claude Code Cursor и VS Code Claude Desktop / JSON, что облегчает его интеграцию в среды разработки с поддержкой AI.
Основные функции и инструменты
Annot предоставляет несколько вызываемых инструментов для взаимодействия с веб-интерфейсом. Пользователи могут использовать annotate для применения меток к веб-элементам и get_elements для получения информации о них. Инструмент highlight_element помогает визуально идентифицировать конкретные компоненты. Для динамического контента страницы rescan_elements обеспечивает точное обнаружение элементов. Кроме того, inspect_mode предлагает функцию «кликнуть, чтобы скопировать» для имен элементов, CSS-селекторов и размеров, повышая продуктивность разработчиков с AI-помощниками.
Для кого это?
Annot нацелен на всех, кто нуждается в четком общении ссылок на элементы веб-интерфейса с AI-кодовым помощником. Это включает разработчиков, дизайнеров или специалистов по контролю качества, работающих с AI для изменения или анализа макетов и функциональности веб-страниц. Это особенно полезно для тех, кто ищет точное взаимодействие AI с конкретными компонентами интерфейса. Пропустите это, если вам нужны продвинутые механизмы аутентификации корпоративного уровня, выходящие за рамки локального использования.
Как начать
Для его основного локального использования не требуются учетные данные. Он работает по протоколу HTTP, поддерживая связь через POST и GET-запросы.
Сценарии использования
- Позволяет AI-помощнику понимать и ссылаться на конкретные элементы веб-страницы по их именам, например, инструктируя его сделать боковую панель шире.
- Позволяет пользователям наводить курсор на любой веб-элемент, чтобы мгновенно увидеть его имя, CSS-селектор и размеры.
- Предоставляет функцию «кликнуть, чтобы скопировать» для имен элементов через режим инспекции.
Annot от Denolehov предлагает простое решение для аннотирования веб-страниц, делая элементы интерфейса понятными для AI кодирующих помощников. Его архитектура обратного прокси и минимальная настройка упрощают интеграцию для локальных задач разработки. Способность инструмента раскрывать детали элементов и обеспечивать точное взаимодействие с AI значительно помогает в рабочих процессах веб-разработки.
