Site-Shot

Site-Shot MCP サーバー

Claude、Cursor、その他の AI エージェントが公開ウェブページを確認できるようにします。Site-Shot を使って、Model Context Protocol 経由でウェブサイトのスクリーンショットを撮影します。

実際の Chromium によるレンダリング · ページ全体のキャプチャ · 国別プロキシ · 広告と Cookie バナーの自動除去 （画像がすっきりし、ビジョントークンの使用量を削減できます）。

Site-Shot API キーが必要で、有料の Site-Shot API プランへの加入が必要です。キャプチャでは、そのアカウントの既存の API 利用枠と制限が適用されます。キーは Site-Shot ダッシュボードから取得できます。料金 ページでプランを確認できます。アカウント登録なしで利用できるブラウザーツール https://www.site-shot.com/ は出力品質の確認用であり、キーは発行されません。

Claude Code（プラグイン）

このリポジトリは Claude Code プラグインマーケットプレイスも兼ねています。このプラグインは公開済みの site-shot-mcp パッケージを stdio 経由で実行し、API キーを必須の機密設定として宣言します。そのため、Claude Code がキーの入力を求めます。このリポジトリや設定ファイル、チャットメッセージに貼り付ける必要はありません。

インストール

claude plugin marketplace add site-shot/site-shot-mcp
claude plugin install site-shot@site-shot

または、セッション内で次を実行します。

/plugin marketplace add site-shot/site-shot-mcp
/plugin install site-shot@site-shot

どちらの方法も GitHub からマーケットプレイスを解決するため、これらのマニフェストがリポジトリの公開デフォルトブランチに公開された後にのみ動作します。ローカルブランチや、まだプッシュしていないフォークからはインストールできません。

その前に試す

1 回のセッションでプラグインディレクトリを読み込みます。

claude --plugin-dir /absolute/path/to/site-shot-mcp/plugins/site-shot

重要な点が 2 つあります。絶対パスを指定してください。--plugin-dir はセッションの作業ディレクトリを基準に解決されます。また、そのセッションは通常のプロジェクトディレクトリから開始し、このチェックアウトからは開始しないでください。このリポジトリ自体が site-shot-mcp パッケージであるため、npm がローカルでパッケージ名を解決し、リンクされたバイナリが見つからず、Claude Code に認識される前にサーバーが sh: site-shot-mcp: command not found で終了します。関係のないディレクトリからなら、npx が公開済みパッケージを取得して通常どおり起動します。両方の方法で確認済みです。このチェックアウトでは終了コード 127、空のディレクトリでは stdio が正常に起動しました。

代わりに、マーケットプレイスの解決、マニフェスト、必須設定を含む実際のインストール手順を試すには、チェックアウト自体をマーケットプレイスとして追加します。

claude plugin marketplace add /absolute/path/to/site-shot-mcp
claude plugin install site-shot@site-shot

ユーザースコープにインストールされます。元に戻すには、claude plugin uninstall site-shot@site-shot と claude plugin marketplace remove site-shot を実行します。

API キー

プラグインは SITESHOT_API_KEY を必須の機密設定として宣言します。Claude Code はキーの入力を求め、入力中は値をマスクし、サーバーの環境変数に ${user_config.SITESHOT_API_KEY} として設定します。値の保存は Claude Code が管理します。

キーなしでインストールしてもエラーにはなりません。Claude Code は未設定の項目として記録します （1 userConfig option not yet set (1 required)）。マスクされたプロンプトからキーを設定してください。

/plugin configure site-shot@site-shot

キャプチャを実行する前に設定してください。サーバーにキーを渡すのはこの設定です。設定が未入力のときに Claude Code がどう動作するか（サーバーを起動するか、ツールを提示するかなど）は Claude Code 自体の動作であり、ここでの観察に基づいて説明する内容ではありません。

サーバー側の動作はそれとは独立しています。キーを指定せずに stdio 経由で直接実行した場合でも、サーバーは起動し、stderr に警告を出力します。キャプチャツールは画像の代わりに、キーがないことを示す明確なエラーを返します。

このプラグインは、1 つのスキル（site-shot:website-screenshots）と、以下に記載する 2 つのキャプチャツールを追加します（ツール）。フック、モニター、スケジュール済みのキャプチャジョブは宣言しません。起動するプロセスは、宣言された stdio MCP サーバーのみです。

Codex CLI（プラグイン）

