Give design feedback by clicking on your site with Agentation

Give Claude Code the repo link and ask it to install:

I want to install https://github.com/benjitaylor/agentation in this project.

1. Open a new branch first (e.g. feat/agentation); don't touch main.
2. Install the package as a dev dependency: npm install agentation -D
3. Add the <Agentation /> component to the app's outermost layout, but only render it in development (process.env.NODE_ENV === "development").
4. Show me the changes, then commit. Don't push.
5. Start the dev server and give me the local link to open.

To do it yourself, in the terminal:

npm install agentation -D

Then add the component to the layout. In the Next.js App Router that's app/layout.tsx (in my project, app/[locale]/layout.tsx):

import { Agentation } from "agentation";

// ...
      <body>
        {children}
        {process.env.NODE_ENV === "development" && <Agentation />}
      </body>

In a Vite or Create React App project, put it at the end of your App component. The component ships its own "use client" directive, so in Next.js you can add it straight to a server layout without a wrapper.

When I did this, Claude first asked which project to install it in, then offered to open a new branch. The install came down to the package itself and two lines in the layout.

Start the dev server (npm run dev) and open the link Claude gives you. With Next.js it's usually http://localhost:3000.

You'll see a small icon in the bottom-right corner of the page. That's Agentation's toolbar. If you can't see it, make sure the server is running in development mode; in a build you open with npm run build && npm start, the toolbar is hidden on purpose.

1. Click the icon in the bottom-right corner (or Ctrl+Shift+F, ⌘⇧F on a Mac). Feedback mode turns on.
2. Hover over the element you want to change. Agentation outlines it and shows which component it is.
3. Click it, type your note in the box and press Add.
4. Repeat for your other notes. Each note stays on the page as a numbered marker.

I left these three notes on the dec5.tech home page:

• The three header links (Posts, About, Instagram): "move these three to the left, next to the logo"
• The language switcher (TR EN): "make TR EN country flags"
• The heading of the posts section: "make this heading span the whole row"

To select several elements at once, hold Ctrl (⌘ on a Mac) while clicking, or drag to select an area. You can mark empty space too, for notes like "put a button here".

When you're done, press Copy Feedback in the toolbar (or the C key). Something like this lands on your clipboard:

## Page Feedback: /tr
**Viewport:** 1280×633

### 1. <Header> hidden items
**Location:** .fixed > .mx-auto > .hidden
**React:** <Header>
**Feedback:** bu 3 lü sol tarafa logoya yanaşsın

### 2. <Header> flex items
**Location:** .fixed > .mx-auto > .flex
**React:** <Header>
**Feedback:** TR EN ülke bayrağı OLSUN

(My notes were in Turkish; yours will be in whatever language you write them.) Paste it into Claude Code as it is. You can add a sentence or two in front:

I left the notes below on the page with Agentation. Apply each note in the relevant file using its Location and React component. When you're done, list which file you changed and how, and tell me if there's anything I should check in the browser.

[paste the Copy Feedback output here]

Had I tried to explain the same three changes by hand, I'd have been writing sentences like "move the three links to the right of the logo over to the left, next to the logo". And for "make this text 2 pixels smaller" in the middle of a section, describing where it is becomes nearly impossible. In Agentation's output every note comes with a component name and a CSS address; nothing needs describing.

For me, Claude applied all three notes in about a minute and a half and reported that type checking and lint passed with no errors:

1. The three header links moved next to the logo.
2. The TR / EN text became Turkish and British flags.
3. The posts heading widened to fill the whole row.

Refresh the page and look at the changes. If something isn't right, leave a new note the same way and copy again. If you like it, merge the branch into main; if not, delete the branch and the main project stays untouched.

If you don't want to copy and paste every time, you can connect Agentation to Claude Code over MCP. Your notes then go straight to Claude.

Add the server to Claude Code:

claude mcp add agentation -- npx -y agentation-mcp server

Quit and reopen Claude Code. Then give the component the server's address:

{process.env.NODE_ENV === "development" && <Agentation endpoint="http://localhost:4747" />}

To test the connection, leave a test note on the page and ask Claude:

Read the pending Agentation notes (agentation_get_all_pending). Tell me the exact text of the note and which page it was left on, then apply it.

If the note doesn't arrive, npx agentation-mcp doctor shows whether the server is running. Make sure the address in the component and the server's port (4747 by default) match.