# Snip Browser

> Open source Chrome extension for capturing, annotating, and sharing screenshots with AI coding tools. Works with Claude Code, Codex CLI, and Cursor.

Snip Browser adds a visual feedback channel between developers and their AI tools. The extension captures any region of a webpage, provides annotation tools (rectangle, text, arrow, tag, comment, blur, crop), and integrates with a local companion server that AI tools use to request and receive screenshots programmatically.

The Comment tool sends structured JSON with coordinates and text to the AI — comments are not rendered into the exported image. All data stays local.

## Setup

- [Setup Guide](https://snip-browser.dev/setup): Install the extension and AI companion
- [Chrome Web Store](https://chromewebstore.google.com/detail/cgdiddemeilpmlkccfjcbbolkccfeiom): Install the Chrome extension

## CLI

- [CLI Reference](https://snip-browser.dev/setup#cli-reference): snip-companion and snip-wait commands, options, output format
- [AI Companion npm package](https://www.npmjs.com/package/@snip-browser/ai-companion): `npm install -g @snip-browser/ai-companion`

## How It Works

1. AI tool runs `snip-wait --url <url> --reason "<why>"` to request a visual capture
2. Chrome opens the URL with the Snip area selector
3. User captures, annotates, and optionally adds comments pointing at specific areas
4. User clicks Copy — the image and comments JSON are returned to the AI tool

## Comment JSON Format

When the user adds comments, the response includes a `comments` array:

```json
{
  "comments": [
    { "index": 1, "x": 0.35, "y": 0.72, "comment": "This button should be blue" }
  ]
}
```

- `index`: display number
- `x`, `y`: normalized 0-1 coordinates on the image
- `comment`: user text

## Supported Tools

- Claude Code: `snip-companion setup claude`
- Codex CLI: `snip-companion setup codex`
- Cursor: `snip-companion setup cursor`