mcpField
S
screenshotty

screenshotty

本地服务
github.com/nihey浏览器自动化05 周前更新
代码仓库

关于 screenshotty

screenshotty 是用于截取网页并将 HTML 渲染为图片或 PDF 的 MCP 服务，适合需要内嵌图片结果的 MCP 客户端用户。它支持网页截图及 HTML 渲染，并提供多种页面捕获选项。

主要功能

  1. 01将网页截取为 PNG、JPEG 或 WebP
  2. 02将 HTML 渲染为图片
  3. 03从网页或 HTML 生成 PDF
  4. 04配置视口、选择器和显示效果
  5. 05返回托管 URL 和内嵌图片

适用场景

  1. 01以移动端视口检查网页
  2. 02将网页保存为 PDF
  3. 03从 HTML 渲染社交卡片或图表

MCP 相关

向 MCP 客户端提供 `screenshot_url`、`screenshot_html` 和 `generate_pdf` 工具，用于网页捕获与渲染。

配置

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

mcp.json · 通用配置
{
  "mcpServers": {
    "nihey-screenshotty": {
      "command": "npx",
      "args": [
        "-y",
        "screenshotty-mcp"
      ],
      "env": {
        "SCREENSHOTTY_API_KEY": "<SCREENSHOTTY_API_KEY>"
      }
    }
  }
}
启动命令npx -y screenshotty-mcp
需要配置的环境变量
SCREENSHOTTY_API_KEY密钥Screenshotty API key from https://screenshotty.link/dashboard/api-keys

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

安装包
npmscreenshotty-mcp1.1.0

工具

3

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

参数类型必填说明
urlstring是要截取的页面（http:// 或 https://）
formatenum否图像格式。默认值为 pngpng | jpeg | webp
adblockboolean否屏蔽广告
wait_msinteger否截取前的额外等待时间，单位为 ms
selectorstring否要截取的单个元素的 CSS 选择器
full_pageboolean否截取整个可滚动页面。默认值为 true
light_modeenum否强制使用浅色或深色配色方案default | light | dark
viewport_widthinteger否视口宽度（像素）。默认值为 1920
viewport_heightinteger否视口高度（像素）。默认值为 1080
block_cookie_bannerboolean否隐藏 Cookie 同意横幅
device_scale_factorinteger否1 = 标准，2 = Retina，3 = 高 DPI

详细介绍

screenshotty-mcp

面向 Screenshotty 截图 API 的模型上下文协议服务。让 Claude、Cursor、Cline 及任何其他 MCP 客户端都能将网页截图或将 HTML 渲染为图像或 PDF，并能查看结果，因为图像会以内嵌形式返回。

获取 API 密钥

在 https://screenshotty.link/sign-up?utm_source=mcp 注册（每月免费 250 张截图，无需信用卡），然后从控制面板 → API 密钥中复制密钥。

配置客户端

Claude Code
claude mcp add screenshotty --env SCREENSHOTTY_API_KEY=your_key -- npx -y screenshotty-mcp
Claude Desktop / Cursor / Cline
{
  "mcpServers": {
    "screenshotty": {
      "command": "npx",
      "args": ["-y", "screenshotty-mcp"],
      "env": {
        "SCREENSHOTTY_API_KEY": "your_key"
      }
    }
  }
}

Claude Desktop 配置文件位于 ~/Library/Application Support/Claude/claude_desktop_config.json（macOS）或 %APPDATA%\Claude\claude_desktop_config.json（Windows）。

工具

工具功能
screenshot_url为页面截图（PNG、JPEG、WebP）。返回托管 URL；图像不超过 2 MB 时，也会以内嵌形式返回。选项：视口、整页、CSS 选择器、等待时间、广告屏蔽、Cookie 横幅屏蔽、浅色/深色模式、设备缩放因子。
screenshot_html将 HTML 文档（内嵌 CSS/JS；仅限公开的 http(s) 资源）渲染为 PNG、JPEG 或 WebP——适用于社交卡片、图表、电子邮件预览。返回 URL 和内嵌图像。
generate_pdf将页面（url）或 HTML 文档（html）渲染为 PDF。返回托管的 PDF URL。

提示词示例：“在宽度为 390px 的视口中截取 https://example.com 的截图，并告诉我移动端有哪些问题”、“将我们的定价页面保存为 PDF”、“为这篇博客文章设计一张 1200×630 的 Open Graph 卡片并渲染出来”。

环境变量

变量必需默认值
SCREENSHOTTY_API_KEY是—
SCREENSHOTTY_API_URL否https://api.screenshotty.link

开发

npm install
npm run build
SCREENSHOTTY_API_KEY=your_key npx @modelcontextprotocol/inspector node dist/index.js

许可证

MIT

评论

支持 Markdown

第一次接触 MCP？

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

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