Annotate. Describe. Copy.

agent-ui-annotation helps you communicate visual changes to AI coding agents by capturing element information and feedback in structured markdown.

See Demo

Click to Annotate

Click any element to add feedback. agent-ui-annotation captures the element type, location, and your notes.

Smart Element IDs

Generates human-readable names like "button Save" and CSS selectors that AI agents can understand.

Multi-Select

Drag to select multiple elements at once. Perfect for annotating entire sections.

Freeze Mode

Pause animations and videos to capture specific states for your feedback.

Markdown Export

Copy structured markdown at different detail levels: compact, standard, detailed, or forensic.

Persistent

Your annotations are saved automatically and persist across page reloads.

Supported Frameworks

Framework-agnostic core: Built on native Web Components with a Shadow DOM rendering layer. The core business logic is completely decoupled from any framework, with thin adapter layers for seamless integration.

Vanilla JS

import { createAnnotation } from 'agent-ui-annotation/vanilla'

Factory function API with callbacks for maximum flexibility

React

import { AgentUIAnnotation, useAgentUIAnnotation } from 'agent-ui-annotation/react'

Component + hook for state management integration

Vue 3

import { AgentUIAnnotation, useAnnotation } from 'agent-ui-annotation/vue'

Component + composable for reactive integration

Svelte 5

import { AgentUIAnnotation } from 'agent-ui-annotation/svelte'

Runes-based component with callback props

Angular

<agent-ui-annotation> with CUSTOM_ELEMENTS_SCHEMA

Native Web Component support via custom elements

See the README for complete documentation and usage examples.

Interactive Demo

Try annotating the elements below! Click the "Activate" button above or the toolbar button in the corner.

Form Elements

Data Table

Name	Status	Role
Alice Johnson	Active	Admin
Bob Smith	Pending	User
Carol White	Active	Editor

Card List

Product One

A great product for your needs

Product Two

Another excellent choice

Product Three

Premium quality guaranteed

Product Four

Best value for money

Console Output

[agent-ui-annotation] Ready. Click "Activate" to start annotating.