Skip to main content
Glama
Sign In
enesjakozh

Safari Screenshot MCP Server

by rogerheykoop
npmGitHub
TypeScript
MIT License
7
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

Safariのスクリーンショット

macOS 上の Safari を使用してスクリーンショットをキャプチャするための Node.js MCP サーバー。

特徴

  • 特定のサイズでウィンドウのスクリーンショットをキャプチャする
  • さまざまなズームレベルのサポート
  • ページ読み込みの待機時間を設定可能
  • 捕獲後のクリーンアップ
  • ネイティブmacOSのスクリーンショット品質

使用法

import { takeScreenshot } from './screenshot.js'; // Basic window screenshot await takeScreenshot({ url: 'https://www.apple.com', outputPath: './screenshot.png', width: 1024, // Optional: window width (default: 1024) height: 768, // Optional: window height (default: 768) waitTime: 3, // Optional: seconds to wait for load (default: 3) zoomLevel: 1, // Optional: page zoom level (default: 1) }); // Responsive design testing await takeScreenshot({ url: 'https://www.apple.com', outputPath: './mobile.png', width: 375, // iPhone SE width height: 667, // iPhone SE height zoomLevel: 1, }); // High-resolution capture await takeScreenshot({ url: 'https://www.apple.com', outputPath: './desktop-hd.png', width: 1920, // Full HD width height: 1080, // Full HD height waitTime: 5, // Wait longer for HD content zoomLevel: 0.8, // Zoom out slightly });

要件

  • macOS
  • サファリ
  • Node.js >= 14.0.0
  • ターミナルにはアクセシビリティ権限が必要です（システム環境設定→セキュリティとプライバシー→プライバシー→アクセシビリティ）

インストール

npm install safari-screenshot

オプション

オプションタイプデフォルト説明
URL弦必須キャプチャするURL
出力パス弦自動車スクリーンショットを保存する場所（デフォルト: ./screenshots/[hostname]-[timestamp].png）
幅番号1024ウィンドウの幅（ピクセル単位）
身長番号768ウィンドウの高さ（ピクセル単位）
待機時間番号3ページの読み込みを待つ秒数
ズームレベル番号1ページのズームレベル（1 = 100%）

一般的なビューポートサイズ

モジュールは、次の一般的なビューポート サイズでテストされています。

  • デスクトップ: 1920×1080 (フルHD)
  • ノートパソコン: 1366×768
  • タブレット横向き: 1024×768
  • タブレット縦向き: 768×1024
  • モバイル ラージ: 428×926 (iPhone 12 Pro Max)
  • モバイルミディアム: 390×844 (iPhone 12 Pro)
  • モバイル小: 375×667 (iPhone SE)

仕組み

  1. 指定されたウィンドウサイズでSafariを開きます
  2. URLを読み込み、ページの読み込みを待ちます
  3. 指定された場合はズームレベルを適用します
  4. ネイティブmacOSスクリーンキャプチャを使用してピクセルパーフェクトな結果を実現
  5. スクリーンショットが正常にキャプチャされたことを確認します
  6. Safariウィンドウをクリーンアップします

権限

このパッケージが動作するにはシステム イベント権限が必要です:

  1. システム環境設定 > セキュリティとプライバシー > プライバシー > アクセシビリティを開く
  2. 許可されたアプリのリストにターミナル（またはIDE）を追加します

カーソルの使用

カーソルで設定

  1. オープンカーソル
  2. 設定に移動し、「MCPサーバーを追加」
  3. 構成ダイアログで:
    • 名前: safari-screenshot
    • タイプ: command
    • コマンド: npx -y @rogerheykoop/mcp-safari-screenshot

    またはローカル開発の場合:

    • コマンド: npx -y /path/to/mcp-safari-screenshot/server.js

コマンド例

Cursor でサーバーに接続した後、次のコマンドを使用できます。

Take a screenshot of https://apple.com at desktop size

回答: 1920×1080でキャプチャします

Capture https://apple.com on iPhone 12 Pro

回答: 390×844でキャプチャします

Screenshot github.com at 50% zoom

応答:zoomLevel:0.5 でキャプチャします

