agentation

Agentation is an agent-agnostic visual feedback tool designed to bridge the gap between visual user interface development and AI-assisted coding. It enables developers to perform on-page annotations by clicking elements, dragging to select areas, or highlighting text directly in their browser. By capturing precise CSS selectors, class names, and element positions, Agentation allows AI agents like Claude Code, Cursor, or Windsurf to understand exactly which part of the DOM a developer is referring to, replacing vague natural language descriptions with machine-readable context.

• Visual Annotation: Click-to-annotate functionality with automatic identification of CSS selectors and element hierarchies.

• Multi-Modal Selection: Supports text selection, multi-element selection, and area-based annotations, including support for pausing animations to capture specific stateful UI.

• Real-Time Sync: Integrates via an MCP (Model Context Protocol) server, allowing instant transmission of annotations from the browser to AI coding assistants.

• Universal Agent Support: Compatible with a wide range of AI agents including Claude Code, Cursor, Codex, and others via the add-mcp integration utility.

• Structured Data Output: Generates markdown-based context containing selectors, coordinates, and notes, ensuring AI agents can grep or locate the specific code blocks associated with the UI feedback.

• Developer-Centric: Optimized for React 18+ and Next.js, with built-in NODE_ENV checks to ensure the toolbar only activates during local development.

• To install, use npm install agentation -D and inject the <Agentation /> component into your Next.js root layout or _app file within a development environment guard.

• For full functionality, the Agentation MCP server should be initialized using npx add-mcp, which configures the HTTP server (default port 4747) to relay annotations.

• The tool exposes a robust suite of MCP tools, including agentation_get_all_pending, agentation_resolve, and agentation_watch_annotations, allowing for automated state management in complex web projects.

• Requires a desktop browser environment; mobile devices are not supported for the annotation toolbar.

• The system provides high-fidelity feedback loops, effectively turning visual UI bugs and improvement requests into actionable code-level tasks for your preferred LLM-powered coding agent.