snip

Snip

Visual mode for Claude Code. Also works with Cursor, Windsurf, Cline, and any AI coding CLI.

Install Snip, run snip setup, and your AI coding agent starts rendering diagrams and previews instead of describing them in text. Architecture? Sequence diagram. Data model? ER diagram. UI component? Rendered preview. All visual, all automatic.

You review what Claude renders — approve it, or annotate directly on screen. Circle what's wrong, add an arrow, write a note. Claude sees your annotations and iterates.

How It Works

Snip runs as a menu bar / system tray app with a CLI that any AI coding agent can call directly:

# Claude writes a Mermaid diagram to a file, then renders it for your review
snip render --format mermaid < architecture.mmd

# Claude renders an HTML component preview
snip render --format html < preview.html

# Open any image for annotated review
snip open screenshot.png --message "Is the layout correct?"

# Search your screenshot library
snip search "login page error"

The agent gets structured JSON back: { status: "approved" | "changes_requested", edited, path, text }. You can annotate spatially, type text feedback, or just approve.

Built for Claude Code. Also works with Cursor, Windsurf, Cline, and anything that can run a shell command. Ships an MCP server for agents without shell access.

Install

macOS (Homebrew)

brew install --cask rixinhahaha/snip/snip

Or download the DMG from Releases (Apple Silicon).

Linux

Download from Releases:

• AppImage (portable, any distro) — Snip-x.y.z-x86_64.AppImage
• deb (Ubuntu/Debian) — Snip-x.y.z-amd64.deb

Use with Claude Code

snip setup

That's it. snip setup configures Claude Code to use visual output automatically — rules, the /diagram skill, and permissions. Next time you ask Claude about architecture, data models, or flows, it renders a diagram instead of describing it in text.

Try /diagram in any Claude Code conversation to visualize what you're discussing.

CLI Reference

Command	What it does
snip setup	Enable visual mode for Claude Code (and Cursor, Windsurf, Cline)
snip render --format mermaid	Render Mermaid diagram from stdin, open for review
snip render --format html	Render HTML from stdin, open for review
snip open <path>	Open any image for annotated review
snip search <query>	Search screenshot library by description
snip transcribe <path>	Extract text from an image via OCR
snip list	List all saved screenshots with metadata
snip get <path>	Get metadata for a specific screenshot
snip organize <path>	Queue screenshot for AI categorization
snip categories	List all categories

All review commands (render, open) block until the user finishes and return structured JSON.

MCP Server

For agents without shell access (Claude Desktop, hosted environments), Snip also ships an MCP server:

{
  "mcpServers": {
    "snip": {
      "command": "node",
      "args": ["/path/to/snip/src/mcp/server.js"]
    }
  }
}

The MCP server exposes the same capabilities: render_diagram, open_in_snip, search_screenshots, list_screenshots, get_screenshot, transcribe_screenshot, organize_screenshot, get_categories, install_extension.

Also a Screenshot Tool

Snip is a full screenshot + annotation app on its own:

• Cmd+Shift+2 (macOS) / Ctrl+Shift+2 (Linux) — Capture with region select or window snap
• Cmd+Shift+1 / Ctrl+Shift+1 — Quick Snip (capture straight to clipboard)
• Annotate — Rectangle, arrow, text, tag, blur brush, AI segment
• Esc — Copy to clipboard and close
• Cmd+S — Save to disk + AI organizes in background

AI organization uses a local vision LLM (via Ollama) to name, categorize, and tag every saved screenshot. Semantic search finds any screenshot by describing what was in it.

Key Shortcuts

On Linux, replace Cmd with Ctrl.

Shortcut	Action
Cmd+Shift+2	Capture screenshot
Cmd+Shift+1	Quick Snip (select & copy to clipboard)
Cmd+Shift+S	Open semantic search
Cmd+S	Save to disk (in editor)
Esc / Enter	Copy to clipboard & close (in editor)
V / C / R / T / A / G / B / S	Select / Crop / Rectangle / Text / Arrow / Tag / Blur / Segment tools
Cmd+Z	Undo (annotations first, then crop, then segment cutout)

Development

npm install
npm run rebuild   # compile native modules (macOS)
npm start         # launch (tray icon appears)

Requires macOS 14+ or Linux (Wayland), Node.js 18+.

Documentation

Doc	Contents
docs/PRODUCT.md	Vision, feature specs, terminology
docs/DESIGN.md	Color palettes, component patterns, glass effects
docs/ARCHITECTURE.md	Code structure, IPC channels, data flow
docs/DEVOPS.md	Build pipeline, signing, native modules
docs/USER_FLOWS.md	Step-by-step flows, edge cases, test cases

Tech Stack

Electron 33 / Fabric.js 7 / Mermaid.js 11 / Ollama (local LLM) / HuggingFace Transformers.js / SlimSAM (ONNX)

All AI runs locally — no cloud APIs needed for core features.

Sponsor

Snip is free, open source, and built by two developers. If it's useful to your workflow, consider sponsoring the project.

Sponsorships help cover:

• Apple Developer Program — required for code signing and notarization so macOS doesn't block the app
• CI/CD costs — automated builds, testing, and release pipelines for macOS and Linux
• Continued development — new annotation tools, better AI integration, Linux improvements, and bug fixes

Every contribution helps keep Snip maintained and improving. Thank you!

License

MIT