redeye-mcp-server

codedwithlikhon/redeye-mcp-server

3.1

If you are the rightful owner of redeye-mcp-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to dayong@mcphub.com.

RedEye MCP Server is a comprehensive Model Context Protocol server that provides real-time website screenshot services, featuring advanced capabilities like device emulation, batch processing, and performance monitoring.

Tools
5
Resources
0
Prompts
0

RedEye MCP Server

A comprehensive Model Context Protocol (MCP) server that provides real-time website screenshot services. RedEye is the only website snapshot generator to stream screenshots as soon as you request them, featuring advanced capabilities like device emulation, batch processing, and performance monitoring.

🚀 Key Features

Real-time Screenshot Streaming

  • Instant Delivery: Screenshots delivered as soon as you request them
  • Live Demo: Try it at https://redeye-mcp.vercel.app
  • Zero Latency: Optimized for speed with intelligent caching

Core Screenshot Capabilities

  • Real-time Screenshots: Capture screenshots of any publicly accessible website
  • Device Emulation: Support for desktop, mobile, and tablet viewports
  • Multiple Formats: PNG, JPEG, and GIF output formats
  • Full Page Capture: Option to capture entire page height
  • Custom Dimensions: Configurable width and crop height
  • Delay Support: Wait for dynamic content to load before capture

Use Cases

📸 Website Snapshots

Archive snapshots of your website over time. Perfect for tracking changes and maintaining historical records.

📱 Mobile Emulation / Responsive Design

Test sites on different devices with responsive design testing. Check how your site looks across all screen sizes.

👁️ Site Previews

Show customers previews of their work. Perfect for website builders and design tools.

🔍 SEO Monitoring

Prove linkbacks and rankings to clients. Visual evidence for SEO campaigns and reporting.

🛡️ Security Appliances

View potentially dangerous content as safe images. Perfect for email and web security systems.

⚡ Full Page Screen Capture

Automated full-page screenshots. Save time and money with API-driven workflows.

Advanced Features

  • Intelligent Caching: Multi-layer caching with configurable TTL and strategies
  • Batch Processing: Queue multiple URLs for efficient processing
  • Job Management: Track, cancel, and retry screenshot jobs
  • Performance Monitoring: Real-time metrics and alerting
  • Browser Pool: Optimized browser instance management
  • Rate Limiting: Configurable request rate limiting
  • Security: API key authentication and signed URLs
  • Webhooks: Event notifications for job completion and alerts

MCP Resources Exposed

Screenshot Resources
  • screenshot://url - Basic website screenshot
  • screenshot://url/fullpage - Full page screenshot
  • screenshot://url/animated - Animated loading sequence
Management Resources
  • jobs://jobId - Job status and results
  • queue://stats - Queue performance metrics
  • cache://stats - Cache statistics and hit rates
  • performance://metrics - System performance data
  • browser://stats - Browser pool statistics
Schema Resources
  • schemas://options - Screenshot options schema
  • schemas://devices - Device preset specifications
  • schemas://formats - Supported image formats

MCP Tools Available

Core Tools
  • takeScreenshot - Capture single screenshot with options
  • batchCapture - Queue multiple URLs for processing
  • prefetch - Pre-cache screenshots for faster delivery
  • refreshCache - Force cache invalidation
  • analyzePage - Extract page metadata and recommendations
Management Tools
  • listJobs - List and filter screenshot jobs
  • cancelJob - Cancel pending jobs
  • retryJob - Retry failed jobs
  • testUrl - Test URL accessibility and performance
  • getPerformanceReport - Generate system performance reports

🚀 Quick Start

Installation

Option 1: NPM Installation (Recommended)

```bash

Install globally

npm install -g @redeye/mcp-server

Or install locally in your project

npm install @redeye/mcp-server ```

Option 2: Manual Installation

```bash git clone https://github.com/redeye-team/redeye-mcp-server cd redeye-mcp-server npm install npm run build ```

Running the Server

If installed via NPM:

```bash

Global installation

redeye-mcp-server

Local installation

npx @redeye/mcp-server ```

If installed manually:

```bash npm start ```

Test with MCP Inspector

```bash npx @modelcontextprotocol/inspector node dist/server.js ```

⚙️ Configuration

The server can be configured through environment variables:

```bash

Security

MCP_SECRET_KEY=your-secret-key-here

Cache settings

CACHE_DIR=./cache MAX_MEMORY_ENTRIES=100 MAX_MEMORY_SIZE=104857600 # 100MB

Browser pool

MAX_BROWSERS=3 MAX_PAGES_PER_BROWSER=5

Rate limiting

RATE_LIMIT_WINDOW_MS=60000 # 1 minute RATE_LIMIT_MAX_REQUESTS=100 ```

📖 Usage

