vibe-annotations
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@vibe-annotationsimplement all annotations on the dashboard"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Vibe Annotations
Visual feedback tool for web development. Annotate elements on your pages, make design tweaks, and share with AI coding agents or teammates.
https://github.com/user-attachments/assets/6946733e-eea6-4d38-8386-c493f90d36f4
For more features explanations (like collaboration via file sharing, AI-assisted annotations, watch mode...) please read the docs.
Get started
1. Install the browser extension
2. Run the setup wizard
npx vibe-annotations-server initOne interactive command installs the global server, starts it in the background, and configures your AI coding agent (Claude Code, Cursor, Windsurf, Codex, OpenClaw, VS Code). Prefer manual? See Installation.
3. Open a localhost page, click Annotate. You can annotate multiple pages on your web app. Then:
A (recommended) - Use the MCP to implement your Annotations
B - Copy to your clipboard: View all > Copy and send to your AI coding agent.
Related MCP server: @designjs/mcp-server
Documentation
Full docs at vibe-annotations.com/docs — including installation, MCP setup, workflows, architecture, and troubleshooting.
Contributing
See CONTRIBUTING.md. PRs welcome.
License
PolyForm Shield 1.0.0 — see LICENSE and NOTICE.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
No tool schema history has been recorded yet.
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
MCP server for visual regression testing: triage a PR's UI diffs from your coding agent.
9118UX-review and product-feedback MCP: annotated screenshots and reviews your AI agent can act on.
91- RampifyOAuthdev.rampify
SEO MCP server: crawl your site, find AI-visibility gaps, and ship the fix from your coding agent.
- mcpOAuthcom.screenshotink
Screenshot, diff, audit and sitemap-capture any web page — 5 MCP tools for AI agents.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceMCP server for visual feedback, video direction, and QA assertions on web pages, enabling AI agents to read, reply, and resolve annotations in real time.4MIT
- AlicenseNot gradedqualityCmaintenanceMCP server that enables AI coding agents to read and write to a local-first HTML/CSS design canvas, bridging visual design and code generation.MIT
- AlicenseNot gradedqualityCmaintenanceA MCP server that enables AI coding agents to consume structured UI feedback via click-to-annotate, supporting issue types and severity levels.11MIT
- AlicenseAqualityBmaintenanceMCP server that opens a browser and adds a comment/pencil overlay to every page, letting you annotate live sites and send the marks to your coding agent.8MIT
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/RaphaelRegnier/vibe-annotations'
If you have feedback or need assistance with the MCP directory API, please join our Discord server