agentation

Agentation is a visual feedback tool designed to bridge the gap between what you see in a running web page and what an AI coding agent needs to change in the source. Instead of describing a UI problem in prose, you point at it. How it works: you install the package as a dev dependency and render the `<Agentation />` component alongside your app. A toolbar appears in the bottom-right corner. Activate it, then click any element on the page to annotate it. The tool captures class names, CSS selectors, and element positions, then produces structured markdown output you can copy and hand to an agent. The README's example is that rather than saying "the blue button in the sidebar," you give the agent `.sidebar > button.primary` plus your note, which the agent can grep for directly. Notable capabilities listed in the README: - Click to annotate any element, with automatic selector identification - Text selection for annotating specific content - Multi-select by dragging across several elements - Area selection, so you can annotate a region even if it contains no elements - Animation pause, freezing CSS, JS, and video animations to capture a specific state - Structured markdown output including selectors, positions, and context - Dark and light mode, following system preference or set manually - Zero runtime dependencies, using pure CSS animations Requirements and scope: React 18 or newer, and a desktop browser (mobile is not supported). The project is agent-agnostic, meaning the copied output is not tied to a particular AI coding assistant. Licensing: the README states the project is copyright 2026 Benji Taylor and licensed under PolyForm Shield 1.0.0, a source-available license rather than a conventional open-source license, so review its terms before commercial use. Full documentation is hosted at agentation.com.