A new developer tool called Agentation tackles one of the most common frustrations in AI-assisted coding: telling an agent which element you mean. Released Saturday by BrightCoding, the React component lets developers click any DOM element, select text, or draw bounding boxes, then generates structured markdown that AI coding agents can parse without guessing.
The tool was created by Benji Taylor and released under the PolyForm Shield 1.0.0 license, according to BrightCoding’s announcement.
How It Works
Agentation runs as an overlay widget in a React application. When activated, clicking any DOM element triggers intelligent DOM traversal that generates robust CSS selectors (like .sidebar > button.primary[data-testid="submit"]) rather than fragile XPath expressions. Developers can also select text fragments using the browser’s Range API to capture exact character offsets within nodes, or drag to select multiple elements simultaneously.
Each annotation produces structured markdown output containing CSS selectors, XPath, component paths, viewport coordinates, element dimensions, screenshots of surrounding elements, and user-written notes, as detailed in the announcement.
The output format is designed so coding agents can grep through a codebase and locate the exact component definition from the selector data alone.
Technical Approach
Agentation ships as a 15KB package with zero dependencies, built exclusively for React 18+ and desktop browsers. The animation system uses pure CSS rather than runtime libraries.
One notable feature is an animation pause system that freezes CSS transitions, JavaScript-driven animations, and playing videos to capture specific UI states. The implementation manipulates requestAnimationFrame loops and injects temporary CSS to halt transitions without permanently altering styles, according to BrightCoding. Shadow DOM piercing makes the tool framework-agnostic within the React ecosystem.
Solving the “Blue Button in the Top Right Corner” Problem
The use cases are practical: component designers auditing rendering consistency, teams enforcing design tokens, and developers providing code review feedback. In each case, the core problem is the same. Typing “the blue button in the top right corner” frequently leads AI coding agents to modify the wrong element.
For teams running AI agents on codebases with complex component hierarchies, the difference between a vague description and a structured selector with exact coordinates is the difference between a useful agent and a frustrating one. Agentation addresses agent precision at the input stage: the instructions agents receive become exact enough to be useful, regardless of what those agents are otherwise capable of.