金大哥 - mcp-screenshot-website-fast MCP 详情

article

README

🚀 @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视觉工作流程打造：

Claude Vision API优化：自动将分辨率限制为1072x1072像素（115万像素）。
自动切片：将完整页面分割成适合AI处理的完美小块。
内容实时更新：不进行缓存，确保获取最新内容。
MCP原生支持：与AI开发工具深度集成。
简单API：提供简洁、直接的截图捕获接口。

🤝 贡献代码

欢迎贡献代码！请按以下步骤操作：

分叉仓库
创建功能分支
为新功能添加测试
提交拉取请求

🛠️ 故障排除

Puppeteer问题

确保可以下载Chrome/Chromium
检查防火墙设置
尝试设置PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true并提供自定义可执行文件

截图质量问题

调整视口尺寸
使用适当的等待策略
检查网站是否需要身份验证

超时错误

使用--wait-for标志增加等待时间
使用不同的--wait-until策略
检查网站是否可访问

📄 许可证

本项目采用MIT许可证。

mcp-screenshot-website-fast