snapmcp
真实的终端配色、Shiki 高亮代码、可视化 diff、PDF 和 GIF——一个 MCP 服务器,13 个工具,零重型依赖。SSRF 防护默认开启。专为编写文档的智能体而构建,而不仅仅是驱动浏览器。
快速开始
三步,两分钟内完成:
1. 安装
npm install -g snapmcp
# or run without installing: npx -y snapmcp2. 添加到 Claude Code(~/.claude/claude.json)
{
"mcpServers": {
"snapmcp": {
"command": "npx",
"args": ["-y", "snapmcp"],
"env": {
"SNAPMCP_DIR": "./captures",
"SNAPMCP_THEME": "nord"
}
}
}
}3. 捕获
用自然语言向你的智能体提问:
"捕获
git log --oneline -5的终端截图,以及src/index.ts的语法高亮 PNG。"
智能体会调用 capture_terminal 和 capture_file——图片会保存到 ./captures/ 目录,并应用你的真实终端主题和所选语法主题。
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/snapmcpRelated MCP server: @tscafejr/mcp
效果预览
由 snapmcp 生成的真实截图:
捕获类型 | 预览 |
终端(真实检测到的配色) | |
代码(Shiki 语法高亮) | |
Diff(绿/红) | |
Markdown 渲染 |
为什么选择 snapmcp 而非 Playwright MCP
不同的工具适用于不同的任务。Playwright MCP 通过 token 高效的无障碍快照驱动浏览器;snapmcp 则渲染像素级保真的图像供人类阅读。如果你的智能体需要点击,请使用 Playwright。如果需要展示,请使用 snapmcp。
使用场景 | snapmcp | Playwright MCP |
真实配色的终端捕获 | ✅ 自动检测 Kitty、Gnome、Alacritty、WezTerm 主题 | ❌ 不支持终端 |
代码 → 语法高亮图片 | ✅ Shiki,50+ 种语言,27 种主题 | ❌ 非其用途 |
Git diff → 可视化红绿图片 | ✅ | ❌ |
URL → PDF 文档 | ✅ | ❌ |
从捕获生成动画 GIF | ✅ | ❌ |
Markdown → 样式化文档 | ✅ | ❌ |
浏览器页面截图 | ✅ | ✅ |
浏览器自动化(点击、填写、导航) | ❌ 仅截图 | ✅ 无障碍树驱动、token 高效——这才是正确的工具 |
大多数文档流水线会同时使用两者:Playwright MCP 负责交互,snapmcp 负责记录。
工具
工具 | 描述 |
| 带语法着色提示符的终端输出(自动检测真实终端主题) |
| 通过 Shiki 进行语法高亮的代码(50+ 种语言,27 种主题) |
| 整页或视口截图(可用时使用系统 Chrome 配置文件) |
| 文件 → 自动检测语言 → 高亮截图 |
| 将 Markdown 渲染为样式化文档 |
| 将任意 HTML 片段渲染为图片 |
| Git diff,绿色表示新增 / 红色表示删除 |
| URL → PDF 文档 |
| 一次调用批量捕获多个项目 |
| 从多张截图生成动画 GIF |
| 并排动画序列 |
| 多章节 Markdown 文档渲染 |
| 面向 MCP 客户端的服务器能力提示 |
使用场景
自动化文档——智能体编写安装指南并嵌入真实捕获:安装命令的终端输出(使用你的实际主题)、语法高亮的配置文件、迁移的 diff。一个提示词,三次 capture_* 调用,图片保存到 markdown 旁边。
可视化 QA——UI 变更后,智能体使用 capture_browser 捕获受影响的页面,使用 capture_batch 批量处理前后对比,并使用 capture_gif 为 PR 描述生成动画对比。
终端教程——CLI 教程中截图必须与读者实际看到的一致:capture_terminal 重现真实的提示符配色,而不是一个通用的深色矩形。
安全性
SSRF 防护默认开启——无需额外配置。
功能 | 描述 |
SSRF 防护 | 默认开启(可通过 |
文件白名单 |
|
路径穿越防护 | 阻止 |
输入限制 | 终端 1000 行;代码/Markdown/HTML 200KB;diff 500KB;文件读取 5MB;最大 GIF 帧数 60;最大 GIF 画布 8192×8192 |
审计日志 | 可选的带时间戳事件的结构化 JSON 日志文件 |
Chromium 沙箱 | 启动时检查沙箱可用性 |
配置
MCP 服务器的环境变量:
变量 | 默认值 | 描述 |
|
| 截图输出目录 |
| 自动检测 | 语法主题(27 个内置主题 + 自动检测终端) |
|
| 输出格式( |
|
| JPEG 质量(1-100) |
|
| 内容内边距(像素) |
|
| 投影( |
|
| macOS 风格标题栏边框 |
|
| 窗口圆角半径 |
|
| 页脚徽章 |
| — | 审计日志文件路径 |
| — | Chrome/Chromium 可执行文件路径 |
| — | Chrome 渠道( |
| — | Chrome 配置文件目录名称 |
| (默认拒绝) | 以逗号或分号分隔的允许文件路径,供 |
27 个内置 Shiki 主题: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 除 MCP 服务器外,还附带完整的 CLI:
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文档
页面 | 内容 |
安装、快速上手、MCP 客户端配置 | |
全部 13 个工具的参数及示例 | |
所有 SNAPMCP_* 环境变量、主题、默认值 | |
init、doctor、test 命令 | |
终端截图、浏览器截图、GIF 动画 | |
模块结构、数据流、安全架构 | |
开发工作流、测试指南、PR 检查清单 |
开发
git clone https://github.com/reeinharddd/snapmcp
cd snapmcp
bun install
bun run build # tsc → dist/
bun test # 317 tests要求:Node.js ≥ 20 或 Bun ≥ 1.2。CI 通过 GitHub Actions 在 ubuntu / macOS / windows 上运行。
许可证
MIT — 见 LICENSE。
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- AlicenseAqualityAmaintenanceA self-hosted MCP server that fetches live documentation and performs code audits using real-time authoritative references to prevent AI hallucinations. It provides tools for searching documentation across 330+ libraries and scanning local source code for security, performance, and accessibility issues.146015Elastic 2.0
- AlicenseBqualityDmaintenanceA collection of MCP servers distributed as a single npm package, including mcp-visualizer which uses Puppeteer for screenshots, typing, and network/console diagnostics on any web framework.320MIT
- AlicenseNot gradedqualityDmaintenanceAn MCP server that fixes, validates, and generates visual text content for AI coding assistants.MIT
- AlicenseBqualityBmaintenanceMCP server providing 26 visual tools for text-only LLMs, enabling description, coordinate location, OCR, annotation, cropping/zooming, anomaly scanning, and computer control with switchable VLM backends.278MIT
Related MCP Connectors
MCP server for doc2mcp documentation, generated by doc2mcp.
A MCP server built for developers enabling Git based project management with project and personal…
Augments MCP Server - A comprehensive framework documentation provider for Claude Code
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/reeinharddd/snapmcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server