MCP Screenshot Website Fast

🚀 @just-every/mcp-screenshot-website-fast

高速かつ効率的なウェブページのスクリーンショット撮影ツールです。Claude Vision APIに最適化されており、全ページを自動的に1072x1072のチャンクに分割し、AI処理を最適化します。

🚀 クイックスタート

このツールはAIビジョンワークフロー用に特別に構築されています。自動的な解像度制限とタイリング機能を備え、Claude Vision APIや他のAIモデルによる最適な処理のために高品質なスクリーンショットを撮影します。スクリーンショットは最大互換性のために1072x1072ピクセル（1.15メガピクセル）に最適化されています。

✨ 主な機能

• 📸 Puppeteerヘッドレスブラウザを使用した高速なスクリーンショット撮影
• 🎯 自動解像度制限（最適な1.15メガピクセルのための1072x1072）によるClaude Vision最適化
• 🔲 全ページが自動的に1072x1072のタイルに分割される自動タイリング
• 🔄 キャッシュがないため、常に最新の内容を反映した常に新鮮なコンテンツ
• 📱 レスポンシブテスト用の設定可能なビューポート
• ⏱️ 動的コンテンツ用の待機戦略（networkidle、カスタム遅延）
• 📄 デフォルトで全ページを撮影する全ページ撮影
• 📦 高速なnpmインストールのための最小限の依存関係
• 🔌 シームレスなAIワークフローのためのMCP統合

📦 インストール

Claude Code

claude mcp add screenshot-website-fast -s user -- npx -y @just-every/mcp-screenshot-website-fast

VS Code

code --add-mcp '{"name":"screenshot-website-fast","command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}'

Cursor

cursor://anysphere.cursor-deeplink/mcp/install?name=screenshot-website-fast&config=eyJzY3JlZW5zaG90LXdlYnNpdGUtZmFzdCI6eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBqdXN0LWV2ZXJ5L21jcC1zY3JlZW5zaG90LXdlYnNpdGUtZmFzdCJdfX0=

JetBrains IDEs

設定 → ツール → AIアシスタント → モデルコンテキストプロトコル (MCP) → 追加

「JSONとして」を選択し、以下を貼り付けます:

{"command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}

生のJSON（すべてのMCPクライアントで動作）

{
  "mcpServers": {
    "screenshot-website-fast": {
      "command": "npx",
      "args": ["-y", "@just-every/mcp-screenshot-website-fast"]
    }
  }
}

これをクライアントのmcp.json（例: .vscode/mcp.json、~/.cursor/mcp.json、またはClaude用の.mcp.json）にドロップします。

前提条件

• Node.js 20.x以上
• npmまたはnpx
• Chrome/Chromium（Puppeteerによって自動的にダウンロードされます）

💻 使用例

MCPサーバーの使用

IDEにインストールした後、以下のツールが利用可能です:

利用可能なツール

• screenshot_website_fast - ウェブページの高品質なスクリーンショットを撮影します
  • パラメータ:
    • url (必須): 撮影するHTTP/HTTPSのURL
    • width (オプション): ビューポートの幅（ピクセル単位、最大1072、デフォルト: 1072）
    • height (オプション): ビューポートの高さ（ピクセル単位、最大1072、デフォルト: 1072）
    • fullPage (オプション): 全ページのスクリーンショットを撮影する（デフォルト: true）
    • waitUntil (オプション): イベントまで待機する: load、domcontentloaded、networkidle0、networkidle2（デフォルト: networkidle2）
    • waitFor (オプション): 追加の待機時間（ミリ秒単位）

開発時の使用

インストール

npm install
npm run build

スクリーンショットの撮影

# 自動タイリングで全ページ撮影（デフォルト）
npm run dev capture https://example.com -o screenshot.png

# ビューポートのみのスクリーンショット
npm run dev capture https://example.com --no-full-page -o screenshot.png

# 特定の条件を待つ
npm run dev capture https://example.com --wait-until networkidle0 --wait-for 2000 -o screenshot.png

CLIオプション

• -w, --width <pixels> - ビューポートの幅（最大1072、デフォルト: 1072）
• -h, --height <pixels> - ビューポートの高さ（最大1072、デフォルト: 1072）
• --no-full-page - 全ページ撮影とタイリングを無効にする
• --wait-until <event> - イベントまで待機する: load、domcontentloaded、networkidle0、networkidle2
• --wait-for <ms> - 追加の待機時間（ミリ秒単位）
• -o, --output <path> - 出力ファイルのパス（タイリング出力の場合は必須）

🔧 技術詳細

mcp-screenshot-website-fast/
├── src/
│   ├── internal/       # コアのスクリーンショット撮影ロジック
│   ├── utils/          # ロガーとユーティリティ
│   ├── index.ts        # CLIエントリポイント
│   └── serve.ts        # MCPサーバーエントリポイント

開発

# 開発モードで実行
npm run dev capture https://example.com -o screenshot.png

# 本番用にビルド
npm run build

# テストを実行
npm test

# 型チェック
npm run typecheck

# リント
npm run lint

なぜこのツールを選ぶのか？

AIビジョンワークフロー用に特別に構築されています。

1. Claude Vision APIに最適化 - 自動解像度制限を1072x1072ピクセル（1.15メガピクセル）に設定
2. 自動タイリング - 全ページをAI処理に最適なチャンクに分割
3. 常に新鮮 - キャッシュがないため、常に最新の内容を取得
4. MCPネイティブ - AI開発ツールとの一流の統合
5. シンプルなAPI - スクリーンショットを撮影するためのクリーンで直感的なインターフェース

コントリビュート

コントリビューションは大歓迎です！以下の手順を踏んでください:

1. リポジトリをフォークする
2. 機能ブランチを作成する
3. 新機能に対するテストを追加する
4. プルリクエストを送信する

トラブルシューティング

Puppeteerの問題

• Chrome/Chromiumがダウンロードできることを確認する
• ファイアウォール設定を確認する
• PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=trueを設定し、カスタム実行ファイルを提供してみる

スクリーンショットの品質

• ビューポートの寸法を調整する
• 適切な待機戦略を使用する
• サイトが認証を必要とするか確認する

タイムアウトエラー

• --wait-forフラグで待機時間を増やす
• 異なる--wait-until戦略を使用する
• サイトにアクセスできるか確認する

📄 ライセンス

MIT