local-only server

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

Integrations

Uses macOS' native screencapture for taking high-quality screenshots
Allows taking screenshots of websites using Safari on macOS

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)

仕組み

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

権限

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

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

カーソルの使用

カーソルで設定

オープンカーソル
設定に移動し、「MCPサーバーを追加」
構成ダイアログで:
- 名前: 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秒お待ちください」）

ワークフローの例

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

ヒント

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

トラブルシューティング

問題が発生した場合:

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

ライセンス

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

ローカルテスト

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

予想される応答:

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

You must be authenticated.

A

security – no known vulnerabilities

A

license - permissive license

A

quality - confirmed to work

Tools

take_screenshot

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

Related Resources

Reddit Discussion about this server

Safari Screenshot MCP Server