サポートされているパラメータ

MCP サーバーは次の概念を理解します。

  • デバイス名（例：「iPhone」、「iPad」、「デスクトップ」）
  • サイズ（例：「1024x768」）
  • ズームレベル（例：「50% ズーム」、「2 倍ズーム」）
  • 待ち時間（例：「5秒お待ちください」）

ワークフローの例

  1. レスポンシブテスト
    Take screenshots of apple.com on iPhone, iPad, and desktop
  2. ズームテスト
    Capture github.com at 75% zoom and 125% zoom
  3. カスタムサイズ
    Screenshot example.com at 1440x900

ヒント

  • スクリーンショットはデフォルトでscreenshotsディレクトリに保存されます
  • デバイス名は適切な寸法を自動的に設定します
  • サーバーはSafariウィンドウのクリーンアップを処理します
  • 読み込みが遅いページには「X秒待つ」を使用してください

トラブルシューティング

問題が発生した場合:

  1. ターミナルにアクセシビリティ権限があるか確認する
  2. Safariがプライベートブラウジングモードになっていないことを確認する
  3. 作業ディレクトリが書き込み可能であることを確認する
  4. カーソルのコンソールでエラーメッセージを確認してください

ライセンス

マサチューセッツ工科大学

ローカルテスト

MCP 実装を直接テストできます。

# Test discovery echo '{"type":"discover"}' | npx -y ./server.js # Test screenshot echo '{"type":"execute","tool":"take_screenshot","input":"Take a screenshot of https://apple.com","requestId":"123"}' | npx -y ./server.js

予想される応答:

  1. Discoverは機能を返します
  2. 実行すると次のようになります:
    • 進行状況をstderrに記録する
    • 結果のJSONを標準出力に返す
    • スクリーンショットを./screenshots/に保存します

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

local-only server

The server can only run on the client's local machine because it depends on local resources.

Tools

さまざまなサイズ、ズーム レベル、読み込み待機時間をサポートする Node.js サーバー経由で Safari を使用して、高品質のネイティブ macOS スクリーンショットをキャプチャできるようにします。

  1. 特徴
    1. 使用法
      1. 要件
        1. インストール
          1. オプション
            1. 一般的なビューポートサイズ
              1. 仕組み
                1. 権限
                  1. カーソルの使用
                    1. カーソルで設定
                    2. コマンド例
                    3. サポートされているパラメータ
                    4. ワークフローの例
                    5. ヒント
                    6. トラブルシューティング
                  2. ライセンス
                    1. ローカルテスト

                      Related Resources

                      Related MCP Servers

                      • mcp-screenshot

                        kazuph
                        A
                        security
                        A
                        license
                        A
                        quality
                        Provides screenshot and OCR capabilities for macOS.
                        Last updated -
                        1
                        35
                        10
                        JavaScript
                        MIT License
                        • Apple

                      • MCP File Preview Server

                        seanivore
                        A
                        security
                        A
                        license
                        A
                        quality
                        Provides HTML file preview and analysis capabilities. This server enables capturing full-page screenshots of local HTML files and analyzing their structure.
                        Last updated -
                        2
                        8
                        JavaScript
                        MIT License

                      • MCP Screenshot Server

                        sethbang
                        -
                        security
                        F
                        license
                        -
                        quality
                        Enables capturing screenshots of web pages and local HTML files through a simple MCP tool interface using Puppeteer with configurable options for dimensions and output paths.
                        Last updated -
                        1
                        0
                        4
                        JavaScript

                      • ScreenshotOne MCP Serverofficial

                        screenshotone
                        A
                        security
                        A
                        license
                        A
                        quality
                        An official MCP server implementation that allows AI assistants to capture website screenshots through the ScreenshotOne API, enabling visual context from web pages during conversations.
                        Last updated -
                        1
                        6
                        TypeScript
                        MIT License
                        • Apple

                      View all related MCP servers

                      Appeared in Searches

                      New MCP Servers

                      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/rogerheykoop/mcp-safari-screenshot'

                      If you have feedback or need assistance with the MCP directory API, please join our Discord server