AI导哈

实时网站截图服务

RedEye MCP Server 是一个全面的模型上下文协议（MCP）服务器，提供实时网站截图服务，支持设备模拟、批量处理和性能监控等功能。

  • by codedwithlikhon
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 codedwithlikhon/redeye-mcp-server

使用说明

红眼MCP服务器

一个全面的模型上下文协议（MCP）服务器，提供实时网站截图服务。RedEye是唯一一个在您请求时立即流式传输截图的网站快照生成器，具有设备模拟、批处理和性能监控等高级功能。

🚀 主要特点

实时屏幕截图流媒体

  • 即时交付：屏幕截图在您要求时立即交付
  • 现场演示：试试看 https://redeye-mcp.vercel.app
  • 零延迟：通过智能缓存优化速度

核心截图功能

  • 实时屏幕截图：捕获任何可公开访问的网站的屏幕截图
  • 设备仿真：支持桌面、移动和平板电脑视口
  • 多种格式：PNG、JPEG和GIF输出格式
  • 完整页面捕获：捕获整个页面高度的选项
  • 自定义尺寸：可配置宽度和裁剪高度
  • 延迟支持：在捕获之前等待动态内容加载

用例

📸 网站快照

随着时间的推移，存档您网站的快照。非常适合跟踪变化和维护历史记录。

📱 移动仿真/响应式设计

采用响应式设计测试的不同设备上的测试站点。检查您的网站在所有屏幕尺寸上的外观。

👁️ 网站预览

向客户展示他们作品的预览。非常适合网站建设者和设计工具。

🔍 SEO监控

向客户证明链接和排名。SEO活动和报告的视觉证据。

🛡️ 安全设备

将潜在危险内容视为安全图像。非常适合电子邮件和网络安全系统。

⚡ 全屏截图

自动全屏截图。使用API驱动的工作流节省时间和金钱。

高级功能

  • 智能高速缓存：具有可配置TTL和策略的多层缓存
  • 批处理：排队多个URL以实现高效处理
  • 作业管理：跟踪、取消和重试屏幕截图作业
  • 性能监控：实时指标和警报
  • 浏览器池：优化浏览器实例管理
  • 速率限制：可配置的请求速率限制
  • 安全：API密钥身份验证和签名的URL
  • 网络钩子：作业完成事件通知和警报

MCP资源暴露

截图资源

  • screenshot://url -基本网站截图
  • screenshot://url/fullpage -全页面截图
  • screenshot://url/animated -动画加载顺序

管理资源

  • jobs://jobId -工作状态和结果
  • queue://stats -队列性能指标
  • cache://stats -缓存统计数据和命中率
  • performance://metrics -系统性能数据
  • browser://stats -浏览器池统计信息

架构资源

  • schemas://options -屏幕截图选项模式
  • schemas://devices -设备预设规格
  • schemas://formats -支持的图像格式

MCP工具可用

核心工具

  • takeScreenshot -使用选项捕获单个屏幕截图
  • batchCapture -排队处理多个URL
  • prefetch -预缓存截图以加快交付速度
  • refreshCache -强制缓存失效
  • analyzePage -提取页面元数据和建议

管理工具

  • listJobs -列出并筛选屏幕截图作业
  • cancelJob -取消待处理的作业
  • retryJob -重试失败的作业
  • testUrl -测试URL的可访问性和性能
  • getPerformanceReport -生成系统性能报告

🚀 快速开始

安装

选项1:NPM安装（推荐）

```bash

全局安装

npm安装-g@redeye/mcp服务器

或者在项目中本地安装

npm安装@redeye/mcp服务器 ```

选项2：手动安装

```bash 克隆https://github.com/redeye-team/redeye-mcp-server cd-redeye mcp服务器 npm安装 npm运行构建 ```

运行服务器

如果通过NPM安装：

```bash

全球安装

红眼mcp服务器

本地安装

npx@redeye/mcp服务器 ```

如果手动安装：

```bash npm启动 ```

使用MCP检查员进行测试

```bash npx@modelcontextprotocol/检查器节点dist/server.js ```

⚙️ 配置

服务器可以通过环境变量进行配置：

```bash

安全

MCP_SECRET_KEY=此处为您的密钥

缓存设置

CACHE_DIR=。/高速缓存 MAX_MEMORY_entrys=100 最大内存大小=104857600#100MB

浏览器池

最大浏览器数=3 每个浏览器的最大页面数=5

速率限制

速率_极限_温度_MS=60000#1分钟 速率_限制_请求=100 ```

📖 用法

MCP客户端使用示例

```打字稿 //截图 const result=await-client.callTool（'takeScreenshot'{ url:'https://example.com', 选项：{ 宽度：1200， 设备：“桌面”， 格式：“png”， 延迟：2 } });

//批量捕获多个URL const batchResult=等待客户端。callTool（“batchCapture”{ 网址：['https://example.com', 'https://google.com'], 选项：{设备：“mobile”，格式：“jpg”} });

//检查作业状态 const jobStatus=等待客户端.readResource(jobs://${jobId});

//获取性能指标 const metrics=等待客户端.readResource（'performance://metrics'); ```

