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.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม 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": "ใส่ค่าของคุณ",
"SNAPMCP_THEME": "ใส่ค่าของคุณ",
"SNAPMCP_FORMAT": "ใส่ค่าของคุณ",
"SNAPMCP_QUALITY": "ใส่ค่าของคุณ",
"SNAPMCP_SHADOW": "ใส่ค่าของคุณ",
"SNAPMCP_ALLOWED_PATHS": "ใส่ค่าของคุณ",
"SNAPMCP_SSRF_PROTECTION": "ใส่ค่าของคุณ",
"SNAPMCP_CHROME_EXECUTABLE": "ใส่ค่าของคุณ",
"SNAPMCP_CHROME_PROFILE": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add snapmcp --env SNAPMCP_DIR='ใส่ค่าของคุณ' --env SNAPMCP_THEME='ใส่ค่าของคุณ' --env SNAPMCP_FORMAT='ใส่ค่าของคุณ' --env SNAPMCP_QUALITY='ใส่ค่าของคุณ' --env SNAPMCP_SHADOW='ใส่ค่าของคุณ' --env SNAPMCP_ALLOWED_PATHS='ใส่ค่าของคุณ' --env SNAPMCP_SSRF_PROTECTION='ใส่ค่าของคุณ' --env SNAPMCP_CHROME_EXECUTABLE='ใส่ค่าของคุณ' --env SNAPMCP_CHROME_PROFILE='ใส่ค่าของคุณ' -- npx -y snapmcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"snapmcp": {
"command": "npx",
"args": [
"-y",
"snapmcp"
],
"env": {
"SNAPMCP_DIR": "ใส่ค่าของคุณ",
"SNAPMCP_THEME": "ใส่ค่าของคุณ",
"SNAPMCP_FORMAT": "ใส่ค่าของคุณ",
"SNAPMCP_QUALITY": "ใส่ค่าของคุณ",
"SNAPMCP_SHADOW": "ใส่ค่าของคุณ",
"SNAPMCP_ALLOWED_PATHS": "ใส่ค่าของคุณ",
"SNAPMCP_SSRF_PROTECTION": "ใส่ค่าของคุณ",
"SNAPMCP_CHROME_EXECUTABLE": "ใส่ค่าของคุณ",
"SNAPMCP_CHROME_PROFILE": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"snapmcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"snapmcp"
],
"env": {
"SNAPMCP_DIR": "ใส่ค่าของคุณ",
"SNAPMCP_THEME": "ใส่ค่าของคุณ",
"SNAPMCP_FORMAT": "ใส่ค่าของคุณ",
"SNAPMCP_QUALITY": "ใส่ค่าของคุณ",
"SNAPMCP_SHADOW": "ใส่ค่าของคุณ",
"SNAPMCP_ALLOWED_PATHS": "ใส่ค่าของคุณ",
"SNAPMCP_SSRF_PROTECTION": "ใส่ค่าของคุณ",
"SNAPMCP_CHROME_EXECUTABLE": "ใส่ค่าของคุณ",
"SNAPMCP_CHROME_PROFILE": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
SNAPMCP_DIR envSNAPMCP_THEME envSNAPMCP_FORMAT envSNAPMCP_QUALITY envSNAPMCP_SHADOW envSNAPMCP_ALLOWED_PATHS envSNAPMCP_SSRF_PROTECTION envSNAPMCP_CHROME_EXECUTABLE envSNAPMCP_CHROME_PROFILE envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub reeinharddd ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (2.3.2) เข้า registry 3 เดือนที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย
ในหมวดเดียวกันมี Spec Driven Development, Remote Desktop Commander, Python MCP
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
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.
Local-only Python MCP server for the Files.com API.
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ 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.