Visual feedback for coding agents

Annote attaches your feedback to the actual interface — with DOM, React, CSS and motion context — then makes it available to your coding agent over MCP.

Install in a project

Runs locally. Your browser stays the source of truth.

Quick install

npm install --save-dev annote

Recommended

Let your coding agent set it up.

Point Codex, Claude Code, Cursor, or another coding agent at the npm package or GitHub repository. It can install Annote into the project and configure MCP for itself.

Give this to your agent

Set up Annote for this project using https://github.com/PelumiAlesh/annote.

Use the recommended development-only project integration, configure Annote MCP for yourself, preserve my existing MCP configuration, and verify the setup.

When you are done, explain how I should use Annote, tell me anything I need to restart, and remind me to open Annote → Settings → MCP and authorize this site once.

Manual project setup

npm install --save-dev annote

Load the browser bundle from a browser-only development entry point:

import "annote/dist/annote.iife.js";

Then configure the MCP companion:

npx annote init

Quick use on webpages

Or use the bookmarklet.

Want Annote on a page without touching its code? Drag the button below into your browser bookmarks bar, then click it on any page where you want to annotate. For development projects, installing through npm above is the most reliable option.

Annote ← drag to your bookmarks bar

The bookmarklet loads the published Annote browser bundle (annote@latest) from npm through jsDelivr. It works on many standard webpages, but some sites with strict Content Security Policy settings may block injected scripts.

Most mobile browsers cannot install bookmarklets. To annotate on a phone or tablet, copy the link and add it as a bookmark manually, or run Annote from a desktop browser.

One-time step

Authorize the site once.

Annote does not expose every page to your coding agent automatically. The first time you use MCP on a site, open Annote → Settings → MCP and authorize that origin.

Your app → Annote → Settings → Authorize

After that, leave feedback in the UI and tell your agent: “Check my Annote feedback.”

Live playground

Try pointing at something.

Card

A deliberately simple target.

Run Annote, select this card, and leave a note about its spacing, border or typography.

Motion

Inspect a moving element.

Select the moving dot, open Styles, then scroll down to the Motion section to edit its timing and easing.

Multi-select

Try selecting more than one thing.

Hold Shift and select two or more of the targets below and edit them together.

Target one

Target two

Target three

The workflow

Point. Annotate. Ask your agent to handle it.

No screenshots to explain. No “the button on the left.” No copy-paste required when MCP is connected.