Vibe Annotations

Transform your localhost development workflow with visual annotations for AI coding agents.

Vibe Annotations bridges the gap between visual feedback and automated code fixes. Drop annotations directly on your localhost development projects, and let AI coding agents automatically read, understand, and implement your feedback across multiple pages while respecting your responsive breakpoints.

✨ Key Features

- Visual Annotation System: Click to drop numbered annotations on any DOM element during development
- Multi-Agent Compatibility: Works with Claude Code, Cursor, Windsurf, VS Code, and other AI coding tools
- Multi-Project Safety: Intelligent project detection prevents cross-project contamination
- Responsive Context Awareness: Captures viewport dimensions so AI agents respect your breakpoints
- Multi-Page Support: Annotate across different routes and pages of your application
- Persistent Inspection Mode: Stay in annotation mode to drop multiple feedback points efficiently
- Rich Element Context: Captures CSS selectors, element properties, and positioning data
- Batch Operations: Efficient "read all → implement all → delete all" workflow
- Seamless MCP Integration: Connects to AI agents via SSE transport for automated fixes
- Alternative Copy to Clipboard workflow, to send annotations to your agent, with opt-in feature for auto-deletion after copy.

🚀 How It Works

1. Setup: Install the companion MCP server with three copy/paste commands
2. Annotate: Enter inspection mode and click elements to add feedback
3. Implement: Ask your AI coding agent to read and implement all your annotations at once - it will automatically detect your current project and filter relevant annotations
4. Iterate: Use batch deletion after implementation, ready for the next development cycle

🛠 Perfect For

- Frontend developers using AI coding assistants
- UI/UX feedback and rapid prototyping
- Responsive design testing and fixes
- Code review and improvement workflows
- Team collaboration on localhost projects
- Multi-project development environments

🤖 AI Agent Support

- Claude Code: Full MCP integration via SSE transport
- Cursor: Compatible through MCP server
- Windsurf: Works with MCP protocol
- VS Code Extensions: Supports MCP-compatible tools
- Other AI Tools: Any agent supporting MCP protocol

📋 Requirements

- Works exclusively on localhost development servers
- Requires companion vibe-annotations-server MCP package installation
- Compatible with React, Vue, Angular, and all web frameworks
- Supports common dev server ports (3000, 5173, 8080, etc.)
- Multi-project workspace support with intelligent filtering

Note: This extension only operates on localhost URLs (localhost, 127.0.0.1, 0.0.0.0) and requires
the vibe-annotations-server MCP package to function. The system automatically prevents
cross-project annotation mixing for safe multi-project development.