CRX id
gkofobaeeepjopdpahbicefmljcmpeof
gkofobaeeepjopdpahbicefmljcmpeof
Description from extension meta
AI-powered development annotations for localhost projects and local HTML files
Image from store
Description from store
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
🚀 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.
Latest reviews
- (2025-08-07) Hugo Lm: I was looking for a way to cut down on the back-and-forth between my app and Claude-code terminal, and this is perfect! Now I can annotate my app’s interfaces directly in the browser (on my local environment), and everything is processed immediately.
Statistics
Installs
6
history
Category
Rating
5.0 (2 votes)
Last update / version
2025-08-08 / 1.0.1
Listing languages
en