このリポジトリは Codex プラグインマーケットプレイスも兼ねています。Claude Code と同じプラグインディレクトリをインストールします。共有されるスキルは 1 つで、stdio 経由で同じ固定バージョンの [email protected] を使用します。2 つのホストでは認証情報の接続方法が異なるため、マニフェストはそれぞれ別に用意されています。

インストール

codex plugin marketplace add site-shot/site-shot-mcp
codex plugin add site-shot@site-shot

macOS（arm64）上の Codex CLI 0.147.0 で動作確認しています。Claude Code と同様に、GitHub からマーケットプレイスを参照するため、これらのマニフェストが公開されているデフォルトブランチに置かれてからでないと動作しません。それまでは、codex plugin marketplace add にローカルのチェックアウトパスを指定してください。

インストールされていることと、設定が完了していることは同じではなく、どちらもキャプチャの成功を意味するものではありません。インストールによってマニフェストが配置されるだけです。サーバーには以下のキーが必要で、キャプチャには利用枠が残っている Site-Shot プランが必要です。

API キー

Codex は、プラグインの記述子で指定された変数を渡します。

{ "command": "npx", "args": ["-y", "[email protected]"], "env_vars": ["SITESHOT_API_KEY"] }

env_vars は値ではなく、名前の許可リストです。この記述子にも、以下のコマンドにも、後述する手動の config.toml エントリーにもキーは含まれていません。Codex を起動するセッションの環境にキーを設定してください。

macOS のデフォルトシェルは zsh です。zsh では read -p を実行するとプロンプトが表示されず、コプロセスが起動します。また、コードフェンスに bash と書かれていても、貼り付け先のシェルは変わりません。bash を明示的に起動してください。

bash -c 'read -r -s -p "Site-Shot API key: " SITESHOT_API_KEY && printf "\n" && export SITESHOT_API_KEY && exec codex'

-s によりキーは画面に表示されず、ここでキーが argv に入ることもありません。また、export の有効範囲はその子セッション内に限られるため、入力元のシェルに残り続けることもありません。

この方法では、別の方法で起動する Codex は設定されません。デスクトップランチャーやリモートセッションはそれぞれ独自の環境から開始されるため、そこでキーを設定しない限り、キーなしでサーバーが実行されます。

手動で MCP を設定する場合

プラグインをインストールしたくない場合は、同じ stdio サーバーを手動で設定できます。これはプラグインに追加するものではなく、代替手段です。両方を実行すると、同じサーバーに対して設定が2つ作られます。どちらか一方を選んでください。

[mcp_servers.site-shot]
command = "npx"
args = ["-y", "[email protected]"]
env_vars = ["SITESHOT_API_KEY"]

codex mcp add site-shot -- npx -y [email protected] を実行すると、このエントリーが作成されます。env_vars は後から追加してください。codex mcp add --env KEY=VALUE を使うと、キーがファイルに平文で保存されるためです。codex mcp get site-shot で確認してください。このようなエントリーがすでにあり、今回プラグインをインストールする場合は、手動で作成したエントリーを codex mcp remove site-shot で明示的に削除してください。ここでは設定は編集されません。

どちらの方法でも、Claude Code のセクションで説明した注意点が当てはまります。エントリーに cwd を設定しない限り、Codex は実行した場所からサーバーを起動するため、このリポジトリ内で実行すると、同じローカル名の衝突が発生します。

Claude Desktop とその他の MCP クライアント

1. https://www.site-shot.com/start/ で Site-Shot API キーを取得します。
2. Claude Desktop の設定（claude_desktop_config.json）に以下を追加します。

{
  "mcpServers": {
    "site-shot": {
      "command": "npx",
      "args": ["-y", "site-shot-mcp"],
      "env": { "SITESHOT_API_KEY": "YOUR_API_KEY" }
    }
  }
}

3. Claude Desktop を再起動します。"https://news.ycombinator.com" の全ページのスクリーンショットを撮ってと依頼すると、サーバーが呼び出され、画像が表示されます。

どの MCP クライアント（Cursor、Cline、VS Code、LangChain、CrewAI）でも同様に動作します。クライアントから、環境に SITESHOT_API_KEY を設定したうえで npx -y site-shot-mcp を指定してください。

