# Agentation

> Connects AI coding agents to browser annotations for automated UI reviews

Agentation is a visual feedback system and MCP server that bridges browser toolbars directly to AI coding agents like Claude Code. Its Critique Mode autonomously inspects web pages and leaves targeted UI/UX annotations, while Self-Driving Mode edits the underlying code to resolve those issues automatically.

Website: https://agentation.com/mcp

## What it is for

- Run automated visual design audits on local web apps using browser agents
- Let coding agents inspect UI elements, modify source code, and verify fixes autonomously
- Streamline design review workflows by piping web annotations directly into MCP-compatible agents
- Collect and resolve layout feedback across multi-page active browser sessions

## Features

- Critique Mode: Agent navigates a headed browser to auto-annotate hierarchy, typography, and spacing issues
- Self-Driving Mode: Automatically fixes annotated design issues in code and verifies results
- Hands-Free Mode: Continuously polls and resolves incoming annotations via a watcher loop
- Native MCP Server: Exposes 9 standard tools to control annotation sessions, statuses, and replies
- Cross-origin development support with configurable CORS policies and event history
- React component toolbar integration via standard HTTP endpoints

## Pricing

Open source. Free and open source on npm and GitHub

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [Developer Tools](https://xiry.app/topics/development/developer-tools.md)
- Open source: yes
- Platforms: Web, Command line, Code library
- For: Frontend developers and software teams using AI coding agents like Claude Code
- Alternative to: Marker.io, Jam.dev, Pastel
- Tags: mcp, ai agents, frontend, ui critique, code automation, claude code, devtools

## Why it was saved

- [@benjitaylor, 15 February 2026](https://x.com/benjitaylor/status/2023142545241575730): Automated design/quality review: one mode annotates suggestions, the other makes real changes to the project.

## Related

- [react-best-practices](https://xiry.app/resources/react-best-practices): Curated React performance rules and coding-agent skills by Vercel (GitHub repo, Open source)
- [claude-office-skills](https://xiry.app/resources/claude-office-skills): Office document creation and editing skills for Claude Code CLI. (GitHub repo, Open source)
- [Domain SDK](https://xiry.app/resources/domain-sdk): TypeScript SDK for adding and managing custom customer domains across platforms (GitHub repo, Open source)
- [ECC](https://xiry.app/resources/ecc): Agent harness optimization system with skills, hooks, and configs for coding agents (GitHub repo, Open source)
- [Eight Dev Tools, Zero Fluff — Part 6](https://xiry.app/resources/eight-dev-tools-zero-fluff-part-6): Curated list of eight front-end design and developer utility tools (List)
- [Framecap](https://xiry.app/resources/framecap): Command-line screen, camera, and audio recorder for macOS (Web app)

Updated 10 October 2026. Page: https://xiry.app/resources/agentation

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.