Agentation is a visual feedback tool for AI coding agents that enables developers to annotate page elements and generate structured output with selectors and positions.
The tool solves the problem of imprecise communication between developers and AI agents about which code elements need modification. Instead of describing UI components verbally, developers click elements directly on their page to capture their exact selectors, positions, and context. The toolbar appears in the bottom-right corner and supports multiple annotation modes: clicking individual elements, selecting specific text, dragging to select multiple elements at once, or dragging to annotate empty regions. The tool can freeze animations to capture specific visual states. All annotations are copied as structured markdown output that includes selectors and positioning information, allowing AI agents to grep for the exact code being referenced.
Agentation suits developers working with AI coding agents who need to provide precise UI feedback during development or debugging sessions. It requires React 18 or later and runs only on desktop browsers. The tool's zero-dependency architecture relies on pure CSS animations, making it lightweight to integrate into existing projects. The structured output format is specifically designed to help agents locate code through selector matching rather than relying on natural language descriptions.
The project maintains active development with regular updates to its core functionality and documentation. The tool has a dedicated homepage with comprehensive documentation beyond the README. The codebase is written in TypeScript, indicating attention to type safety in the implementation.
