mcpField
G
getsnap

getsnap

本地服务
github.com/rokas-kve浏览器自动化05 天前更新

关于 getsnap

getsnap 是供 Claude 和其他 Agent 使用的 MCP 服务,可截取网页、比较页面版本并检查无障碍情况。截图和视觉差异会直接以内联内容返回,方便 Agent 检视页面渲染结果。

主要功能

  1. 01以内联方式返回网页截图
  2. 02从网页生成 PDF
  3. 03通过差异叠加图比较页面
  4. 04检查 WCAG 无障碍违规
  5. 05查询剩余 API 额度
  6. 06默认移除 Cookie 横幅和广告遮罩

适用场景

  1. 01检查移动页面是否有元素重叠
  2. 02比较预发布与正式环境的页面布局
  3. 03查找网站的无障碍问题
  4. 04查询剩余截图额度

MCP 相关

getsnap 向 MCP 客户端提供网页截图、PDF、页面比较、无障碍审计和用量查询工具。它通过 `npx` 运行,并需要 getSnap API 密钥。

配置

本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
"mcpServers": {
"dev-getsnap-getsnap": {
"command": "npx",
"args": [
"-y",
"getsnap-mcp"
],
"env": {
"GETSNAP_API_KEY": "<GETSNAP_API_KEY>"
}
}
}
}
启动命令npx -y getsnap-mcp
需要配置的环境变量
GETSNAP_API_KEY密钥getSnap.dev API key. Free tier is 100 captures a month at https://getsnap.dev

本地服务需要在你的电脑上安装运行环境(如 Node.js 18+)。各客户端的配置文件位置不同,请参考客户端文档。

安装包
npmgetsnap-mcp1.14.5

工具

5

收录的工具列表 · 更新于 4 天前

参数类型必填说明
urlstring是要捕获的页面
delayinteger否加载后为等待延迟内容而额外等待的毫秒数
deviceenum否desktop | mobile | tablet
formatenum否jpeg 文件明显更小,通常足以读取布局png | jpeg | webp
full_pageboolean否截取整个可滚动页面,而不只是视口
return_imageboolean否false 仅返回 CDN URL,避免大型捕获结果占用上下文窗口
viewport_widthinteger否
viewport_heightinteger否

详细介绍

getsnap-mcp

getSnap.dev 的官方 MCP 服务。让 Claude 和其他 Agent 能够捕获网页、比较两个页面,并对页面进行无障碍审计。

捕获工具返回的是图像本身,而不是链接。模型可以查看自己刚刚请求的页面,因此“截个图并告诉我哪里有问题”只需一轮对话即可完成。

安装

无需安装步骤。客户端会通过 npx 运行它。

在 getsnap.dev 获取免费 API 密钥——每月可捕获 100 次,无需信用卡。

Claude Code
claude mcp add getsnap --env GETSNAP_API_KEY=sk_live_... -- npx -y getsnap-mcp
Claude Desktop

claude_desktop_config.json:

{
  "mcpServers": {
    "getsnap": {
      "command": "npx",
      "args": ["-y", "getsnap-mcp"],
      "env": { "GETSNAP_API_KEY": "sk_live_..." }
    }
  }
}

同一配置块也适用于任何通过 stdio 与 MCP 通信的客户端。

工具

工具点数返回内容
capture_screenshot1图像,内嵌显示
capture_pdf1链接——PDF 无法直接展示给模型
compare_pages2相似度评分和差异叠加图,内嵌显示
audit_accessibility1按严重程度列出的 WCAG 违规项
check_usage0已使用和剩余的点数

捕获时默认移除 Cookie 横幅和广告叠加层。 缓存的响应不消耗点数,并会明确说明这一点。

值得了解的事项

大图不会内嵌显示。 图像超过约 1.5 MB 时,捕获仍会完成,图像也仍会存储在 CDN 上,因此工具会返回链接并说明原因。长页面的 full_page 捕获通常会超过此限制——传入 format: "jpeg" 或 full_page: false,即可改为内嵌显示。

每次捕获都会消耗点数,因此每个工具描述都会注明其费用。Agent 在决定是否调用工具时,应当能够提前了解调用成本。

compare_pages 消耗 2 点,因为它会为每个 URL 启动一个浏览器。

配置

变量必需默认值
GETSNAP_API_KEY是—
GETSNAP_BASE_URL否https://api.getsnap.dev

如果没有密钥,服务会立即退出并说明如何获取密钥,而不是启动后等到首次使用时才失败。

示例

连接后,可以用自然语言向 Agent 提问:

  • “截取 stripe.com 的移动版页面,并告诉我有没有元素重叠。”
  • “比较我们的预发布网站和生产环境,并告诉我哪些内容发生了变化。”
  • “审计 example.com 的无障碍情况,并列出严重问题。”
  • “我还剩多少 getSnap 点数?”

链接

版本管理

此软件包的版本独立于 getSnap REST API 以及 Node 和 Python SDK。在 1.14.3 之前,它与它们共用版本号;当时它从 API 单体仓库迁移到了此仓库。从此以后,它将独立按自己的节奏发布版本。

采用 MIT 许可证。问题请联系 [email protected]。

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。