snapmcp

ビジュアルドキュメント用 MCP サーバー。
ターミナル · コード · ブラウザー · Markdown · 差分 · HTML · PDF · GIF
ドキュメント作成ワークフロー向け — 構造化スナップショットだけでは不十分な場合に。

実際のターミナルカラー、Shiki によるコードのハイライト、ビジュアル差分、PDF、GIF — 1 つの MCP サーバーに 13 個のツールを搭載しています。システムの Chrome でレンダリングするか、初回セットアップ時に Chromium を自動インストールします。SSRF 保護はデフォルトで有効です。ブラウザーを操作するだけでなく、ドキュメントを作成するエージェント向けに構築されています。

クイックスタート

2 分以内で完了する 3 つのステップです。

1. インストール

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

2. 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/ に保存され、実際のターミナルテーマと選択した構文テーマが適用されます。

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

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

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

表示例

キャプチャ	プレビュー
ターミナル（検出された実際のカラー）
コード（Shiki の構文ハイライト）
差分（緑／赤）

Playwright MCP と snapmcp の違い

用途に応じて異なるツールを使います。Playwright MCP はトークン効率に優れたアクセシビリティスナップショットを通じてブラウザーを操作し、snapmcp は人が読めるピクセル忠実な画像をレンダリングします。エージェントに クリック させる必要がある場合は Playwright を使います。見せる 必要がある場合は snapmcp を使います。

多くのドキュメント作成パイプラインでは、両者を組み合わせて使います。Playwright MCP で 操作 し、snapmcp で ドキュメント化 します。

ツール

ユースケース

ドキュメントの自動作成 — エージェントがセットアップガイドを作成し、実際のキャプチャを埋め込みます。インストールコマンドのターミナル出力（実際のテーマを使用）、構文ハイライト付きの設定ファイル、移行の差分などです。1 つのプロンプトで capture_* を 3 回呼び出し、画像を Markdown ファイルの隣に保存します。

ビジュアル QA — UI の変更後、エージェントが capture_browser で対象ページをキャプチャし、capture_batch で変更前と変更後をまとめ、capture_gif で PR の説明に使うアニメーション比較を作成します。

ターミナルガイド — 読者が実際に見る画面と一致させる必要がある CLI チュートリアルでは、capture_terminal が汎用的な暗い四角形ではなく、実際のプロンプトの色を再現します。

セキュリティ

SSRF 保護はデフォルトで有効です。有効化するための追加設定は不要です。

設定

MCP サーバーの環境変数：

Shiki の組み込みテーマ27種類：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

ドキュメント

開発

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 を参照してください。