MCP Screenshot Website Fast

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

這是一款快速、高效的網頁截圖工具，專為Claude Vision API進行了優化。它能自動將整個頁面分割成1072x1072的小塊，以實現最佳的AI處理效果。

🚀 快速開始

本工具專為AI視覺工作流程而構建，可捕獲高質量的屏幕截圖，並自動限制分辨率和進行分塊處理，以確保Claude Vision API和其他AI模型能實現最佳處理效果。它能保證截圖尺寸精確為1072x1072像素（115萬像素），以實現最大兼容性。

✨ 主要特性

• 📸 快速截圖：使用Puppeteer無頭瀏覽器實現快速截圖。
• 🎯 Claude Vision優化：自動限制分辨率為1072x1072（115萬像素），以適配Claude Vision API。
• 🔲 自動分塊：可將整個頁面自動分割成1072x1072的小塊。
• 🔄 內容實時更新：不使用緩存，確保截圖內容為最新狀態。
• 📱 可配置視口：支持響應式測試的可配置視口。
• ⏱️ 等待策略：針對動態內容提供等待策略（網絡空閒、自定義延遲）。
• 📄 默認全頁捕獲：默認捕獲整個頁面，提供完整的頁面截圖。
• 📦 依賴極少：依賴項少，可實現快速的npm安裝。
• 🔌 MCP集成：無縫集成AI工作流程。

📦 安裝指南

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像素（115萬像素）。
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許可證。