What is Agentation?
React toolbar for marking up page elements, giving AI coding agents selectors, file paths and notes.
Who is Agentation best for?
Agentation is best for front-end developers who use AI coding agents and need to point them at the exact element to change.
UI fixes with coding agents
Notes carry CSS selectors, source file paths and the React component tree, so the agent finds the code instead of guessing.
Design review in the browser
Click an element or select text on a running page, add a note and copy the feedback as markdown.
Agents that answer back
Through MCP, Claude Code, Codex, Gemini CLI or Grok Build can list notes, ask questions and mark them resolved.
Animation bugs
Pausing CSS animations, Web Animations and videos lets you annotate a single frame.
How much does Agentation cost?
Agentation is free for individuals and for companies using it internally; only shipping it inside a product you sell needs a commercial license.
- npm package for React 18+ apps
- MCP server that syncs notes to your agent
- Use at work on your own projects
Redistributing Agentation as part of a product you sell needs a commercial license from the makers, priced on request. The code is public on GitHub under the PolyForm Shield license, which is source-available rather than open source. Full pricing on agentation.com. We checked these prices on .
How do readers rate Agentation?
No one has rated Agentation yet. Be the first.
Sign in to rate. One rating per account.
How do I connect Agentation to my AI agent?
Agentation MCP is Agentation's official MCP server. Add it to your agent once, then ask it to hand annotated page feedback to your coding agent for exact UI fixes.
Brings the notes you pin on a live web page in Agentation into your agent, along with the element each note points to, so fixes land on the right part of the interface.
$ claude mcp add agentation -- npx -y agentation-mcp server
It runs on your computer, so Claude Code starts it when it needs it.
Agentation's setup guide covers the sign-in.
Then ask your agent
- Runs
- On your computer
- Sign-in
- See guide
- Maker
- Agentation
- Guide
- agentation.com
What are the best Agentation alternatives?
One tool on Recaply does Agentation's job.
Questions about Agentation
What is Agentation?
React toolbar for marking up page elements, giving AI coding agents selectors, file paths and notes.
Who is Agentation for?
Agentation is best for front-end developers who use AI coding agents and need to point them at the exact element to change.
Is Agentation free?
Yes. Agentation has a free plan: npm package for React 18+ apps.
Does Agentation have an MCP server?
Yes. Agentation MCP is Agentation's official MCP server, so agents such as Claude Code, Cursor, Codex and GitHub Copilot can hand annotated page feedback to your coding agent for exact UI fixes. It runs on your computer.
What are the best Agentation alternatives?
The closest alternatives on Recaply are PinVari.
Where can I try Agentation?
On its official website, agentation.com.
Does Agentation work without React?
No. Agentation is a React component and needs React 18 or later in your app. It works in Next.js, Remix and Astro projects that use React, and the copied markdown can go to any AI tool that accepts text.
Cua Spaces
ElevenLabs UI
Keenable
AgentQL
PlayerZero
Herdr