mcpField
S
Screenshot

Screenshot

本地服务
screenshotrender.com浏览器自动化021 周前更新
代码仓库访问官网

关于 Screenshot

ScreenshotRender MCP 服务通过 API 为 AI 助手截取公开网页，并返回内嵌图片、托管链接和页面元数据。适用于需要在 MCP 客户端对话中查看网页截图的场景。

主要功能

  1. 01截取任意公开 URL
  2. 02支持整页或视口截图
  3. 03设置等待时间和超时
  4. 04返回托管链接及页面元数据

适用场景

  1. 01在对话中查看网站截图
  2. 02检查页面动画或延迟加载内容

MCP 相关

该 MCP 服务向客户端提供 take_screenshot 工具，调用 ScreenshotRender API 截取网页。

#screenshot#screenshot-api#website#image#rendering

配置

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

mcp.json · 通用配置
{
  "mcpServers": {
    "screenshotrender": {
      "command": "npx",
      "args": [
        "-y",
        "screenshotrender-mcp"
      ],
      "env": {
        "SCREENSHOTRENDER_API_KEY": "<SCREENSHOTRENDER_API_KEY>"
      }
    }
  }
}
启动命令npx -y screenshotrender-mcp
需要配置的环境变量
SCREENSHOTRENDER_API_KEY密钥Your ScreenshotRender API key (starts with sr-). Get one at https://screenshotrender.com.

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

安装包
npmscreenshotrender-mcp1.0.1

工具

1

收录的工具列表 · 更新于 3 周前

参数类型必填说明
urlstring是要截取屏幕截图的页面 URL。请包含方案（https://）。示例：https://stripe.com
fullPageboolean否截取整个可滚动页面，而不仅是 1280x720 视口。默认为 false。
waitinteger否加载后等待捕获的毫秒数，适用于有动画或延迟加载内容的页面。默认不等待。
timeoutinteger否等待页面加载的最长时间（毫秒）。

详细介绍

ScreenshotRender MCP 服务

可在 Claude、Cursor、VS Code、Windsurf 或任何 Model Context Protocol 客户端中截取网站截图。此服务 封装了 ScreenshotRender API，让你的 AI 助手可以按需渲染任何公开网页。

对助手说：“截取 stripe.com 的整页截图”，图片 就会直接显示在聊天中。

工具

工具描述
take_screenshot截取任意公开 URL 的截图。以内嵌图片形式返回，并附带托管 URL 和页面元数据（标题、描述）。

参数

  • url（字符串，必填）——要截取的页面，需包含 https://。
  • fullPage（布尔值，可选）——截取整个可滚动页面，而非仅截取视口。
  • wait（数字，可选）——截图前等待的毫秒数（用于动画或延迟加载的内容）。
  • timeout（数字，可选）——等待页面加载的最长毫秒数。

设置

  1. 在 screenshotrender.com 获取 API 密钥（以 sr- 开头）。
  2. 将服务添加到 MCP 客户端配置中。
Claude Desktop

编辑 claude_desktop_config.json（设置 → 开发者 → 编辑配置）：

{
  "mcpServers": {
    "screenshotrender": {
      "command": "npx",
      "args": ["-y", "screenshotrender-mcp"],
      "env": {
        "SCREENSHOTRENDER_API_KEY": "sr-your-key-here"
      }
    }
  }
}
Cursor / VS Code / Windsurf

在编辑器的 MCP 设置中（mcp.json 或 MCP 设置界面）添加相同的代码块。重启客户端后，即可使用 take_screenshot 工具。

环境变量

变量必填描述
SCREENSHOTRENDER_API_KEY是你的 ScreenshotRender 密钥（sr-...）。
SCREENSHOTRENDER_BASE_URL否覆盖 API 基础 URL。默认值为 https://screenshotrender.com。

本地开发

npm install
SCREENSHOTRENDER_API_KEY=sr-your-key npm run inspect   # opens MCP Inspector

Inspector 可让你调用 take_screenshot 并查看结果，然后再进行发布。

许可证

MIT

评论

支持 Markdown

第一次接触 MCP？

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

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