使用说明

项目简介

Screenshot Server 是一个基于 Model Context Protocol (MCP) 构建的后端服务器，它扩展了大型语言模型 (LLM) 的能力，使其可以通过调用工具来截取网页或本地 HTML 文档的屏幕截图。该服务器使用 Puppeteer 驱动 Chromium 浏览器来实现截图功能，并通过 MCP 协议与客户端进行通信。

主要功能点

网页截图: 能够截取任何可访问的网页的屏幕截图。
本地HTML文件截图: 支持截取本地 HTML 文件的屏幕截图。
可配置的视窗大小: 允许用户自定义截图的视窗宽度和高度。
完整页面截图: 支持截取整个可滚动页面的完整内容。
自定义输出路径: 用户可以指定截图保存的路径。
自动目录管理: 服务器会自动创建和管理截图输出目录。

安装步骤

安装 Node.js 和 npm: 确保你的系统已安装 Node.js 和 npm (Node.js 包管理器)。

克隆仓库: 将 GitHub 仓库克隆到本地：

git clone https://github.com/sethbang/mcp-screenshot-server.git
cd mcp-screenshot-server

安装依赖: 在项目根目录下运行以下命令安装项目依赖：
```
npm install
```

服务器配置

MCP 客户端需要配置以下信息来连接 Screenshot Server。请将以下 JSON 配置添加到你的 MCP 客户端配置中：

{
  "servers": [
    {
      "name": "screenshot-server",
      "command": "node",
      "args": ["dist/index.js"]
    }
  ]
}

配置参数说明:

'name': 服务器名称，这里设置为 "screenshot-server"。
'command': 启动服务器的命令，这里使用 'node' 命令来运行 JavaScript 文件。
'args': 传递给 'node' 命令的参数，'dist/index.js' 是编译后的服务器入口文件路径。请注意，在开发环境下，你可能需要先运行 'npm run build' 命令来生成 'dist/index.js' 文件。或者，你可以直接使用 'node index.js' 来运行未编译的源代码，但这可能需要根据你的具体环境调整。为了更通用和符合仓库的 'npm run inspector' 命令，建议配置为 'node index.js' 并从项目根目录启动客户端。

更推荐的开发环境配置 (假设从项目根目录启动客户端):

{
  "servers": [
    {
      "name": "screenshot-server",
      "command": "node",
      "args": ["index.js"]
    }
  ]
}

基本使用方法

配置完成后，MCP 客户端应该能够发现名为 'take_screenshot' 的工具。你可以通过客户端调用此工具来截取屏幕截图。

调用 'take_screenshot' 工具时，你需要提供以下参数：

{
  "tool_calls": [
    {
      "id": "screenshot-1",
      "name": "take_screenshot",
      "arguments": {
        "url": "https://www.example.com",
        "width": 1024,
        "height": 768,
        "fullPage": false,
        "outputPath": "screenshots/example.png"
      }
    }
  ]
}

参数说明:

'url': 要截取屏幕截图的 URL，可以是 'http://', 'https://' 或 'file://' 协议的地址。
'width' (可选): 视窗宽度，像素值 (1-3840)。
'height' (可选): 视窗高度，像素值 (1-2160)。
'fullPage' (可选): 是否截取完整可滚动页面，布尔值，默认为 'false'。
'outputPath' (可选): 自定义输出路径，相对于当前工作目录。如果未指定，截图将保存在服务器项目根目录下的 'Screenshots' 目录中，并自动生成文件名。

工具调用成功后，服务器会返回截图保存路径的信息。如果发生错误，服务器会返回包含错误信息的响应。

示例： 截取百度首页的屏幕截图并保存到 'screenshots/baidu.png'：

{
  "tool_calls": [
    {
      "id": "screenshot-baidu",
      "name": "take_screenshot",
      "arguments": {
        "url": "https://www.baidu.com",
        "outputPath": "screenshots/baidu.png"
      }
    }
  ]
}

请根据你的 MCP 客户端的具体使用方式来发送工具调用请求，并处理服务器返回的响应。

关键词