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), run the setup wizard:

npx vibe-annotations-server init

Installs the server, starts it, and configures your AI agent in one step. Prefer manual? See Installation or MCP Setup.

Next steps