SuperAPI AI 工具集
合作ENAI 行业资讯收藏
全部工具AI开发平台webpage-screenshot-mcp

webpage-screenshot-mcp

Webpage Screenshot MCP 是一个基于模型上下文协议（MCP）的服务器，利用 Puppeteer 为 AI 智能体提供网页截图能力。它可以让 AI 在开发 Web 应用时，通过视觉方式检查页面进度和效果。主要功能包括：整页或视口截图、通过 CSS 选择器截取特定元素、支持 PNG/JPEG/WebP 格式、可自定义视口尺寸、图片质量、等待条件和延迟、以 Base64 编码返回截图便于集成、支持手动登录与 Cookie 持久化、可调用系统默认浏览器、以及保持浏览器会话以完成多步骤工作流。该工具适用于需要在受保护页面截图或需要人工登录的场景。

访问官网

工具介绍

用途

Webpage Screenshot MCP 是一个 MCP（模型上下文协议）服务器，用于为 AI 智能体提供网页截图能力，使 Agent 在生成 Web 应用时能够通过截图视觉化地验证应用并查看开发进度。

主要能力

  • 整页截图：捕获整个网页或仅捕获当前视口。
  • 元素截图：使用 CSS 选择器定位并截取特定元素。
  • 多种格式：支持 PNG、JPEG 和 WebP 格式。
  • 可自定义选项：可设置视口尺寸、图像质量、等待条件和延迟时间。
  • Base64 编码：截图以 Base64 编码图像返回，便于集成。
  • 认证支持：支持手动登录和 Cookie 持久化。
  • 默认浏览器集成：可使用系统默认浏览器，获得更自然的体验。
  • 会话持久化：保持浏览器会话打开，以支持多步骤工作流。

使用方式

快速开始（Claude Desktop 扩展）

将生成的 screenshot-webpage-mcp.dxt 文件拖放到 Claude Desktop 中即可自动安装。

手动安装

从源码安装和构建 MCP：该 MCP 服务器使用 TypeScript 构建并编译为 JavaScript，dist 文件夹包含编译后的 JavaScript 文件。

添加到 Claude 或 Cursor

  • Claude Desktop：进入 Settings > Developer，点击 "Edit Config"，添加以下内容：
    "webpage-screenshot" : { "command" : " node " , "args" : [ " ~/path/to/webpage-screenshot-mcp/dist/index.js " ] }
    保存并重新加载 Claude。
  • Cursor：打开 Cursor，进入 Cursor Settings > MCP，点击 "Add new global MCP server"，添加相应配置，保存并重新加载 Cursor。

提供的工具

  1. login-and-wait：在可见浏览器窗口中打开网页供手动登录，等待用户完成登录后保存 Cookie。
    • url（必填）：登录页面的 URL
    • waitMinutes（可选）：等待登录的最大分钟数，默认 5
    • successIndicator（可选）：指示登录成功的 CSS 选择器或 URL 模式
    • useDefaultBrowser（可选）：是否使用系统默认浏览器，默认 true
  2. screenshot-page：截取给定 URL 的截图并以 Base64 编码图像返回。
    • url（必填）：要截图的网页 URL
    • fullPage（可选）：截取整页还是仅视口，默认 true
    • width（可选）：视口宽度（像素），默认 1920
    • height（可选）：视口高度（像素），默认 1080
    • format（可选）：图像格式，"png"、"jpeg" 或 "webp"，默认 "png"
    • quality（可选）：图像质量（0-100），仅适用于 jpeg 和 webp
    • waitFor（可选）：何时认为页面加载完成，"load"、"domcontentloaded"、"networkidle0" 或 "networkidle2"，默认 "networkidle2"
    • delay（可选）：页面加载后的额外延迟毫秒数，默认 0
    • useSavedAuth（可选）：是否使用之前登录保存的 Cookie，默认 true
    • reuseAuthPage（可选）：是否使用现有的已认证页面，默认 false
    • useDefaultBrowser（可选）：是否使用系统默认浏览器，默认 false
    • visibleBrowser（可选）：是否显示浏览器窗口，默认 false
  3. screenshot-element：使用 CSS 选择器截取网页上的特定元素。
    • url（必填）：网页 URL
    • selector（必填）：要截图的元素的 CSS 选择器
    • waitForSelector（可选）：是否等待选择器出现，默认 true
    • padding（可选）：元素周围的填充像素，默认 0
  4. clear-auth-cookies：清除特定域或所有域的已保存认证 Cookie。
    • url（可选）：要清除 Cookie 的域 URL。若未提供，则清除所有 Cookie。

适用场景

  • 在 AI 辅助 Web 开发过程中，让智能体通过截图检查页面渲染和布局。
  • 对需要登录的受保护页面进行截图：通过手动登录阶段，打开默认浏览器，完成登录后保存 Cookie，再用保存的会话截图。
  • 需要与网页进行复杂交互或多步骤工作流的场景。
  • 测试与用户相同浏览器环境（利用已有浏览器会话、扩展和 Cookie）。

限制

  • 默认浏览器检测仅支持：macOS 检测 Chrome、Edge 和 Safari；Windows 通过注册表或常见安装路径检测 Chrome 和 Edge；Linux 通过系统命令检测 Chrome 和 Chromium。
  • 若系统找不到默认浏览器，将回退到 Puppeteer 自带的 Chromium。
  • 使用默认浏览器模式时，必须同时设置 useDefaultBrowser: true 和 visibleBrowser: true。
  • 无头模式（visibleBrowser: false）更快，更适合无需用户交互的自动化工作流。
  • 若连接浏览器调试端口出现问题，需检查是否有其他实例占用该端口。
  • 若认证不工作，可尝试用 clear-auth-cookies 工具清除 Cookie。
  • 服务器会在控制台记录有用的错误信息，可据此排查问题。

同类工具

查看分类