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许可证。