Example MCP Client Usage

```typescript // Take a screenshot const result = await client.callTool('takeScreenshot', { url: 'https://example.com', options: { width: 1200, device: 'desktop', format: 'png', delay: 2 } });

// Batch capture multiple URLs const batchResult = await client.callTool('batchCapture', { urls: ['https://example.com', 'https://google.com'], options: { device: 'mobile', format: 'jpg' } });

// Check job status const jobStatus = await client.readResource(jobs://${jobId});

// Get performance metrics const metrics = await client.readResource('performance://metrics'); ```

Screenshot Options

```typescript interface ScreenshotOptions { width?: number; // Screenshot width (default: 1200) cropHeight?: number; // Crop to specific height fullPage?: boolean; // Capture full page (default: false) delay?: number; // Wait time in seconds (default: 0) device?: 'desktop' | 'mobile' | 'tablet'; // Device type format?: 'png' | 'jpg' | 'gif'; // Output format maxAge?: number; // Cache TTL in seconds (default: 3600) quality?: number; // JPEG quality 1-100 (default: 90) } ```

🏗️ Architecture

Core Components

  1. RedEye MCP Server (lib/mcp-server.ts) - Main server implementation
  2. Screenshot Service (lib/screenshot-service.ts) - Browser automation and capture
  3. Browser Pool (lib/browser-pool.ts) - Efficient browser instance management
  4. Cache Service (lib/cache-service.ts) - Multi-layer caching system
  5. Job Queue (lib/job-queue.ts) - Batch processing and job management
  6. Performance Monitor (lib/performance-monitor.ts) - Real-time metrics and alerting

Advanced Features

  • Cache Strategies (lib/cache-strategies.ts) - Configurable caching behavior
  • Rate Limiter (lib/rate-limiter.ts) - Request throttling
  • Security Service (lib/security-service.ts) - Authentication and authorization
  • Webhook Service (lib/webhook-service.ts) - Event notifications
  • Advanced Screenshot Features (lib/advanced-screenshot-features.ts) - Element capture, responsive testing, comparisons

🔧 Claude Desktop Integration

Connect to Claude Desktop

Option 1: NPM Installation (Recommended)

If you installed via npm, add this to your Claude Desktop config:

```json { "mcpServers": { "redeye": { "command": "npx", "args": ["@redeye/mcp-server"] } } } ```

Option 2: Global Installation

If you installed globally:

```json { "mcpServers": { "redeye": { "command": "redeye-mcp-server" } } } ```

Option 3: Local Development

For local development builds:

```json { "mcpServers": { "redeye": { "command": "node", "args": ["/absolute/path/to/redeye-mcp-server/dist/server.js"] } } } ```

Important: Replace /absolute/path/to/redeye-mcp-server with the actual path to where you cloned this repository.

Note: MCP servers run locally, not via URLs. The configuration should point to your local installation, not to https://redeye-mcp.vercel.app.

Getting Started with Claude

  1. Add the configuration to your Claude Desktop config file
  2. Restart Claude Desktop to load the MCP server
  3. Ask Claude: "Take a screenshot of https://example.com"
  4. Enjoy real-time website screenshots in your AI conversations!

⚡ Performance Optimization

  • Browser Pooling: Reuses browser instances to reduce startup overhead
  • Intelligent Caching: Multiple cache layers with LRU eviction
  • Resource Blocking: Blocks ads and analytics for faster loading
  • Concurrent Processing: Parallel screenshot generation
  • Memory Management: Automatic cleanup and monitoring

🔒 Security Features

  • API Key Authentication: Secure access control
  • Signed URLs: Time-limited, tamper-proof URLs
  • Referer Validation: Domain-based access control
  • Rate Limiting: Prevent abuse and ensure fair usage
  • Request Sanitization: Input validation and sanitization

📊 Monitoring and Observability

  • Real-time Metrics: Processing time, cache hit rates, error rates
  • Performance Alerts: Automatic threshold-based alerting
  • Resource Usage: Memory, CPU, and browser pool statistics
  • Job Tracking: Complete audit trail of all screenshot requests
  • Webhook Notifications: External system integration

🚀 Live Demo

Visit https://redeye-mcp.vercel.app to try RedEye's real-time screenshot capabilities:

  1. Enter any website URL
  2. Click "Capture"
  3. Watch as your screenshot appears instantly
  4. Experience the power of real-time website snapshots

Note: The web demo shows the same screenshot capabilities that will be available through MCP when you install the server locally.

📚 Documentation

For comprehensive documentation, visit: https://redeye-mcp.vercel.app/docs

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests if applicable
  5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

💬 Support

For issues and questions:

RedEye MCP Server - The only website snapshot generator to stream screenshots as soon as you request them. Powered by Model Context Protocol for seamless AI integration.

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