# Agentation

> Agentation turns UI annotations into structured context that AI coding agents can understand and act on, letting you click any element, add a note, and paste the output into Claude Code, Cursor, or any AI tool.

Agentation is a desktop tool that bridges the gap between UI feedback and AI-powered code fixes. It lets you click any element on your running app, annotate it with feedback, and instantly generate structured markdown output that AI coding agents like Claude Code or Cursor can parse and act on. With MCP integration, agents can read your annotations in real time — no copy-paste required. The tool also supports webhooks and a REST API for custom integrations.

- **UI Annotation** — *Activate the toolbar, hover over any element, click to annotate, and write your feedback. The tool captures CSS selectors, React component names, computed styles, and your note.*
- **Structured Output** — *Copies formatted markdown with element paths, selectors, and feedback so AI agents can grep your codebase directly instead of guessing.*
- **MCP Integration** — *Connect agents via the Model Context Protocol so they receive live annotation updates and can respond, ask for clarification, or mark issues as resolved.*
- **Webhooks** — *Push annotation data to external services automatically as annotations are created or updated.*
- **REST API** — *Build custom integrations on top of Agentation's annotation data using the provided API.*
- **Animation Pause** — *Freeze animations at a specific frame to annotate a precise visual state.*
- **React Component Detection** — *Automatically identifies React component names alongside CSS selectors to help agents find the right file.*
- **Real-time Agent Sync** — *Introduced in v2.0, agents can list, respond to, and clear annotations interactively as a two-way conversation.*
- **Annotation Schema** — *A versioned schema (v1.0) defines the annotation format so any compatible tool can consume the output.*
- **Free for Internal Use** — *No cost for individuals and teams annotating their own projects; commercial redistribution requires a license.*

## Features
- UI element annotation via click
- CSS selector capture
- React component name detection
- Computed style extraction
- Structured markdown output
- MCP integration for real-time agent sync
- Webhooks for external service push
- REST API for custom integrations
- Animation pause for frame-specific annotation
- Text selection annotation for content issues
- Two-way agent conversation via MCP
- Versioned annotation schema

## Integrations
Claude Code, Cursor, MCP (Model Context Protocol), Webhooks, npm

## Platforms
MACOS, WEB, API

## Pricing
Open Source

## Version
2.2.1

## Links
- Website: https://agentation.dev
- Documentation: https://agentation.dev/schema
- Repository: https://github.com/benjitaylor/agentation
- EveryDev.ai: https://www.everydev.ai/tools/agentation