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