AInnotations

Overview

AInnotations is a powerful tool designed for developers to streamline feedback and annotation processes on any running application. This framework-agnostic solution enables users to draw, highlight, and comment directly on their apps while capturing notes in a structured markdown file for an AI coding agent to process.

Key Features

• Direct Interaction: Annotate issues directly on the page without the hassle of screenshots or complex descriptions. Each note made using AInnotations automatically includes the selector, quoted text, and a screenshot for precision.
• Efficient Note-taking: AInnotations reduces the time spent communicating issues to an AI agent from an average of 90 seconds to around 12 seconds. Instead of relying on descriptions, the tool captures notes in context, making it easy for the agent to understand and act upon them.
• Batch Annotation: Leave multiple remarks across different pages in one session without worrying about miscommunication. Each note is self-contained, ensuring that the agent processes each one accurately without guessing.

Usage Example

Simply point, draw, highlight, or comment on an element of your application, and AInnotations will generate an entry in the markdown file that looks like this:

## `a1b2c3`  ·  /pricing  ·  2026-08-13 09:40  ·  1440×778
- **Note**: swap these two paragraphs
- **Element**: `main > article > div.prose > p:nth-of-type(3)`
- **At**: 0.12,0.30
- **Draw**: M40,10L80,60 M50,10L55,40
- **Shot**: annotations/a1b2c3.png
- **Text**: « the passage that was selected »

This format allows AI agents to easily locate and address each note without the confusion typical of traditional annotation methods.

How It Works

AInnotations acts as a proxy in front of your development server, injecting an overlay into every HTML response. It captures user inputs, ensuring that every note is addressed accurately. By running AInnotations, users will browse their application using a dedicated port that facilitates the overlay for seamless integration.

Accessibility

AInnotations doesn’t require any SDK or code changes to integrate into existing workflows. It supports a multitude of frameworks, enabling developers to work efficiently regardless of their tech stack.

Further Information

To start using AInnotations, run with this command:

npx ainnotations --target 4321

Open http://localhost:4000 to access the annotated application, where the overlay will be displayed for easy use.

In summary, AInnotations enhances the way developers communicate issues and improvements within their applications, making it a vital tool for modern software development.