上記のすべての統合では、npm と公式 MCP Registry で公開されている同じローカル stdio サーバーが実行されます。ホスト型 HTTPS MCP は別のデプロイ方法であり、クライアント互換性の経路も異なります。これらのプラグインインストールコマンドでは設定されません。ここでの公開は、共有の ChatGPT／Codex 公開プラグインディレクトリや、Claude のリモートコネクタディレクトリへの掲載を意味するものではありません。

ツール

2つのツールがあり、どちらもスクリーンショットを MCP 画像として返します。保存ライブラリ、一覧表示、Markdown 変換、スケジュール設定はありません。このサーバーは画像をキャプチャして返すだけです。

capture_screenshot

Web ページのスクリーンショットを撮影します（デフォルトではビューポート）。

Param	Type	Default	Notes
url	string (required)	—	撮影するページ
full_page	boolean	false	スクロール可能なページ全体を撮影します
width / height	number	API default	ビューポート／デバイスのサイズ
format	"png" | "jpeg" | "webp"	png	画像形式。webp は可逆形式で、中央値のページでは png より約 35% 小さくなります。1 辺あたり最大 16,383 px です
block_ads	boolean	true	広告を削除します
block_cookie_banners	boolean	true	Cookie 同意ポップアップを削除します
country	string	—	2 文字の ISO 3166-1 alpha-2 コードで指定するプロキシの国。例："DE"（IP／言語／タイムゾーン／位置情報を自動設定）
strict_country	boolean	true	指定した国のプロキシがない場合、米国にフォールバックせずエラーにします
language / time_zone / geolocation	string	—	手動で上書きする設定
wait_ms	number	API default	撮影前の追加待機時間（SPA／アニメーション向け）
max_height	number	20000 (full page)	撮影する高さの上限

スクリーンショットを MCP 画像として返します。

「API default」は、このパッケージが値を指定できる数値ではありません。 width、height、wait_ms は指定された場合にのみ渡されるため、指定しなかった場合に適用される値は Site-Shot API 側で決まり、このリリース後に変更される可能性があります。バージョン 1.1.0 以前では、API が使用しない width／height のピクセルサイズを表示していました。これらを省略して「デフォルト」で撮影したエージェントは、異なるビューポートを取得しても、返された画像からはその違いを確認できませんでした。サイズが重要な場合は、明示的な値を指定してください。

国コードには ISO コードを指定してください。国名は使えません。 "Germany" ではなく "DE" を指定してください。API はコードを完全一致で照合するため、そうしないと通知なしに米国のプロキシ経由で描画されます。そのため、サーバーは描画を開始する前に国名を拒否します。strict_country（デフォルトで有効）も同様に、利用できない国を指定すると、米国のスクリーンショットを黙って返すのではなくエラーにします。フォールバックを再度有効にするには false を指定してください。対応している国 →

capture_full_page

capture_screenshot と同じですが、ページ全体を撮影します。

エージェント自身のブラウザーではなく、このサーバーを呼び出す理由

エージェントがブラウザーを操作する場合、ページのスクリーンショットを自分で撮影できます。ログインが必要なページや、手順を進める必要があるフローでは、それが適切なツールです。公開 URL の場合は、撮影をこのサーバーに委任するほうが、通常は効率的です。毎回同じパイプラインで撮影されるため（実行ごとの再計画が不要です）、ロケールとタイムゾーンを合わせた特定の国から撮影でき（country + strict_country）、返却前に段階的に再試行する仕組みを備えた画像分類器で評価されます。また、表示のたびにブラウザーセッションとビジョントークンを使うのではなく、1 セント未満のコストで済みます。両方の立場から率直に比較した詳細はこちらをご覧ください： AI エージェント対スクリーンショット API — ページを撮影すべきなのはどちらか。

設定

Env var	Required	Description
SITESHOT_API_KEY	はい	Site-Shot API キー（userkey として使用）。

このサーバーは既存の Site-Shot HTTP API（https://api.site-shot.com/）を薄くラップしたもので、別のバックエンドはありません。

ローカル開発

npm install
npm run check            # syntax check
npm run smoke            # offline tests (stubbed fetch, no API key needed)
node test/integration.mjs  # real stdio handshake against the local source
npm run test:plugin      # plugin/marketplace metadata tests
npm run validate:plugin  # claude plugin validate --strict (needs the claude CLI)
SITESHOT_API_KEY=yourkey npm start   # run the server on stdio

要件

Node.js ≥ 18（組み込みの fetch を使用します）。

ライセンス

MIT