Release Notes
Vibe Annotations now runs inside Electron apps and other embedded Chromium hosts, not just Chrome.
What's new
🖥️ Annotate your Electron app
Side-load the unpacked extension into your Electron dev session and the toolbar injects into your app just like a browser tab. Because injection rides the static content scripts on localhost, it sidesteps CSP and CORS with no wiring on your side. Screenshots and the toolbar-icon toggle aren't available in embedded hosts, but the core annotate → agent loop works end to end. *(Requires loading the unpacked extension; this build isn't on the Chrome Web Store.)* → Electron & embedded hosts🧩 Runs cleanly in any Chromium host
The extension now feature-detects Chrome-only APIs (chrome.commands, chrome.action) so it no longer crashes on boot in non-Chrome runtimes, and it hides the close button where there'd be no way to reopen a dismissed toolbar.
---
No server update needed.
📚 Full documentation: vibe-annotations.com/docs
A small follow-up to v2.0.0 that makes the variants workflow feel more natural and keeps your annotation queue clean.
What's new
🧬 Just *ask* for variants
Typing something like *"make variants of this"* or *"show me a few versions"* straight into a normal comment will be recognized by your agent — routing the annotation through the same build-preview-and-pick flow, right in your codebase. *(Requires the MCP server.)* → Variants🧹 Cleaner handoffs
Your agent now reliably clears each annotation once it's implemented, instead of leaving finished ones on the page. This fixes a rough edge with design edits: a leftover edit used to re-apply its live preview on top of your already-changed code on reload. Design edits are now closed out as soon as they land, and a variants request no longer stops the agent from tidying up everything else. --- The MCP server moves to v0.5.1 — update withnpx vibe-annotations-server init (or npm i -g vibe-annotations-server).
📚 Full documentation: vibe-annotations.com/docs
Say hello to Vibo 👋
Meet Vibo — our new Cursor-devil, detail-chasing mascot. Little horns, little wings, and an eye for the pixels you missed. Vibo is the face of our biggest release yet: v2.0.0 reworks how you annotate, edit, and hand work off to your coding agent, and rebuilds the extension from the ground up.What's new
🧬 Component variants
Ask your agent for several variants of a component, preview them right on the page, and pick the winner. The agent builds each one in your real codebase — not a mockup — then finalizes your choice and strips the scaffolding for a clean diff. *(Requires the MCP server.)* → Variants📸 Screenshots & reference images
Every pin can carry an automatic screenshot of the element you annotated, plus any reference images you paste or attach. Your agent receives both as real files and is told which is *current state* vs *design target*. → Screenshots & images📤 Share a review in one file
Export a batch of annotations three ways:.md (offline, personal handoff), .html (self-contained, every image embedded — share with anyone, no extension needed), or .json (re-import onto another localhost).
→ Sharing a review
🧠 Richer element context
Every pin now resolves the React (or Vue) component and its source file from the page's real fiber tree, so your agent jumps straight to the right file instead of guessing from the DOM.🎨 A single, unified popover
Comment, design edits, and variants now live in one panel with intent tabs, plus a+ attachment menu. Design edits still preview live on the page — now a click away from everything else on the pin.
→ Design edits
⚙️ Under the hood: rebuilt on WXT
The extension is now built with WXT, a modern web-extension framework. What that means for you:chrome://extensions on every change.pnpm dev in packages/extension/, load .output/chrome-mv3 once, and iterate with live reload. See the Architecture docs.npx vibe-annotations-server init (or npm i -g vibe-annotations-server).
---
📚 Full documentation: vibe-annotations.com/docs
Setup Wizard
One interactive command replaces the 4-step setup (install → start → configure agent → link extension):`bash
npx vibe-annotations-server init
`
Detects your package manager, installs the server globally, starts it in the background on port 3846, configures your AI coding agent (Claude Code, Cursor, Windsurf, Codex, OpenClaw, VS Code), and points you to the Chrome Web Store.
Flags: --agent (repeatable), --project, --non-interactive, --skip-server, --skip-extension, --reset.
What's new
Server (0.4.0)init subcommand — interactive setup wizard built on @clack/promptsvibe-annotations works alongside vibe-annotations-serverstatus / logs -f / stop so users know the daemon is runningnpx vibe-annotations-server initllms.txt, and extension CLAUDE.md all lead with init as the recommended pathclaude mcp add --scope user (global config) is now the default across all docsWhat's new
UX & UI refresh, quality of life improvements
#E85B5C → #D03D68)Clipboard improvements
## /path headers[Stylesheet change] instead of ?Badge count fix
Codebase refactoring
annotation-popover.js (2256→684 lines) and floating-toolbar.js (1807→1375 lines) into focused sub-modulespopup/ directory from pre-v1.1.0Server (vibe-annotations-server)
applyAnnotationsUpdate() methodfilterByUrlPattern() utility (was duplicated 3×)node-persist dependencyWatch on GitHub
Before / After — MCP output for a comment-only annotation
Before (v1.6.0)`json
{
"selector": "[data-vibe-id=\"vibe-annotation-...\"]",
"element_context": {
"tag": "div",
"classes": ["rounded-2xl", "border", "border-border", "bg-surface-alt", "p-6"],
"text": "📦Multi-Page Batching...",
"styles": {
"display": "block", "position": "static", "fontSize": "16px",
"fontWeight": "400", "lineHeight": "24px", "textAlign": "start",
"color": "rgb(248, 250, 252)", "backgroundColor": "rgb(15, 23, 42)",
"margin": "0px", "padding": "24px", "paddingTop": "24px",
"paddingRight": "24px", "paddingBottom": "24px", "paddingLeft": "24px",
"marginTop": "0px", "marginRight": "0px", "marginBottom": "0px",
"marginLeft": "0px", "flexDirection": "row", "flexWrap": "nowrap",
"justifyContent": "normal", "alignItems": "normal", "gap": "normal",
"columnGap": "normal", "rowGap": "normal",
"gridTemplateColumns": "none", "gridTemplateRows": "none",
"borderTopWidth": "1px", "borderRadius": "16px", "borderStyle": "solid",
"borderColor": "rgb(30, 41, 59)", "width": "504px", "minWidth": "auto",
"maxWidth": "none", "height": "175.5px", "minHeight": "auto",
"maxHeight": "none"
},
"position": { "..." : "..." }
},
"context_hints": ["UI section: main-content", "Next.js app detected", "CSS-in-JS styling detected"],
"_synced": true,
"badge_offset": { "x": 138.94, "y": 23.49 },
"source_file_path": null,
"source_line_range": null,
"source_map_available": false,
"has_screenshot": true
}
`
After (v1.6.1)
`json
{
"selector": "[data-vibe-id=\"vibe-annotation-...\"]",
"selector_preview": "",
"element_context": {
"tag": "div",
"classes": ["rounded-2xl", "border", "border-border", "bg-surface-alt", "p-6"],
"text": "📦Multi-Page Batching...",
"path": "div[class=\"mx-auto max-w-7xl px-6\"] > div[class=\"mx-auto max-w-5xl\"] > div[class=\"grid gap-4\"] > div[class=\"rounded-2xl border border-border\"]",
"position": { "..." : "..." }
},
"has_screenshot": true
}
Stripped computed styles from MCP — 38 CSS properties like
New
`
What changed
flexWrap: "nowrap" and gridTemplateColumns: "none" were token waste. Agents use classes and pending_changes, not browser-computed values.selector_preview — readable HTML tag () instead of raw data-vibe-id selectors
New path — 4-level DOM breadcrumb for structural context
Framework class filtering — ng-tns-*, cdk-*, css-*, jsx-*, sc-* noise stripped at capture time
Stripped noise fields — _synced, badge_offset, context_hints, and null fields removed from MCP responses
Bridge API parity — annotations created by in-browser agents now include selector_preview and path
CSS rule placeholder — shows a useful example instead of a data-vibe-id selector
Credits
Selector preview, DOM path, and framework class filtering built on work by @tulindesign (#63).Watch Mode
Coding agents can now automatically pick up and implement annotations as you drop them: no copy-paste, no manual triggering. It feels like getting pursued by a front-end developer, give a try, and enjoy editing your web apps faster than ever 🏎️ 💨How it works
1. Make sure the MCP server is running and connected to your agent 2. Tell your agent: "Start watching Vibe Annotations" 3. Annotate elements in the browser — the agent picks them up, implements changes, and deletes them automatically 4. An eye icon appears on the toolbar and badges while an agent is watching 5. Click the eye to stop, or it auto-stops after 5 minutes of inactivityWhat's new
Server (0.2.0)watch_annotations MCP tool — long-polls for new annotations with configurable timeout/api/watchers endpoint for the extension to detect active watchers/api/watchers/stop endpoint to let the extension stop watch modedelete_annotation now succeeds gracefully when the annotation is already goneBug Fixes
/app#/settings?tab=2) instead of just the pathname (/app). Fixes incorrect context in hash-routed apps (Vue, React Router hash mode, etc.). Thanks @mikeozornin (#56)New feature
Pressing ↑/↓ in Annotation mode now travels to parent elements in the DOM. Press enter to confirm selection and create your annotation.Community
Shoutout to @mikeozornin for the issue and the feature idea.Bug Fixes
Changes
limit=0 as "no limit" instead of returning an empty arraynpm install -g vibe-annotations-server) for full fixWhat's new in 1.5.0
This release transforms Vibe Annotations from a human-only annotation tool into a collaborative platform where AI agents can annotate alongside you.🤖 Bridge API
AI agents with browser access can now create annotations directly viawindow.__vibeAnnotations. Works with:
window.__vibeAnnotations.help() to discover the full API.
🎨 Stylesheet annotations
Agents can now create stylesheet annotations for bulk CSS changes that apply across the page — separate from element-anchored annotations. Great for restyling, theme adjustments, and design system tweaks.📦 Import & export
✏️ CSS rules on annotations
Element-anchored annotations now support CSS rules —:hover, ::before, @media queries and more. Write CSS that goes beyond inline style overrides.