mcpField
G
getsnap

getsnap

ローカル
github.com/rokas-kveブラウザ自動化05 日前に更新
リポジトリ

getsnap について

getsnapは、Claudeなどのエージェント向けに、ウェブページのキャプチャ、ページ比較、アクセシビリティ監査を行うMCPサーバーです。スクリーンショットや差分画像をインラインで返し、ページの表示状態を直接確認できます。

主な機能

  1. 01ウェブページのスクリーンショットをインライン表示
  2. 02ページからPDFを生成
  3. 03差分オーバーレイでページを比較
  4. 04WCAGのアクセシビリティ違反を監査
  5. 05残りのAPIクレジットを確認
  6. 06Cookieバナーと広告オーバーレイを標準で除去

活用シーン

  1. 01モバイルページの要素の重なりを確認
  2. 02ステージングと本番のページレイアウトを比較
  3. 03ウェブサイトのアクセシビリティ問題を特定
  4. 04残りのキャプチャクレジットを確認

MCP 対応

getsnapは、スクリーンショット、PDF、ページ比較、アクセシビリティ監査、利用状況確認のツールをMCPクライアントに提供します。`npx`で実行し、getSnap APIキーが必要です。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "dev-getsnap-getsnap": {
      "command": "npx",
      "args": [
        "-y",
        "getsnap-mcp"
      ],
      "env": {
        "GETSNAP_API_KEY": "<GETSNAP_API_KEY>"
      }
    }
  }
}
起動コマンドnpx -y getsnap-mcp
設定が必要な環境変数
GETSNAP_API_KEYシークレットgetSnap.dev API key. Free tier is 100 captures a month at https://getsnap.dev

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmgetsnap-mcp1.14.5

ツール

5

掲載時のツール一覧 · 4 日前に更新

パラメーター型必須説明
urlstringはいキャプチャするページ
delayintegerいいえ読み込み後、遅れて表示されるコンテンツのために追加で待機する時間（ミリ秒）
deviceenumいいえdesktop | mobile | tablet
formatenumいいえjpeg は大幅にサイズが小さく、通常はレイアウトを読むのに十分ですpng | jpeg | webp
full_pagebooleanいいえビューポートだけでなく、スクロール可能なページ全体を撮影します
return_imagebooleanいいえfalse にすると CDN URL のみを返し、大きなキャプチャ結果がコンテキストウィンドウを占有しません
viewport_widthintegerいいえ
viewport_heightintegerいいえ

詳細

getsnap-mcp

getSnap.dev の公式 MCP サーバーです。Claude やその他のエージェントが、ウェブページをキャプチャしたり、2つのページを比較したり、アクセシビリティを監査したりできるようにします。

キャプチャツールが返すのはリンクではなく、画像そのものです。モデルはリクエストしたページをそのまま確認できるため、「これをスクリーンショットして、問題がないか教えて」と1回のやり取りで依頼できます。

インストール

インストールは不要です。クライアントが npx で実行します。

getsnap.dev で無料の API キーを取得できます。月に100回までキャプチャでき、カード登録も不要です。

Claude Code
claude mcp add getsnap --env GETSNAP_API_KEY=sk_live_... -- npx -y getsnap-mcp
Claude Desktop

claude_desktop_config.json：

{
  "mcpServers": {
    "getsnap": {
      "command": "npx",
      "args": ["-y", "getsnap-mcp"],
      "env": { "GETSNAP_API_KEY": "sk_live_..." }
    }
  }
}

同じ設定ブロックは、stdio 経由で MCP を利用するすべてのクライアントで使えます。

ツール

ツールクレジット戻り値
capture_screenshot1画像をインラインで返します
capture_pdf1リンクを返します。PDF はモデルに表示できません
compare_pages2類似度スコアと差分オーバーレイをインラインで返します
audit_accessibility1重大度別の WCAG 違反
check_usage0使用済みおよび残りのクレジット

キャプチャでは、Cookie バナーと広告オーバーレイがデフォルトで削除されます。 キャッシュされたレスポンスは無料で、キャッシュ済みであることが示されます。

知っておくとよいこと

大きな画像はインライン表示されません。 約1.5 MBを超える場合でもキャプチャ自体は実行され、CDN に保存されますが、ツールはリンクを返し、その理由を伝えます。長いページの full_page キャプチャは通常このサイズを超えるため、インライン表示するには format: "jpeg" または full_page: false を指定してください。

**キャプチャごとにクレジットを消費します。**そのため、各ツールの説明にはコストが記載されています。ツールを呼び出すか判断するエージェントが、実行前にコストを確認できるようになっています。

**compare_pages は2クレジットを消費します。**URL ごとにブラウザーを起動するためです。

設定

変数必須デフォルト
GETSNAP_API_KEYはい—
GETSNAP_BASE_URLいいえhttps://api.getsnap.dev

キーが設定されていない場合は、起動後の初回利用時に失敗するのではなく、キーの取得先を説明するメッセージを表示してサーバーをすぐに終了します。

使用例

接続したら、エージェントに自然な言葉で尋ねてください。

  • 「モバイルで stripe.com をスクリーンショットして、何か重なっていないか教えてください。」
  • 「ステージングサイトと本番環境を比較して、変更箇所を見せてください。」
  • 「example.com のアクセシビリティを監査し、重大な問題を一覧にしてください。」
  • 「getSnap のクレジットはあといくつ残っていますか？」

リンク

バージョン管理

このパッケージは、getSnap REST API、Node SDK、Python SDK とは独立してバージョン管理されています。1.14.3 まではこれらと同じバージョン番号を共有していましたが、API のモノレポからこのリポジトリに移行した際に独立し、以降は独自のスケジュールでリリースしています。

MIT ライセンスです。問題の報告先：[email protected]。

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。