5K ·GitHub
Что это такое?
Agentation — это инструмент визуальной обратной связи для ИИ-агентов, которые пишут код: вы кликаете по элементам на своей веб-странице, добавляете заметки и копируете структурированный текст, который помогает агенту найти именно тот код, на который вы указываете.
Agentation — это инструмент визуальной обратной связи для ИИ-агентов, которые пишут код: вы кликаете по элементам на своей веб-странице, добавляете заметки и копируете структурированный текст, который помогает агенту найти именно тот код, на который вы указываете.Это расширение для браузера, которое я устанавливаю, или библиотека, которую я добавляю в своё приложение?Библиотека: npm-пакет, который вы добавляете в своё React-приложение; его тулбар отображается внутри вашей страницы в правом нижнем углу. Отдельного приложения или расширения устанавливать не нужно, а кроме peer-зависимости на React в рантайме он не тянет никаких других библиотек.
Библиотека: npm-пакет, который вы добавляете в своё React-приложение; его тулбар отображается внутри вашей страницы в правом нижнем углу. Отдельного приложения или расширения устанавливать не нужно, а кроме peer-зависимости на React в рантайме он не тянет никаких других библиотек.Как этим пользоваться, когда пакет уже добавлен в приложение?Кликните по тулбару в правом нижнем углу, чтобы его активировать, затем кликайте по любому элементу, чтобы оставить пометку — селекторы определяются автоматически. Скопируйте сгенерированный markdown и вставьте его в своего агента.
Кликните по тулбару в правом нижнем углу, чтобы его активировать, затем кликайте по любому элементу, чтобы оставить пометку — селекторы определяются автоматически. Скопируйте сгенерированный markdown и вставьте его в своего агента.Что нужно проекту, чтобы всё работало?React 18+ в проекте и настольный браузер, в котором вы будете этим пользоваться, — больше ничего.
React 18+ в проекте и настольный браузер, в котором вы будете этим пользоваться, — больше ничего.Можно пользоваться с телефона или планшета?Нет — нужен настольный браузер; мобильные устройства не поддерживаются, поэтому размечать страницы придётся там, где вы ведёте разработку.
Нет — нужен настольный браузер; мобильные устройства не поддерживаются, поэтому размечать страницы придётся там, где вы ведёте разработку.Для кого это вообще — для разработчиков или дизайнеров?В первую очередь для разработчиков, которые работают с ИИ-агентами над веб-интерфейсами: всех, кто вместо того, чтобы показать агенту конкретный элемент, описывает его словами вроде «синяя кнопка в сайдбаре».
В первую очередь для разработчиков, которые работают с ИИ-агентами над веб-интерфейсами: всех, кто вместо того, чтобы показать агенту конкретный элемент, описывает его словами вроде «синяя кнопка в сайдбаре».Это open source под разрешительной лицензией?Нет — проект распространяется под лицензией PolyForm Shield 1.0.0, а не MIT или Apache, так что перед тем как переиспользовать код в своём продукте, ознакомьтесь с условиями.
Нет — проект распространяется под лицензией PolyForm Shield 1.0.0, а не MIT или Apache, так что перед тем как переиспользовать код в своём продукте, ознакомьтесь с условиями.Каким ИИ-агентам можно передать этот фидбек?Любому. Скопированный markdown — это обычный структурированный текст, поэтому он работает с Claude Code, Codex, Gemini, Grok или любым другим ИИ-инструментом, куда вы его вставите. Чтобы передавать результат автоматически, без копипаста, зарегистрируйте сервер agentation-mcp в своём MCP-клиенте и подключите тулбар к его HTTP-эндпоинту.
Любому. Скопированный markdown — это обычный структурированный текст, поэтому он работает с Claude Code, Codex, Gemini, Grok или любым другим ИИ-инструментом, куда вы его вставите. Чтобы передавать результат автоматически, без копипаста, зарегистрируйте сервер agentation-mcp в своём MCP-клиенте и подключите тулбар к его HTTP-эндпоинту.Как агент находит точный код по моей пометке?В скопированном markdown есть CSS-селекторы, имена классов, положение элементов и контекст, поэтому агент может найти нужный элемент в кодовой базе через grep, а не угадывать по словесному описанию. Есть и интеграция с редактором, которая может сразу открыть найденные места в исходниках.
В скопированном markdown есть CSS-селекторы, имена классов, положение элементов и контекст, поэтому агент может найти нужный элемент в кодовой базе через grep, а не угадывать по словесному описанию. Есть и интеграция с редактором, которая может сразу открыть найденные места в исходниках.Что ещё можно размечать, кроме клика по одному элементу?Довольно многое: выделять текст, зажать Cmd/Ctrl и выбирать элементы по одному, выделить сразу несколько перетаскиванием или растянуть область на пустом месте. Также можно поставить на паузу CSS-анимации, Web Animations и видео, чтобы зафиксировать нужное состояние перед разметкой.
Довольно многое: выделять текст, зажать Cmd/Ctrl и выбирать элементы по одному, выделить сразу несколько перетаскиванием или растянуть область на пустом месте. Также можно поставить на паузу CSS-анимации, Web Animations и видео, чтобы зафиксировать нужное состояние перед разметкой.Работает ли это внутри shadow DOM и iframe?Да — можно выбирать элементы внутри открытых shadow root и iframe с того же домена. В настройках можно включить поддержку hash-маршрутов, чтобы у каждого маршрута были свои пометки и сессии, а также переключить тёмную или светлую тему.
Да — можно выбирать элементы внутри открытых shadow root и iframe с того же домена. В настройках можно включить поддержку hash-маршрутов, чтобы у каждого маршрута были свои пометки и сессии, а также переключить тёмную или светлую тему.What are similar projects?Libraries.dev, boardui, shaders, styled-components, chakra-ui, primitives, Monocharts, openpencil
Libraries.dev, boardui, shaders, styled-components, chakra-ui, primitives, Monocharts, openpencilWhich topics is it in?annotation, tools, design, ui-components, mcp-server, coding-agent, ui, web-development, codex, react, claude-code, mcp
annotation, tools, design, ui-components, mcp-server, coding-agent, ui, web-development, codex, react, claude-code, mcp