Spec Driven Development
MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.
作者による説明(英語の原文)
Visual capture MCP server: terminal colors, code, diffs, PDFs, GIFs. 13 tools, SSRF on by default.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
SNAPMCP_DIR, SNAPMCP_THEME, SNAPMCP_FORMAT, SNAPMCP_QUALITY, SNAPMCP_SHADOW, SNAPMCP_ALLOWED_PATHS, SNAPMCP_SSRF_PROTECTION, SNAPMCP_CHROME_EXECUTABLE, SNAPMCP_CHROME_PROFILE必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"snapmcp": {
"command": "npx",
"args": [
"-y",
"snapmcp"
],
"env": {
"SNAPMCP_DIR": "your-value",
"SNAPMCP_THEME": "your-value",
"SNAPMCP_FORMAT": "your-value",
"SNAPMCP_QUALITY": "your-value",
"SNAPMCP_SHADOW": "your-value",
"SNAPMCP_ALLOWED_PATHS": "your-value",
"SNAPMCP_SSRF_PROTECTION": "your-value",
"SNAPMCP_CHROME_EXECUTABLE": "your-value",
"SNAPMCP_CHROME_PROFILE": "your-value"
}
}
}
}ターミナルでこれを実行します
claude mcp add snapmcp --env SNAPMCP_DIR=your-value --env SNAPMCP_THEME=your-value --env SNAPMCP_FORMAT=your-value --env SNAPMCP_QUALITY=your-value --env SNAPMCP_SHADOW=your-value --env SNAPMCP_ALLOWED_PATHS=your-value --env SNAPMCP_SSRF_PROTECTION=your-value --env SNAPMCP_CHROME_EXECUTABLE=your-value --env SNAPMCP_CHROME_PROFILE=your-value -- npx -y snapmcp動かす前に、空欄の値を入力してください。
プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"snapmcp": {
"command": "npx",
"args": [
"-y",
"snapmcp"
],
"env": {
"SNAPMCP_DIR": "your-value",
"SNAPMCP_THEME": "your-value",
"SNAPMCP_FORMAT": "your-value",
"SNAPMCP_QUALITY": "your-value",
"SNAPMCP_SHADOW": "your-value",
"SNAPMCP_ALLOWED_PATHS": "your-value",
"SNAPMCP_SSRF_PROTECTION": "your-value",
"SNAPMCP_CHROME_EXECUTABLE": "your-value",
"SNAPMCP_CHROME_PROFILE": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"snapmcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"snapmcp"
],
"env": {
"SNAPMCP_DIR": "your-value",
"SNAPMCP_THEME": "your-value",
"SNAPMCP_FORMAT": "your-value",
"SNAPMCP_QUALITY": "your-value",
"SNAPMCP_SHADOW": "your-value",
"SNAPMCP_ALLOWED_PATHS": "your-value",
"SNAPMCP_SSRF_PROTECTION": "your-value",
"SNAPMCP_CHROME_EXECUTABLE": "your-value",
"SNAPMCP_CHROME_PROFILE": "your-value"
}
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
SNAPMCP_DIR envSNAPMCP_THEME envSNAPMCP_FORMAT envSNAPMCP_QUALITY envSNAPMCP_SHADOW envSNAPMCP_ALLOWED_PATHS envSNAPMCP_SSRF_PROTECTION envSNAPMCP_CHROME_EXECUTABLE envSNAPMCP_CHROME_PROFILE envこの設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント reeinharddd で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(2.3.2)がレジストリに届いたのは3 か月前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。
同じカテゴリには:Spec Driven Development, Remote Desktop Commander, Detailing Manager
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.
Remote Desktop Commander: use files, terminal and processes on your own computers from any AI app.
Connect your auto detailing studio's tasks, cars, clients and revenue to Claude or ChatGPT.
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
The visual documentation MCP server.
Terminal · Code · Browser · Markdown · Diff · HTML · PDF · GIF
For documentation workflows — when structured snapshots aren't enough.
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.
Three steps, under two minutes:
1. Install
npm install -g 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 -5and a syntax-highlighted PNG ofsrc/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
</details>
| Capture | Preview |
|---|---|
| Terminal (real detected colors) | |
| Code (Shiki syntax) | |
| Diff (green/red) |
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 case | snapmcp | Playwright 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*.
| Tool | Description |
|---|---|
capture_terminal | Terminal output with syntax-colored prompts (auto-detects real terminal theme) |
capture_code | Syntax-highlighted code via Shiki (50+ languages, 27 themes) |
capture_browser | Full-page or viewport screenshots (uses system Chrome profile when available) |
capture_file | File → auto-detected language → highlighted screenshot |
capture_markdown | Rendered markdown as a styled document |
capture_html | Arbitrary HTML snippet rendered as image |
capture_diff | Git diffs with green additions / red deletions |
capture_pdf | URL → PDF document |
capture_batch | Batch capture multiple items in one call |
capture_gif | Animated GIF from multiple screenshots |
capture_sequence | Side-by-side animated sequence |
capture_document | Create document (MD/HTML/PDF) with embedded captures |
snapmcp-hint | Server capability hints for MCP clients |
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.
SSRF protection is on by default — no opt-in required.
| Feature | Description |
|---|---|
| SSRF Protection | On 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 Allowlist | SNAPMCP_ALLOWED_PATHS defaults to deny-all when unset; only explicitly allowed paths can be captured |
| Path Traversal | Prevents ../ escapes, symlink traversal (via realpath), and null byte injection |
| Input Limits | Terminal 1000 lines; code/markdown/HTML 200KB; diff 500KB; file reads 5MB; max GIF frames 60; max GIF canvas 8192×8192 |
| Audit Log | Optional structured JSON log file with timestamped events |
| Chromium Sandbox | Sandbox availability checked at startup |
Environment variables for the MCP server:
| Variable | Default | Description |
|---|---|---|
SNAPMCP_DIR | ./captures | Output directory for captures |
SNAPMCP_THEME | auto-detected | Syntax theme (27 built-in themes + auto-detected terminal) |
SNAPMCP_FORMAT | png | Output format (png, jpeg) |
SNAPMCP_QUALITY | 90 | JPEG quality (1-100) |
SNAPMCP_PADDING | 32 | Content padding in pixels |
SNAPMCP_SHADOW | none | Drop shadow (none, soft, medium, strong; aliases sm/md/lg) |
SNAPMCP_WINDOW_CHROME | false | macOS-style title bar frame |
SNAPMCP_BORDER_RADIUS | 0 | Window corner radius |
SNAPMCP_BADGE | false | Footer 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
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
| Page | Contents |
|---|---|
| Getting Started | Installation, quick start, MCP client setup |
| Tools Reference | All 13 tools with parameters and examples |
| Configuration | All SNAPMCP_* env vars, themes, defaults |
| CLI Reference | Init, doctor, test commands |
| Guides | Terminal capture, browser capture, GIF animation |
| ARCHITECTURE.md | Module map, data flow, security architecture |
| CONTRIBUTING.md | Dev workflow, testing guidelines, PR checklist |
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.
MIT — see LICENSE.