ScreenshotOne MCP 服务器

“ScreenshotOne” MCP 服务器的作用是什么？

ScreenshotOne MCP（模型上下文协议）服务器是官方实现，它作为 AI 助手与 ScreenshotOne API 之间的桥梁。连接该服务器后，AI 代理和工具可以自动化捕获网站截图，为开发、QA、报告和文档等工作流提供可视化上下文与参考。通过 MCP 协议，开发者可让 AI 助手生成实时网站快照，将可视化内容集成到对话或报告中，简化网页内容分享和归档的流程。该服务器让您可在更大规模的 AI 或自动化流程中安全地执行截图请求。

提示词列表

仓库中未记录提示词模板。

资源列表

仓库中未记录明确的 MCP 资源。

工具列表

• render-website-screenshot：渲染网站截图并返回为图片。

该 MCP 服务器的典型用例

• 自动化网站 QA：即时捕获和对比网站截图，用于回归测试或可视化 QA，帮助开发和测试人员发现界面变化或渲染 Bug。
• 文档生成：轻松将最新截图嵌入技术或市场文档，确保手册和指南反映当前网站界面。
• 可视化缺陷报告：允许用户或 AI 助手为缺陷报告附加网页截图，提升 QA 与开发团队间的沟通效率。
• 内容归档：自动采集和归档网站状态，用于合规、审计或历史参考。
• 实时分享：让 AI 驱动的聊天机器人可在会话中获取并分享网页可视化内容，提升表达清晰度与互动性。

如何设置

Windsurf

Windsurf 未提供具体设置说明。

Claude

1. 前置条件：确保已安装 Node.js。
2. 定位配置文件：找到 ~/Library/Application Support/Claude/claude_desktop_config.json。
3. 添加 ScreenshotOne MCP 服务器配置：

   {
       "mcpServers": {
           "screenshotone": {
               "command": "node",
               "args": ["path/to/screenshotone/mcp/build/index.js"],
               "env": {
                   "SCREENSHOTONE_API_KEY": "<your api key>"
               }
           }
       }
   }
   

4. 保存文件。
5. 重启 Claude 以使更改生效。
6. 验证：尝试在 Claude 内使用截图工具。

API 密钥安全

请将 ScreenshotOne API 密钥存储在配置的 env 部分，勿直接写入代码库。

示例：

"env": {
    "SCREENSHOTONE_API_KEY": "<your api key>"
}

Cursor

Cursor 未提供具体设置说明。

Cline

Cline 未提供具体设置说明。

独立部署

1. 前置条件：确保已安装 Node.js。
2. 安装依赖并编译：

   npm install && npm run build
   

3. 使用您的 API 密钥启动服务器：

   SCREENSHOTONE_API_KEY=your_api_key && node build/index.js
   

如何在流程中使用该 MCP

在 FlowHunt 中使用 MCP

要在 FlowHunt 工作流中集成 MCP 服务器，请先将 MCP 组件添加到流程中并连接至您的 AI 代理：

点击 MCP 组件以打开配置面板。在系统 MCP 配置区域，按以下 JSON 格式填写 MCP 服务器详情：

{
  "screenshotone": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

配置完成后，AI 代理即可作为工具使用该 MCP，具备其全部功能和能力。请记得将 “screenshotone” 替换为实际的 MCP 服务器名称，并将 URL 替换为您自己的 MCP 服务器地址。

概览

我们的观点

该 MCP 服务器聚焦实用，但核心用例外的文档较少。对 Claude 来说易于部署，其他平台缺乏详细设置说明，也未提供提示词模板或资源。其优势在于有一个文档齐全的工具和安全的 API 处理，但覆盖面有限。

MCP 评分