benjitaylor/agentation

What it solves

Agentation solves the difficulty of describing specific UI elements to AI coding agents. Instead of using vague descriptions like "the blue button in the sidebar," it allows users to visually annotate elements on a page and provide the agent with precise technical identifiers (like CSS selectors) so the agent can find the exact code responsible for that element.

How it works

It is a React component that adds a visual feedback toolbar to your application. When a user clicks or selects an area of the page, the tool captures the element's class names, selectors, and positions. This data is then converted into structured markdown output that can be copied and pasted into an AI tool, or synced directly to an agent via an MCP (Model Context Protocol) server.

Who it’s for

Developers using AI coding agents (such as Claude Code, Codex, Gemini, or Grok) who want to provide precise visual feedback and context to their AI assistants during the development process.

Highlights

• Precise Selection: Supports clicking individual elements, selecting text, multi-selecting, and dragging to define specific areas.
• Agent Integration: Works with any AI tool via copy-paste or directly via an MCP server for real-time sync.
• State Capture: Can pause CSS animations, Web Animations, and videos to capture specific visual states.
• Deep Access: Able to select elements within shadow roots and same-origin iframes.
• Lightweight: Zero runtime dependencies beyond React 18+.