Multiple annotation modes
Annotate text, single elements, multiple elements, page areas, and animation states from the toolbar so feedback is tied to specific UI targets instead of a vague description.
Agentation
Agentation is a visual feedback tool for AI coding agents. It lets you annotate React apps, copy structured markdown, and sync feedback through MCP for more direct collaboration.
Overview
Agentation is a visual feedback tool for agents. It adds an in-browser annotation layer to React applications so you can point to elements, select text, add notes, and send structured feedback that an AI coding agent can use directly.
The product is built for workflows where the agent has codebase access. Its output can include selectors, file paths, component trees, computed styles, and the feedback itself, which helps the agent locate the right element, understand the UI, and respond with clarifying questions or fixes. Agentation can work as a simple copy-paste tool, or connect through MCP for live annotation sync and two-way communication.
Core capabilities
Agent-ready output
Copy structured markdown that can include selectors, class names, source paths, component trees, computed styles, and the written comment, giving agents more precise context to act on.
MCP-based sync
Connect a React app to a local MCP server so annotations sync in real time, persist across refreshes, and can be resolved or dismissed by the agent.
Four output detail levels
Use the output format that matches the task, from compact feedback to forensic detail with computed styles and nearby text.
Component and source detection
Inspect the React hierarchy and source location of annotated elements in development, with framework-aware detection for supported build tools.
Workflow controls
Configure marker color, output detail, and clipboard or send behavior, and move the toolbar so it fits your workflow.
Common use cases
Codebase-aware UI feedback
Mark up buttons, inputs, cards, and layout sections in a React app, then hand the agent a selector and file path instead of describing the UI in words.
Copy and content review
Select exact text in the browser to flag typos, content fixes, or copy changes, with the quoted text included in the output.
Animation and state review
Freeze animations while inspecting a specific frame so you can comment on motion, visibility, or state without the UI moving underneath you.
Two-way agent collaboration
Use MCP to keep annotations synced with a connected agent, letting it resolve, dismiss, or ask questions about feedback as you work.
Custom workflow integration
Set up a local integration for teams that want to collect annotation changes through webhooks or build a custom integration on top of the API.
Pros and Cons
Pros
- Supports several annotation modes, including text, single elements, multi-select, area, and animation states.
- Produces structured output that helps agents identify exact selectors, file paths, and React components.
- Works with both a basic copy-paste flow and real-time MCP sync.
- Lets agents respond to annotations, not just receive them.
- Designed to stay local by default unless you connect a local server or copy the output yourself.
Cons
- Desktop only, and the docs say it is not optimized for mobile devices.
- Client-side only in the default setup, so cross-page persistence depends on the MCP server.
- The output is text-only rather than screenshots, which may be less useful for some visual review workflows.
FAQ
How do you set up Agentation?
Agentation is installed as a React component in your app, and it is designed to run in development. The setup flow supports a basic copy-paste workflow, a Claude Code skill, or a manual MCP server connection for real-time sync.
Which agents does Agentation work with?
The source shows that Agentation works with AI coding tools that can access your codebase, including Claude Code, Cursor, Codex, and Windsurf. It can also connect through MCP for other compatible agents.
What does Agentation output?
When you copy annotations, Agentation produces structured markdown that can include CSS selectors, source file paths, React component trees, computed styles, and your feedback. The available output formats are Compact, Standard, Detailed, and Forensic.
What are the main limitations?
Agentation is desktop only, requires React 18+, and is client-side by default. The documentation also notes that markers use localStorage for per-page persistence, while MCP is used for cross-page session continuity.
Is Agentation free to use?
Yes. The source says Agentation is free for individuals and companies for internal use, and that commercial licensing is required if you redistribute it as part of a product you sell.
Quick Facts
- Category
- Developer Tool
- Primary use
- Visual feedback for AI coding agents
- Platform
- Desktop browser; React 18+ apps
- Source domain
- agentation.com
- Integrations
- MCP, API, Webhooks
- License note
- Free for internal use; commercial license required for redistribution
Альтернативы Agentation
ByteAsk
ByteAsk is a terminal-first AI coding agent for C and C++ that edits repositories and verifies changes with the real compiler, debugger, sanitizers, and tests before showing a diff. It offers a free tier plus paid plans, with editor connectors and zero-retention handling described in the source.
Lasso
Lasso is an ecommerce product data platform for enriching catalog records, processing supplier files, generating product content, and monitoring competitors. It combines a web app with a REST API, SDK, and MCP server for teams and developers.
CreateOS Sandbox
CreateOS Sandbox is an isolated compute environment for running code and agent workloads inside Firecracker micro-VMs. It is designed for workflows that need machine-level isolation, private networking between sandboxes, and programmatic control through SDK, CLI, or MCP.
hob
hob is an independent workspace for coding agents that keeps agent sessions, terminals, history, and follow-up work organized around the tools and providers you already use. It is aimed at developers who want local control over routing, history, and workspace structure rather than a bundled model stack.
Ably Chat
Ably Chat is a chat API platform for building custom realtime chat applications. It supports room-based messaging, typing indicators, presence, reactions, and message updates, with usage-based pricing options for different deployment stages.
Botacts
Botacts is a web directory for finding AI bots and agents you can contact by phone, email, SMS, WhatsApp, Telegram, or Signal. It also lets creators suggest bots for manual review before publication.