mcpField
S
snapmcp

snapmcp

Local
github.com/reeinhardddDeveloper Tools0Updated 2w ago

About snapmcp

snapmcp is an MCP server for creating visual captures of terminals, code, browser pages, and documents. It is intended for agents and documentation workflows, with tools for rendered images, PDFs, diffs, and animated captures rather than browser interaction.

Key features

  1. 01Capture terminal output with detected colors
  2. 02Render syntax-highlighted code and files
  3. 03Capture browser pages and HTML
  4. 04Render Markdown and create PDFs
  5. 05Generate diffs, GIFs, and capture batches
  6. 06SSRF protection and file-path allowlist

Use cases

  1. 01Adding terminal and code images to setup guides
  2. 02Documenting UI changes with before-and-after captures
  3. 03Creating visual CLI tutorials with terminal colors

MCP support

Exposes 13 MCP tools for capturing and rendering terminal output, code, browser pages, documents, diffs, PDFs, GIFs, and sequences. It is configured for MCP clients such as Claude Code, OpenCode, and VS Code/Cline.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
"mcpServers": {
"reeinharddd-snapmcp": {
"command": "npx",
"args": [
"-y",
"snapmcp"
],
"env": {
"SNAPMCP_DIR": "<SNAPMCP_DIR>",
"SNAPMCP_THEME": "<SNAPMCP_THEME>",
"SNAPMCP_FORMAT": "<SNAPMCP_FORMAT>",
"SNAPMCP_QUALITY": "<SNAPMCP_QUALITY>",
"SNAPMCP_SHADOW": "<SNAPMCP_SHADOW>",
"SNAPMCP_ALLOWED_PATHS": "<SNAPMCP_ALLOWED_PATHS>",
"SNAPMCP_SSRF_PROTECTION": "<SNAPMCP_SSRF_PROTECTION>",
"SNAPMCP_CHROME_EXECUTABLE": "<SNAPMCP_CHROME_EXECUTABLE>",
"SNAPMCP_CHROME_PROFILE": "<SNAPMCP_CHROME_PROFILE>"
}
}
}
}
Run commandnpx -y snapmcp
Environment variables to set
SNAPMCP_DIROutput directory for captures
SNAPMCP_THEMEShiki syntax highlighting theme (27 built-in themes, auto-detected terminal theme when unset)
SNAPMCP_FORMATOutput image format: png or jpeg
SNAPMCP_QUALITYJPEG quality (1-100, only used for JPEG)
SNAPMCP_SHADOWDrop shadow level: none, soft, medium, strong
SNAPMCP_ALLOWED_PATHSComma- or semicolon-separated allowlist of file paths readable by capture_file (deny-all when unset)
SNAPMCP_SSRF_PROTECTIONBlock requests to private IP ranges (DNS-resolved, IPv4 + IPv6). Default: true
SNAPMCP_CHROME_EXECUTABLEPath to a system Chrome/Chromium binary to use for browser captures
SNAPMCP_CHROME_PROFILEChrome profile directory to use for browser captures (persistent context)

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmsnapmcp2.3.2

Tools

13

Saved tool list · updated 2w ago

ParameterTypeRequiredDescription
linesarrayYesLines to render. '$ ' prefix = command prompt, others = output
titlestringYesWindow title shown in the terminal title bar
outputstringNoOutput filename (default: auto-generated)

Details

From the project README

snapmcp

The visual documentation MCP server.
Terminal · Code · Browser · Markdown · Diff · HTML · PDF · GIF
For documentation workflows — when structured snapshots aren't enough.

npm version npm downloads tests stars MIT


Real terminal colors, Shiki-highlighted code, visual diffs, PDFs and GIFs — one MCP server, 13 tools. Renders with your system Chrome, or auto-installs Chromium at first setup. SSRF protection on by default. Built for agents that write documentation, not just drive browsers.

Quick Start

Three steps, under two minutes:

1. Install

npm install -g snapmcp
# or run without installing: npx -y snapmcp