屏幕截图选项

```打字稿 界面截图选项{ 宽度？：编号；//截图宽度（默认值：1200） pH值为8？：编号；//裁剪到特定高度 整页？：布尔值；//捕获整个页面（默认值：false） 延迟？：编号；//等待时间（秒）（默认值：0） 设备？：“桌面”|“移动”|“平板电脑”；//设备类型 格式？：“png”|“jpg”|“gif”；//输出格式 最大年龄？：编号；//缓存TTL（秒）（默认值：3600） 质量？：编号；//JPEG质量1-100（默认值：90） } ```

🏗️ 建筑

核心组件

  1. 红眼MCP服务器 (lib/mcp-server.ts)-主服务器实施
  2. 截图服务 (lib/screenshot-service.ts)-浏览器自动化和捕获
  3. 浏览器池 (lib/browser-pool.ts)-高效的浏览器实例管理
  4. 缓存服务 (lib/cache-service.ts)-多层缓存系统
  5. 作业队列 (lib/job-queue.ts)-批处理和作业管理
  6. 性能监视器 (lib/performance-monitor.ts)-实时指标和警报

高级功能

  • 缓存策略 (lib/cache-strategies.ts)-可配置的缓存行为
  • 速率限制器 (lib/rate-limiter.ts)-请求限制
  • 国家安全机构 (lib/security-service.ts)-身份验证和授权
  • Webhook服务 (lib/webhook-service.ts)-事件通知
  • 高级屏幕截图功能 (lib/advanced-screenshot-features.ts)-元素捕获、响应测试、比较

🔧 Claude桌面集成

连接到克劳德桌面

选项1:NPM安装（推荐）

如果您是通过npm安装的，请将以下内容添加到您的Claude Desktop配置中：

```json { “mcpServers”：{ “红眼”：{ “命令”：“npx”， “args”：[“@redeye/mcp服务器”] } } } ```

选项2：全局安装

如果全局安装：

```json { “mcpServers”：{ “红眼”：{ “命令”：“redeye mcp服务器” } } } ```

方案3：地方发展

对于本地开发建筑：

```json { “mcpServers”：{ “红眼”：{ “command”：“node”， “args”：[“/aolute/path/to/redeye-mcp-server/dist/server.js”] } } } ```

重要：替换 /absolute/path/to/redeye-mcp-server 带有克隆此存储库的实际路径。

备注：MCP服务器在本地运行，而不是通过URL。配置应指向您的本地安装，而不是指向 https://redeye-mcp.vercel.app.

克劳德入门

  1. 将配置添加到Claude Desktop配置文件中
  2. 重新启动Claude Desktop以加载MCP服务器
  3. 问克劳德：“截图https://example.com"
  4. 在您的AI对话中享受实时网站截图！

⚡ 性能优化

  • 浏览器池：重用浏览器实例以减少启动开销
  • 智能高速缓存：具有LRU逐出功能的多个缓存层
  • 资源阻塞：阻止广告和分析以加快加载速度
  • 并发处理：并行屏幕截图生成
  • 内存管理：自动清理和监控

🔒 安全特性

  • API密钥验证：安全访问控制
  • 已签名的URL：有时限、防篡改的URL
  • 裁判验证：基于域的访问控制
  • 速率限制：防止滥用并确保公平使用
  • 请求消毒：输入验证和净化

📊 监测和可观察性

  • 实时度量：处理时间、缓存命中率、错误率
  • 性能警报：基于阈值的自动警报
  • 资源使用情况：内存、CPU和浏览器池统计信息
  • 作业跟踪：完成所有截图请求的审计跟踪
  • Webhook通知：外部系统集成

🚀 现场演示

访问 https://redeye-mcp.vercel.app 尝试RedEye的实时截图功能：

  1. 输入任何网站URL
  2. 点击“捕获”
  3. 观看您的屏幕截图立即显示
  4. 体验实时网站快照的强大功能

备注：网络演示显示了在本地安装服务器时通过MCP提供的相同屏幕截图功能。

📚 文档

有关综合文档，请访问： https://redeye-mcp.vercel.app/docs

🤝 贡献

  1. 复刻仓库
  2. 创建要素分支
  3. 进行更改
  4. 如果适用，添加测试
  5. 提交拉取请求

📄 许可证

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

💬 支持

对于问题和疑问：

红眼MCP服务器 -唯一一个在您请求时立即流式传输截图的网站快照生成器。由模型上下文协议提供支持，实现无缝的AI集成。

🌐 住在: https://redeye-mcp.vercel.app 📦 NPM: npm install -g @redeye/mcp-server

相关 MCP