Ainotationbeta
A field guide to better feedback
GitHub
01OverviewOPEN SOURCE / MIT

UI feedback, in context.

Point to an element. Show what you mean. Give your coding agent the context to make the next change.

Framework agnosticLocal-firstMCP-readyGet started
The workflow, in miniature
EXAMPLE / 01
localhost:5173 / settings
YOUR WORKSPACE

Studio workspace

A little space for your next big idea.

5 collaborators
ALL CHANGES SAVED
button.workspace-save
The element stays attached to the conversation.
1Feedback.workspace-save
Context attached automatically
Element
button.workspace-save
Page
/settings
Styles
Computed values
Interactive example · no data sent
01Point to the detail02Capture the context03Continue with your agent
02

Quick start

TWO SMALL ADDITIONS

Add the tool to your app. Give your agent a way to read the feedback.

aYour applicationVITE 

pnpm add -D @ainotation/vite@beta
vite.config.ts 
import { ainotation } from '@ainotation/vite';

export default {
  plugins: [ainotation({ name: 'my-app' })],
};

Keep your existing plugins. The SDK is included; the inspector appears in development.

Not using Vite? Use the SDK ↗

bYour coding agentMCP

MCP client configuration 
{
  "mcpServers": {
    "ainotation": {
      "command": "npx",
      "args": [
        "--yes",
        "@ainotation/mcp@beta",
        "connect"
      ]
    }
  }
}

Your client should share workspace roots. Otherwise, append --directory and your project path.

Vite 7/8 · Vite+ · Node.js 24.20+ (24.x)Full setup guide ↗
03

Work directly on the page

01 /

Annotations

Select an element or a passage of text. Your note travels with its selector, page, position and DOM context, so your agent knows what you mean.

Explore the example
ShiftSelect multiple elementsAlt / ⌥Interact with the page
02 /

Style tweaks

Adjust spacing, typography and color in place. Preview related elements together and pass the exact style changes to your agent.

Explore the example

Preview on the page. Pass the exact style changes to your agent.

03 /

Screenshot annotations

Draw arrows and frames over the live page, crop a capture, or import a reference image. The resulting PNG stays attached to your feedback for your agent to read when needed.

Draw, crop and attach. Your agent retrieves the PNG when needed.

04 /

UI Variants

Ask your agent for alternatives. Compare them on the actual page, then choose what to keep or ask for another round.

Explore the example

You make the decision. Your agent applies the design and cleans up the temporary code.

04

What your agent receives

CONTEXT, NOT GUESSWORK

Your feedback and its context, together. Read it through MCP, copy Markdown, or export a JSON document with image attachments.

  • Your intent, in your own words
  • Selectors and bounded DOM context
  • Computed styles and suggested changes
  • Images, retrieved when needed

MCP is optional for annotation. UI Variants requires a compatible MCP connection.

Abbreviated context · updated with your example note
05

A few useful boundaries

Local storage
Feedback stays in your browser, organized by project and page. No account or cloud service required.
INDEXEDDB
Local connection
The MCP service runs on your machine, with authenticated connections scoped to your workspace.
LOOPBACK
Development only
The Vite plugin keeps the inspector out of production builds. Candidate code belongs behind development imports.
DEV
Yours to use
Open source and free for personal and commercial use. Keep the copyright and license notices.
MIT ↗