mcpField
S
screenshotink

screenshotink

リモート
screenshotink.comブラウザ自動化020 週間前に更新
リポジトリ公式サイト

screenshotink について

ScreenshotInk は、AI エージェントやチームがウェブページを確認するためのホスト型ブラウザーキャプチャ MCP サーバーです。ローカルブラウザーなしで、スクリーンショット、画像比較、Lighthouse 監査、サイトマップのページ取得を行い、画像を結果に含めます。

主な機能

  1. 01表示領域または全ページの撮影
  2. 02最大20 URLの一括撮影
  3. 03ピクセル差分によるページ比較
  4. 04Lighthouse監査とコアウェブバイタルの取得
  5. 05サイトマップ掲載ページの撮影

活用シーン

  1. 01ステージング環境と本番環境の確認
  2. 02ファネルや競合ページの監査
  3. 03パフォーマンス、アクセシビリティ、SEOの確認
  4. 04サイトマップ掲載ページの一括撮影

MCP 対応

ホスト型エンドポイントまたは @screenshotink/mcp パッケージを通じて、5種類のブラウザーキャプチャツールを MCP クライアントに提供します。結果にはエージェントが確認できるスクリーンショットが含まれます。

設定

リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。

エンドポイントhttps://mcp.screenshotink.com/mcp
インストールコマンドをコピー
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。

パッケージ
npm@screenshotink/mcp1.0.3

ツール

詳細

ScreenshotInk MCP サーバー

npm version MCP license

AI エージェントに目を与えましょう。ScreenshotInk のホスト型 Chromium フリートを通じて、あらゆるウェブページをキャプチャ、まとめて処理、比較、監査する 5 つのツールです。ローカルブラウザーも Puppeteer のメンテナンスも不要で、Claude Desktop、Claude Code、Cursor、Windsurf、CI ランナー、クラウドサンドボックスで動作します。

すべての結果はスクリーンショットを同じターン内にインラインで返すため、エージェントはすぐにピクセルを分析できます。

You:    Compare our pricing page on staging vs production — did the new cards ship?
Agent:  ▸ compare_screenshots { url_a: "https://acme.com/pricing", url_b: "https://staging.acme.dev/pricing" }
        4.7% of pixels differ, all inside the plan grid — the new Scale card is present. Deploy looks correct. ✓

クイックスタート

ScreenshotInk API キーが必要です — 無料で月 100 回キャプチャ可能、カード不要:screenshotink.com/signup

Claude Code
claude mcp add screenshotink -- npx -y @screenshotink/mcp --key sk_live_YOUR_KEY

または、ホスト型リモートサーバーに接続します(ローカルでは何も実行されません)。

claude mcp add --transport http screenshotink https://mcp.screenshotink.com/mcp \
  --header "Authorization: Bearer sk_live_YOUR_KEY"
Claude Desktop

claude_desktop_config.json:

{
  "mcpServers": {
    "screenshotink": {
      "command": "npx",
      "args": ["-y", "@screenshotink/mcp"],
      "env": { "SCREENSHOTINK_API_KEY": "sk_live_YOUR_KEY" }
    }
  }
}
Cursor / Windsurf
{
  "mcpServers": {
    "screenshotink": {
      "command": "npx",
      "args": ["-y", "@screenshotink/mcp", "--key", "sk_live_YOUR_KEY"]
    }
  }
}
リモートサーバー(クラウドエージェント、ホスト型ランタイム、カスタムコネクター)

Streamable HTTP に対応していれば、インストール不要で直接接続できます。 Claude または ChatGPT では、以下の URL を使ってカスタムコネクターとして追加し、OAuth でサインインします。スクリプトや CI では、キーをベアラートークンとして渡します。

URL:   https://mcp.screenshotink.com/mcp
Auth:  OAuth 2.1 (sign in on first use) — or Authorization: Bearer sk_live_YOUR_KEY

ツール

ツール機能
take_screenshot任意の URL をキャプチャします — ビューポートまたは全ページ、png/jpeg/pdf、ダークモード、広告と Cookie バナーのブロック、遅延読み込みへの対応
bulk_screenshots1 回の呼び出しで最大 20 件の URL を処理します — ファネルや競合サイト群をまとめて監査できます
compare_screenshots2 つの URL のピクセル差分を比較します(ステージング対本番、変更前対変更後)— 変更率と差分を強調表示した画像を返します
run_lighthouseGoogle Lighthouse のスコア(パフォーマンス、アクセシビリティ、ベストプラクティス、SEO)と Core Web Vitals
capture_sitemapsitemap.xml を取得し、そこに記載されたすべてのページのスクリーンショットを撮影します

パラメーターとデフォルト値はREST APIと同じです。MCP 経由のキャプチャも REST API と同じ使用枠にカウントされます — キーは 1 つ、使用量メーターも 1 つです。24 時間以内の同一リクエストはキャッシュから無料で提供されます。

ホスト型を選ぶ理由

  • CI パイプライン — ヘッドレス Chrome のインストールや、ランナー上の不安定なブラウザーバイナリーが不要です。
  • クラウドエージェント — ホスト型ランタイムではブラウザーを起動できません。リモートエンドポイントなら、依存関係ゼロでエージェントに目を与えられます。
  • メンテナンス不要 — Chromium のパッチ適用、遅延読み込み、広告、Cookie ウォールへの対応は当社が行います。エージェントはピクセルを要求するだけです。

リンク


MIT © ScreenshotInk — ScalingWeb の製品

コメント

MCP は初めてですか?

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

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