2. Add to Claude Code (~/.claude/claude.json)

{
  "mcpServers": {
    "snapmcp": {
      "command": "npx",
      "args": ["-y", "snapmcp"],
      "env": {
        "SNAPMCP_DIR": "./captures",
        "SNAPMCP_THEME": "nord"
      }
    }
  }
}

3. Capture

Ask your agent in natural language:

"Capture a terminal screenshot of git log --oneline -5 and a syntax-highlighted PNG of src/index.ts."

The agent calls capture_terminal and capture_file — images land in ./captures/ with your real terminal theme and the chosen syntax theme applied.

Other clients: OpenCode, VS Code / Cline, Docker

OpenCode (opencode.json):

{
  "mcpServers": {
    "snapmcp": {
      "command": "npx",
      "args": ["-y", "snapmcp"],
      "env": {
        "SNAPMCP_DIR": "./captures",
        "SNAPMCP_FORMAT": "jpeg",
        "SNAPMCP_QUALITY": "95"
      }
    }
  }
}

VS Code / Cline / Roo-Cline (settings.json → cline.mcpServers):

{
  "mcpServers": {
    "snapmcp": {
      "command": "npx",
      "args": ["-y", "snapmcp"],
      "env": {
        "SNAPMCP_DIR": "./captures",
        "SNAPMCP_FORMAT": "jpeg"
      }
    }
  }
}

Docker:

docker run -i --rm \
  -e SNAPMCP_DIR=/captures \
  -e SNAPMCP_THEME=nord \
  -v /path/to/output:/captures \
  ghcr.io/reeinharddd/snapmcp

What it looks like

CapturePreview
Terminal (real detected colors)terminal capture
Code (Shiki syntax)code capture
Diff (green/red)diff capture

Why snapmcp vs Playwright MCP

Different tools for different jobs. Playwright MCP drives a browser through token-efficient accessibility snapshots; snapmcp renders pixel-faithful images for humans to read. If your agent needs to click, use Playwright. If it needs to show, use snapmcp.

Use casesnapmcpPlaywright MCP
Terminal capture with real colors✅ auto-detects Kitty, Gnome, Alacritty, WezTerm themes❌ no terminal support
Code → syntax-highlighted image✅ Shiki, 50+ languages, 27 themes❌ not its purpose
Git diff → visual red/green image✅ capture_diff❌
URL → PDF document✅ capture_pdf❌
Animated GIF from captures✅ capture_gif (zero-dep gifenc)❌
Markdown → styled document✅ capture_markdown, capture_document❌
Browser page screenshot✅ capture_browser (full-page or viewport)✅
Browser automation (click, fill, navigate)❌ screenshots only✅ accessibility-tree driven, token-efficient — the right tool for this

Most documentation pipelines pair them: Playwright MCP to interact, snapmcp to document.

Tools

ToolDescription
capture_terminalTerminal output with syntax-colored prompts (auto-detects real terminal theme)
capture_codeSyntax-highlighted code via Shiki (50+ languages, 27 themes)
capture_browserFull-page or viewport screenshots (uses system Chrome profile when available)
capture_fileFile → auto-detected language → highlighted screenshot
capture_markdownRendered markdown as a styled document
capture_htmlArbitrary HTML snippet rendered as image
capture_diffGit diffs with green additions / red deletions
capture_pdfURL → PDF document
capture_batchBatch capture multiple items in one call
capture_gifAnimated GIF from multiple screenshots
capture_sequenceSide-by-side animated sequence
capture_documentCreate document (MD/HTML/PDF) with embedded captures
snapmcp-hintServer capability hints for MCP clients

Use cases

Automated documentation — an agent writes a setup guide and embeds real captures: the terminal output of the install command (with your actual theme), the config file syntax-highlighted, the diff of the migration. One prompt, three capture_* calls, images saved next to the markdown.

Visual QA — after a UI change, the agent captures the affected pages with capture_browser, batches before/after with capture_batch, and assembles an animated comparison with capture_gif for the PR description.

