使用说明

ScreenshotOne.com MCP服务器是一个基于Model Context Protocol（MCP）的后端应用，它允许AI助手或其他MCP客户端通过标准化的协议调用ScreenshotOne.com服务，实现网页截图、HTML渲染截图、自定义截图参数等功能。

主要功能点

灵活截图: 支持对指定网页URL或直接提供的HTML内容进行截图。
丰富定制: 可自定义截图的视口大小、设备模拟、是否全页截图、通过CSS选择器选择特定元素进行截图。
多种格式: 支持PNG, JPEG, WebP, PDF等多种输出格式。
内容控制: 能够屏蔽广告、追踪器、Cookie横幅，并可注入自定义CSS和JavaScript。
时机控制: 支持控制截图前的等待行为和延迟时间。
云存储集成: 可选择将生成的截图自动上传到Cloudflare存储服务。

安装步骤

前提条件: 确保您的系统已安装 Node.js (版本 >= 18.x) 和 Git。

克隆仓库:

git clone https://github.com/mrgoonie/screenshotone-mcp-server.git

进入项目目录:

cd screenshotone-mcp-server

安装依赖:
```
npm install
```

服务器配置

MCP服务器通常由MCP客户端（如AI助手）进行配置和启动。您需要在MCP客户端的配置文件中添加对此服务器的定义。配置信息通常是一个JSON对象，指定服务器的名称、启动命令及参数、以及使用的传输协议。

请将以下配置片段添加到您的MCP客户端配置文件（例如 '~/.mcp/configs.json' 或客户端指定的其他位置）的 'mcpServers' 部分：

使用 Stdios 传输协议 (适用于CLI或本地客户端)

这种模式下，MCP客户端会启动一个进程来运行服务器。

{
  "mcpServers": {
    "screenshotone": {
      "command": "node",
      "args": [
        "/path/to/screenshotone-mcp-server/dist/index.js",
        "--transport",
        "stdio"
      ],
      "transportType": "stdio",
      "description": "ScreenshotOne.com 网页截图服务",
      "environments": {
         // 在这里配置ScreenshotOne的访问密钥
         "SCREENSHOTONE_ACCESS_KEY": "您的ScreenshotOne API密钥"
         // 如果需要上传到Cloudflare，也在这里配置相关环境变量
         // "CLOUDFLARE_CDN_PROJECT_NAME": "您的Cloudflare R2项目名称",
         // "CLOUDFLARE_CDN_ACCESS_KEY": "您的Cloudflare R2 Access Key ID",
         // "CLOUDFLARE_CDN_SECRET_KEY": "您的Cloudflare R2 Secret Access Key",
         // "CLOUDFLARE_CDN_BUCKET_NAME": "您的Cloudflare R2 Bucket名称",
         // "CLOUDFLARE_CDN_ENDPOINT_URL": "您的Cloudflare R2 Endpoint URL",
         // "CLOUDFLARE_CDN_BASE_URL": "您的Cloudflare R2 Custom Domain URL (可选，用于公共访问)"
      }
    }
  }
}

请替换 '/path/to/screenshotone-mcp-server/dist/index.js' 为您实际安装项目后 'dist/index.js' 文件的绝对路径。
'SCREENSHOTONE_ACCESS_KEY' 是必需的配置，请务必填写您的ScreenshotOne API密钥。
'CLOUDFLARE_CDN_*' 变量仅在您需要将截图上传到Cloudflare R2时需要配置。

使用 Streamable HTTP 传输协议 (适用于网络客户端)

这种模式下，您需要单独启动服务器，然后MCP客户端通过HTTP连接。

启动HTTP服务器: 在项目目录下运行：

# 使用默认地址 127.0.0.1:8080/mcp
npm run dev:server:http
# 或设置环境变量来自定义地址和端口
# MCP_HTTP_HOST=0.0.0.0 MCP_HTTP_PORT=3000 npm run dev:server:http

您可以通过设置 'MCP_HTTP_HOST', 'MCP_HTTP_PORT', 'MCP_HTTP_PATH' 环境变量来配置服务器监听的地址、端口和路径。
ScreenshotOne访问密钥和Cloudflare上传配置仍需通过环境变量（如 'SCREENSHOTONE_ACCESS_KEY' 等）提供给启动的服务器进程。

配置MCP客户端:

{
  "mcpServers": {
    "screenshotone": {
      "type": "http",
      "url": "http://localhost:8080/mcp",
      "description": "ScreenshotOne.com 网页截图服务"
      // 注意：HTTP模式下，ScreenshotOne Access Key等配置需要通过环境变量
      // 提供给运行 HTTP 服务器的进程，而不是写在这里。
      // 将敏感信息直接写在客户端配置文件中是不安全的。
    }
  }
}

'url' 必须是您启动的HTTP服务器的实际地址（包括路径）。

基本使用方法

配置并启动服务器后，AI助手等MCP客户端即可通过JSON-RPC调用提供的工具。此服务器目前主要提供一个名为 'take_screenshot' 的工具。

AI助手在需要执行截图操作时，会调用这个 'take_screenshot' 工具，并传入相应的参数。例如，指定需要截图的网页URL：

调用工具名称：'take_screenshot'
传递参数：例如 '{ "url": "https://example.com", "format": "png", "full_page": true, "access_key": "您的API密钥" }'

AI助手将根据您提供的参数调用ScreenshotOne API执行截图，并将结果（如base64编码的图片数据、上传后的公共URL或JSON元数据）返回给客户端。

具体支持的工具参数和详细描述，客户端可以在连接服务器后，通过MCP协议的服务能力声明（'capabilities'）获取。

关键词