5K ·GitHub
What is this?
Agentation is a visual feedback tool for AI coding agents: you click elements on your web page, add notes, and copy structured output that helps the agent find the exact code you are referring to.
Agentation is a visual feedback tool for AI coding agents: you click elements on your web page, add notes, and copy structured output that helps the agent find the exact code you are referring to.Is it a browser extension I install, or a library I add to my app?A library: an npm package you add to your React app, whose toolbar renders inside your own page in the bottom-right corner. There is no standalone app or extension to install, and it ships with zero runtime libraries beyond the React peer dependencies.
A library: an npm package you add to your React app, whose toolbar renders inside your own page in the bottom-right corner. There is no standalone app or extension to install, and it ships with zero runtime libraries beyond the React peer dependencies.How do I use it once it's in my app?Click the toolbar in the bottom-right corner to activate it, then click any element to annotate it — selectors are identified automatically. Copy the generated markdown and paste it into your agent.
Click the toolbar in the bottom-right corner to activate it, then click any element to annotate it — selectors are identified automatically. Copy the generated markdown and paste it into your agent.What does my project need for it to work?React 18+ in your project and a desktop browser to run it in — nothing else beyond that.
React 18+ in your project and a desktop browser to run it in — nothing else beyond that.Can I use it on my phone or tablet?No — it requires a desktop browser; mobile is not supported, so annotation happens where you develop.
No — it requires a desktop browser; mobile is not supported, so annotation happens where you develop.Who is this actually for — developers or designers?Primarily developers working with AI coding agents on web UIs: anyone who ends up describing 'the blue button in the sidebar' in prose instead of pointing the agent at the exact element.
Primarily developers working with AI coding agents on web UIs: anyone who ends up describing 'the blue button in the sidebar' in prose instead of pointing the agent at the exact element.Is it open source under a permissive license?No — it is licensed under PolyForm Shield 1.0.0 rather than MIT or Apache, so read the terms before reusing the code in your own product.
No — it is licensed under PolyForm Shield 1.0.0 rather than MIT or Apache, so read the terms before reusing the code in your own product.Which AI agents can I send the feedback to?Any of them. The copied markdown is plain structured text, so it works with Claude Code, Codex, Gemini, Grok, or any AI tool you paste it into. For automatic delivery instead of copy-paste, register the agentation-mcp server with your MCP client and connect the toolbar to its HTTP endpoint.
Any of them. The copied markdown is plain structured text, so it works with Claude Code, Codex, Gemini, Grok, or any AI tool you paste it into. For automatic delivery instead of copy-paste, register the agentation-mcp server with your MCP client and connect the toolbar to its HTTP endpoint.How does the agent find the exact code from my annotation?The copied markdown includes CSS selectors, class names, element positions, and context, so the agent can grep your codebase for the precise element instead of guessing from a description. An editor integration can also open the detected source locations for you.
The copied markdown includes CSS selectors, class names, element positions, and context, so the agent can grep your codebase for the precise element instead of guessing from a description. An editor integration can also open the detected source locations for you.What can I annotate besides clicking a single element?Quite a lot: select text, hold Cmd/Ctrl to pick elements one by one, drag to multi-select, or drag out an area over empty space. You can also pause CSS animations, Web Animations, and videos to freeze a specific state before annotating.
Quite a lot: select text, hold Cmd/Ctrl to pick elements one by one, drag to multi-select, or drag out an area over empty space. You can also pause CSS animations, Web Animations, and videos to freeze a specific state before annotating.Does it work inside shadow DOM or iframes?Yes — elements inside open shadow roots and same-origin iframes can be selected. You can also opt in to hash routes so each route gets its own annotations and sessions, and there is a dark/light mode toggle in settings.
Yes — elements inside open shadow roots and same-origin iframes can be selected. You can also opt in to hash routes so each route gets its own annotations and sessions, and there is a dark/light mode toggle in settings.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