Terminal guides — CLI tutorials where the screenshots must match what readers will see: capture_terminal reproduces the real prompt colors instead of a generic dark rectangle.

Security

SSRF protection is on by default — no opt-in required.

FeatureDescription
SSRF ProtectionOn by default (disable with SNAPMCP_SSRF_PROTECTION=false). Blocks IP literals (v4 + v6), localhost variants, and DNS names that resolve to private ranges (127.0.0.0/8, 10.0.0.0/8, 172.16.0.0/12, 192.168.0.0/16, fc00::/7, fe80::/10, etc.); every page request (redirects included) is re-checked
File AllowlistSNAPMCP_ALLOWED_PATHS defaults to deny-all when unset; only explicitly allowed paths can be captured
Path TraversalPrevents ../ escapes, symlink traversal (via realpath), and null byte injection
Input LimitsTerminal 1000 lines; code/markdown/HTML 200KB; diff 500KB; file reads 5MB; max GIF frames 60; max GIF canvas 8192×8192
Audit LogOptional structured JSON log file with timestamped events
Chromium SandboxSandbox availability checked at startup

Configuration

Environment variables for the MCP server:

VariableDefaultDescription
SNAPMCP_DIR./capturesOutput directory for captures
SNAPMCP_THEMEauto-detectedSyntax theme (27 built-in themes + auto-detected terminal)
SNAPMCP_FORMATpngOutput format (png, jpeg)
SNAPMCP_QUALITY90JPEG quality (1-100)
SNAPMCP_PADDING32Content padding in pixels
SNAPMCP_SHADOWnoneDrop shadow (none, soft, medium, strong; aliases sm/md/lg)
SNAPMCP_WINDOW_CHROMEfalsemacOS-style title bar frame
SNAPMCP_BORDER_RADIUS0Window corner radius
SNAPMCP_BADGEfalseFooter badge
SNAPMCP_LOG_FILE—Audit log file path
SNAPMCP_CHROME_EXECUTABLE—Path to Chrome/Chromium binary
SNAPMCP_CHROME_CHANNEL—Chrome channel (stable, beta, dev, canary)
SNAPMCP_CHROME_PROFILE—Chrome profile directory name
SNAPMCP_ALLOWED_PATHS(deny-all)Comma- or semicolon-separated allowed file paths for capture_file

27 built-in Shiki themes: dracula, one-dark-pro, nord, tokyo-night, catppuccin-mocha, catppuccin-latte, ayu-dark, ayu-light, vitesse-dark, vitesse-light, min-dark, min-light, poimandres, rose-pine, rose-pine-moon, rose-pine-dawn, slack-dark, slack-ochin, snazzy-light, github-dark-dimmed, github-light, one-light, solarized-light, solarized-dark, material-theme, material-theme-lighter, material-theme-ocean

CLI

SnapMCP ships with a full CLI beyond the MCP server:

snapmcp        — Start the MCP server
snapmcp init   — Interactive setup wizard (detects Chrome, terminal theme, output dir)
snapmcp doctor — Health check: 7 checks across Node, Chromium, paths, env
snapmcp test   — Generate test captures (terminal + code) to verify the setup

Documentation

PageContents
Getting StartedInstallation, quick start, MCP client setup
Tools ReferenceAll 13 tools with parameters and examples
ConfigurationAll SNAPMCP_* env vars, themes, defaults
CLI ReferenceInit, doctor, test commands
GuidesTerminal capture, browser capture, GIF animation
ARCHITECTURE.mdModule map, data flow, security architecture
CONTRIBUTING.mdDev workflow, testing guidelines, PR checklist

Development

git clone https://github.com/reeinharddd/snapmcp
cd snapmcp
bun install
bun run build    # tsc → dist/
bun test         # 317 tests

Requirements: Node.js ≥ 20 or Bun ≥ 1.2. CI runs on ubuntu / macOS / windows via GitHub Actions.

License

MIT — see LICENSE.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.