vibe-annotations

# Vibe Annotations

[![Chrome Web Store](https://img.shields.io/badge/Chrome_Web_Store-6K+_users-green?logo=googlechrome&logoColor=white)](https://chromewebstore.google.com/detail/gkofobaeeepjopdpahbicefmljcmpeof) [![Server Package](https://img.shields.io/badge/Server-NPM-blue)](https://www.npmjs.com/package/vibe-annotations-server) [![License: PolyForm Shield](https://img.shields.io/badge/License-PolyForm%20Shield-blue)](https://polyformproject.org/licenses/shield/1.0.0)

Visual feedback tool for web development. Annotate elements on your pages, make design tweaks, and share with AI coding agents or teammates.

## Get started

**1.** Install the [browser extension](https://chromewebstore.google.com/detail/gkofobaeeepjopdpahbicefmljcmpeof)

**2.** Install the global server

```bash
npm install -g vibe-annotations-server
```

**3.** Start the server

```bash
vibe-annotations-server start
```

**4.** Open a localhost page, click **Annotate**. You can annotate multiple pages on your web app. Then:

A (recommended) - [Use the MCP](https://vibe-annotations.com/docs/mcp-setup) to implement your Annotations

B - Copy to your clipboard: **View all** > **Copy** and send to your AI coding agent.

## Demos

**Annotate, copy/paste to your AI coding agent:**

https://github.com/user-attachments/assets/ebcf5a17-423c-459c-b5d5-2876b671c5a7

**Make persisting direct design tweaks:**

https://github.com/user-attachments/assets/66bc31ed-86d6-4fc0-ab69-7e4ed8c7c27a

**Use the MCP server to share your annotations, any websites, multiple pages:**

https://github.com/user-attachments/assets/2dc8e03c-a760-4e31-afac-537200387788

**Annotate with a browser-capable AI coding agent:**

https://github.com/user-attachments/assets/5839d3df-f3e6-4b05-b58a-fdd619487aa4

**Collaborate with teammates using export / import features:**

https://github.com/user-attachments/assets/58de5fad-d7fa-490d-849f-d25771758067

**Use watch mode, never leave your website:**

https://github.com/user-attachments/ass