Visual feedback for AI coding agents
Annotate anything on your localhost, across pages, and let your coding agent implement every fix in one batch. Free, source-available, 100% local.
Annotate View all Settings Annotation queue
Keep up with your AI coding agent
Pin it
Click any element on any local page. No selectors, no setup.
Describe it
Leave a quick note on what needs fixing, add a design edit or a screenshot.
Ship it
Hand the queue to your agent and watch every fix land in one batch.
A toolset, not just a pin
Pixel-perfect context. Every pin captures the exact DOM selector, the React (or Vue) component and source file behind it.
Direct design edits. Change size, spacing, color and text in a Figma-like panel. Live preview before handing-off to your agent.
Variants preview. Ask your agent for variants of any component, then pick the winner right on the page.
Share in one file. Export annotations as one self-contained HTML with images embedded, or a lighter .md file.
Auto-screenshots, and attach your own reference images.
Install once, use everywhere. One chromium browser extension, one local server. Zero switch cost.
http://localhost:3846
And more...
Frequently asked questions
What browsers are compatible?
Vibe Annotations works with all Chromium-based browsers including Google Chrome, Microsoft Edge, Brave, Opera, Vivaldi, and Arc. Since it's built as a Chromium extension, it's compatible with any browser that supports the Chrome Web Store extensions.
What are the installation steps?
1. Install the Vibe Annotations browser extension from the Chrome Web Store. 2. Download and run the MCP server locally. 3. Add the MCP configuration to your AI coding agent (Claude Code, Cursor, etc.). 4. Start annotating! The whole process takes less than 2 minutes.
How much does it cost?
Vibe Annotations is completely free and source-available. There are no hidden costs, no subscription fees, and no premium features behind a paywall. We believe powerful developer tools should be accessible to everyone.
What are the upcoming features?
We're focusing on designer handoff to dev, visual edits, and general improvements. These features will make collaboration between designers and developers even smoother. Join our GitHub community to vote on features and stay updated!
It's source-available, can I contribute?
Absolutely! Vibe Annotations is source-available and we welcome contributions. You can contribute code, documentation, bug reports, or feature requests. Check out our GitHub repository to get started. We have good first issues labeled for new contributors.
I can't make it work, can I get some assistance?
Yes! We offer several support channels: GitHub Issues for bug reports, comprehensive documentation, and video tutorials. Most setup issues are resolved within minutes with our troubleshooting guide.