benjitaylor/agentation

Agentation is a developer tool for giving feedback on web pages to AI coding agents. It shows up as a small toolbar in the corner of your running app, and when you activate it, you can click on any element on the page to annotate it, select a block of text, drag to highlight multiple elements at once, or mark off any region of the screen even if it contains no interactive element. The key problem it addresses is that when you want an AI coding assistant to fix or change something on a page, describing it in plain language is often vague. You might say "the blue button in the top-right" and the agent has to guess which element you mean. Agentation instead captures the precise CSS class names, selectors, and positions of whatever you clicked, and copies a structured block of markdown you can paste directly into your chat with the agent. The agent can then search the codebase for those exact selectors and know immediately what code to look at. It also includes an animation pause feature, which freezes CSS animations, JavaScript-driven animations, and video playback so you can capture a specific moment on screen that would normally be in motion. Installation is one npm command, and you add a single React component alongside your app. The toolbar only appears during development and does not add any runtime library dependencies to production. It requires React 18 or newer and runs on desktop browsers only. The license is PolyForm Shield 1.0.0, which is a source-available license with restrictions on commercial use. Full documentation is available on the project's website.