Agentation skill
Annotation toolbar for React pages: click an element to hand the agent its selector and context, plus skills for setup and an autonomous UI critique
- 5,025 ★ on the repository
- Last commit
Extended access
Why this level
- The MCP server starts a local HTTP server, by default on port 4747, and accepts markup from the browser
- Self-driving mode lets the agent run agent-browser commands and drive a browser
- The toolbar sits on the page and reads classes and selectors of elements, so mount it for development only
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/agentationDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The MCP server starts a local HTTP server, by default on port 4747, and accepts markup from the browser
- Self-driving mode lets the agent run agent-browser commands and drive a browser
- The toolbar sits on the page and reads classes and selectors of elements, so mount it for development only
This is third-party code. Review the repository files before installing.
What it does
Agentation is a toolbar for development in React 18 and later. You click an element on the page, write a note, and the toolbar copies markup with the selector, position and context so the agent can find the right code with grep. Instead of describing the blue button in the sidebar, the agent gets the button.primary selector with its path and your comment. You can select text, several elements or any area, and pause CSS animations and video to capture a state. Benji Taylor's repository contains two skills. The agentation skill sets up a Next.js project: it checks whether the toolbar is already mounted, installs the package, adds the component to the root layout and optionally connects the agent through MCP. The agentation-self-driving skill asks the agent to critique a page on its own, placing annotations in a visible browser window through the agent-browser skill. For direct sync the package includes the agentation-mcp MCP server.
Who it is for. For frontend developers and designers who refine a React or Next.js interface with an agent and are tired of describing elements in words.
Good fit when
- While editing a UI the agent cannot find an element from a verbal description and changes the wrong component
- You want to leave several notes on the page at once and hand them to the agent as one list
- You need to catch an animation or video state and mark it in the output
- Your project is on Next.js and you want the agent to wire up the toolbar and the MCP server itself
- You want a first critique of a finished page: the agent walks through it in a visible browser and places annotations
Not a fit when
- The project is not React: the toolbar needs React 18 or later
- You need to work in a mobile browser: only desktop is supported
- You plan commercial development without reading the terms: the PolyForm Shield 1.0.0 licence sets limits
- You need a bug-report video or a full test run: the toolbar only annotates elements
Example request
Add Agentation to this Next.js project with the MCP server and confirm that annotations from the browser reach youLimitations
Needs React 18 or later and a desktop browser; mobile is not supported. The licence is PolyForm Shield 1.0.0 rather than MIT, so read its terms before commercial use. The setup skill is written for Next.js (App Router and Pages Router). Self-driving mode requires the agent-browser skill and always opens a visible browser. Direct sync works while the MCP server runs, by default on port 4747. Without the server the annotations stay in the browser and are copied by hand.
How to disable. Remove the <Agentation /> component from the root layout and run npm uninstall agentation. Remove the MCP server with claude mcp remove agentation or by editing your client configuration. Delete the skills from the agent skills directory.
FAQ
How do I install Agentation in a Next.js project?
Run npm install agentation -D and add <Agentation /> to the root layout after children for App Router, or after Component in pages/_app. The toolbar appears in the bottom-right corner. The agentation skill does this for the agent and adds no second mount if one exists.
How do I connect Agentation to Claude Code through MCP?
Run claude mcp add agentation -- npx -y agentation-mcp server. The launch command must include the server subcommand. Then give the component an endpoint, by default http://localhost:4747, and restart the agent if its configuration needs it.
Does Agentation work without MCP?
Yes. Without an endpoint the toolbar copies structured markup to the clipboard and you paste it to the agent yourself. The copied markup works with Claude Code, Codex, Gemini, Grok and any other AI tool.
What is self-driving mode?
The agentation-self-driving skill asks the agent to critique a page itself: it opens a visible browser through agent-browser, hovers, clicks and places annotations in front of the user. The agent-browser skill must be installed first.
What can the toolbar select?
A single click captures the element selector. Cmd or Ctrl selects elements one by one, dragging selects several at once or an area, even an empty one. Open shadow roots and same-origin iframes work.
Discussion
No questions or reviews yet.
Related
SkillsA skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
A CLI that lets an agent inspect a running React app: component tree, props, state, hooks and render profiling
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
Connects an agent to a running Next.js 16+ dev server: errors, routes, logs and docs for your installed version
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Agentation (this entry) | no | 5,025 | ||
| Plannotator | no | 9,570 | annotates agent plans and diffs in a local interface rather than page elements | |
| BrowserTools MCP | no | not required | 7,330 | gives the agent the console, network and screenshots of an open Chrome |
README in short
The description explains the idea: a toolbar in the corner of the page, a click on an element, a note and structured markup copied for the agent. The install section is one npm command and a component example, and the agents section describes the MCP server and the endpoint prop. Then come the feature list, the requirements (React 18 or later, desktop browser) and a note on how selectors help the agent find code.
README badge
Original SKILL.md
---
name: agentation
description: Add Agentation visual feedback toolbar to a Next.js project
---
# Agentation Setup
Set up the toolbar and, when requested, connect it to the user's coding agent.
A visible toolbar and a healthy MCP server do not prove that browser feedback
reaches the agent. Verify that final step before calling setup complete.
## Steps
1. **Inspect the project**
- Read the project's instructions and detect its package manager.
- Look for `agentation` and an existing `<Agentation>` mount before installing.
- If already mounted, inspect its `endpoint` and current MCP setup. Do not
exit just because the component exists, and do not add a duplicate mount.
- Install `agentation` if missing, using the existing lockfile's package manager.
2. **Choose the connection mode from the request**
- For MCP or live agent feedback, use the same HTTP server URL as the agent.
The default local server is `http://localhost:4747`; preserve an existing
custom port or proxy URL. Never assume the browser and agent use the same
machine when the project is remote.
- For manual copy/paste only, omit `endpoint` and explain that feedback remains
in this browser. Do not silently enable a server connection.
- If the intended mode is unclear, ask one brief question while inspecting
the existing project. Keep working on independent setup checks.
3. **Add or update the component**
For a Next.js App Router project, render in the root layout's body after
children. For Pages Router, render after `Component` in `pages/_app`.
Preserve any existing callbacks and options.
```tsx
import { Agentation } from "agentation";
// Use the actual server URL selected above for MCP sync:
{process.env.NODE_ENV === "development" && (
<Agentation endpoint="http://localhost:4747" />
)}
```
The package provides its own client boundary. Keep the application's root
layout server-rendered unless the project has another reason to change it.
4. **Configure the agent when MCP was requested**
- Use the project's existing MCP client and configuration conventions.
- The launch command must include the `server` subcommand:
`npx -y agentation-mcp server`.
- For supported agents, `npx add-mcp "npx -y agentation-mcp server"` is one
setup option. For Claude Code, use
`claude mcp add agentation -- npx -y agentation-mcp server` or the init wizard.