Documentation

Vibe Annotations is a visual feedback tool for web development. Annotate elements on your localhost pages, make design tweaks, and share structured feedback with AI coding agents or teammates.

How it works

  1. Install the browser extension and optionally the MCP server.
  2. Annotate elements on any localhost page — add comments, tweak CSS, edit text.
  3. Share via copy/paste, export, or MCP. AI agents read your annotations and implement the changes.

Quick start

The extension works standalone with copy/paste. For MCP integration (auto-sync, watch mode), install the server:

npm install -g vibe-annotations-server
vibe-annotations-server start

Then connect your AI coding agent.

Next steps