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

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.

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

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