AI导哈

网站截图服务

一个提供自动化网站截图功能的MCP服务器，支持批量处理、智能标注和文档生成。

  • by adibirzu
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 adibirzu/mcp-screenshot-server

使用说明

通用MCP屏幕截图服务器

一种模型上下文协议（MCP）服务器，为任何网站提供自动截图功能。

特性

  • 🖼️ 通用屏幕截图：通过提供URL捕获任何网站
  • 📁 申请组织：按应用程序自动组织屏幕截图（Oracle Cloud、AWS、Azure等）
  • 🔐 经过身份验证的会话：支持Cookie、localStorage、sessionStorage和自定义标头
  • 👁️ 图像查看：截图会自动显示在Claude/ChatGPT响应中
  • 📱 批处理：同时截取多个网站的屏幕截图
  • ✨ 智能注释：添加箭头、圆圈、矩形和文本覆盖
  • 📖 文档生成：使用所有截图创建HTML指南
  • 🎯 高质量：带时间戳的全高清（1920x1080）PNG屏幕截图
  • ⚡ 快速可靠：使用Puppeteer实现一致的浏览器自动化

可用工具

1. take_screenshot

使用自定义设置捕获任何网站。

参数：

  • url -完整的URL（例如，“https://example.com", "http://localhost:3000")
  • filename -不带扩展名的输出文件名
  • width/height -视口尺寸（默认值：1920x1080）
  • waitForSelector -捕获前要等待的CSS选择器
  • delay -额外延迟（毫秒）

2. take_multiple_screenshots

自动捕获多个网站。

参数：

  • urls -包含URL、文件名和可选waitForSelector的URL对象数组

3. annotate_screenshot

为现有屏幕截图添加视觉注释。

参数：

  • filename -要注释的屏幕截图
  • annotations -注释对象数组（箭头、圆圈、矩形、文本）

4. list_screenshots

列出按应用程序组织的所有屏幕截图。

参数：

  • appName -按特定应用筛选（可选）
  • limit -可返回的最大屏幕截图数（默认值：50）

5. view_screenshot

按文件名查看特定屏幕截图。

参数：

  • filename -屏幕截图文件名（带或不带.png扩展名）
  • appName -应用程序文件夹名称（可选）

6. extract_session_data

从经过身份验证的屏幕截图的URL中提取会话数据。

参数：

  • url -从中提取会话数据的URL
  • includeStorage -包括本地存储和会话存储（默认值：true）

7. connect_to_browser

通过远程调试连接到现有浏览器实例。

参数：

  • port -浏览器远程调试端口（默认：9222）
  • url -要连接的浏览器URL

8. create_screenshot_guide

生成包含所有截图的HTML指南。

参数：

  • title -指南标题
  • outputFile -HTML文件名

安装

  1. 安装依赖关系：

    npm install

  2. 构建服务器：

    npm run build

  3. 配置Claude桌面： 增添 ~/Library/Application Support/Claude/claude_desktop_config.json:

    {
  "mcpServers": {
    "generic-screenshot": {
      "command": "node",
      "args": ["/Users/abirzu/dev/mcp-screenshot-server/dist/index.js"],
      "env": {}
    }
  }
}

  4. 重新启动克劳德桌面 加载MCP服务器。

使用示例

基本屏幕截图

Take a screenshot of https://cloud.oracle.com/loganalytics/explorer

经过身份验证的屏幕截图

Take a screenshot of https://cloud.oracle.com/dashboard with session data from my browser

多个网站

Take screenshots of these websites: https://cloud.oracle.com, https://console.aws.amazon.com, https://portal.azure.com

列出屏幕截图

List all my Oracle Cloud screenshots

查看屏幕截图

Show me the latest Oracle Cloud screenshot

本地开发服务器

Take a screenshot of http://localhost:3000/dashboard

带注释的屏幕截图

Take a screenshot of https://news.ycombinator.com and add arrows pointing to the top stories

文档生成

Create a screenshot guide with all the captured images

需求

  • Node.js 18+
  • 用于访问网站的互联网连接
  • 支持MCP的Claude桌面

项目结构

mcp-screenshot-server/
├── src/
│   └── index.ts           # Main MCP server implementation
├── dist/                  # Compiled JavaScript
├── screenshots/           # Generated screenshots
├── package.json
├── tsconfig.json
└── README.md

发展

# Build and run
npm run dev

# Build only
npm run build

# Test server
npm test

故障排除

常见问题

  1. MCP服务器未加载

    • 检查Claude Desktop配置语法
    • 验证文件路径是否正确
    • 重新启动克劳德桌面

  2. 截图失败

    • 确保目标网站可访问
    • 检查Puppeteer浏览器权限
    • 验证网络连接
    • 使用带有协议（https://或http://）的完整URL

  3. 无效的URL错误

    • 提供完整的网址： https://example.com 不 example.com
    • 包括本地服务器的协议： http://localhost:3000

  4. 无截图目录

    • 服务器自动创建 screenshots/ 目录
    • 确保项目文件夹中的写入权限

示例URL

  • 公共网站： https://www.google.com, https://github.com
  • 地方发展： http://localhost:3000, http://127.0.0.1:8080
  • 具体页面： https://example.com/about, http://localhost:3000/dashboard

许可证

MIT许可证-有关详细信息，请参阅许可证文件。

贡献

  1. 分叉存储库
  2. 创建要素分支
  3. 进行更改
  4. 提交拉取请求

通用屏幕截图服务器
版本： 1.0.0
最后更新时间： 2025年1月

相关 MCP