Agentation.dev is a neat annotation tool/library for your live web apps that takes your comments and generates structured feedback for AI coding agents. It speeds up the iteration of front-end UI and saves a ton of back-and-forth with AI.
It's a simple React library you add to your code base. It adds a toolbar to your application (similar to the one you have in Vercel preview builds), making it easy to integrate into any React app.
Agentation.dev features
Visual annotation for agents
This is the core feature of the tool. You can click anywhere on the screen to annotate. It can be a single element, or you can drag to multi-select a few elements on the screen.
Structured output
The core magic of Agentation is its output. Instead of generating code, it generates a markdown snippet containing the exact CSS selectors, class names, and position of the element you clicked, along with your feedback.
This structured output is what allows agents like Claude Code or Cursor to directly grep the codebase for the relevant component.
Animation pause
It also includes a pause feature, which is super cool if you want to debug a specific state of a UI animation, allowing you to capture feedback on a frame that would otherwise be gone in milliseconds.
Agent-agnostic
Agentation is fully agent-agnostic. The output is markdown. Meaning it works with any AI tool that has access to your codebase and can read the structured format.
You aren't locked into a single provider and can use it with Claude Code, Cursor, Windsurf, or any other AI you choose.
Agentation.dev pricing
Right now, Agentation is free to use. It's also open-source, with the code available directly on GitHub.
However, just like pencil.dev, you still need a subscription to some AI coding agent (e.g., Claude Code, Cursor, etc.). Agentation provides tools for structuring the feedback, not the code generation itself.
Agentation.dev alternatives
Banani
Banani allows you to edit and generate UI designs using simple text prompts and organize them on a Figma-like canvas. It's an awesome alternative if your main goal is design exploration.
Similarly to Agentation, it has tools that allow you to select specific elements to edit with AI.
Pencil.dev
A canvas-based UI generation tool that integrates Claude Code. While Pencil is focused on creating new designs, Agentation is focused on fixing and iterating on existing ones. They are complementary tools in the vibe-coding ecosystem.
MagicPatterns
Focused on generating production-ready code from designs. It's a powerful tool for teams, but it's a full-stack solution, whereas Agentation is a lightweight, front-end utility for feedback to AI agents.
Agentation.dev use-cases
Devs using AI agents for front-end bug fixes and changes
Everyone who hates chat boxes and writing single long prompts
Designers who want a familiar interface to interact with AI
Vibe-coders who want to iterate on live apps quickly
Agentation.dev pros and cons
Pros
Fully agent-agnostic (works with any AI tool)
Provides precise, structured feedback
Completely free and open-source
Zero dependencies beyond React (easy integration)
Visual tools like Animation Pause
Cons
Requires React 18+
Requires manual copy/paste into the agent
Doesn't handle the actual feedback implementation part
If don't have access to the codebase, you can't use it
Should you try it?
Agentation dev is the solution you've been waiting for if you've been frustrated that your AI coding agent takes ages to find the exact UI element you're referring to.
It gives a clean way to close the feedback loop between your live app and your AI coding tools. And it can be a nice addition to your vibe-coding toolkit if you care about speed and precision when iterating your front-end UIs.
