Sample MCP Server - TypeScript (web-automation-server)

[crivetimihai]

Overview

Create a sample MCP Server in TypeScript that provides web automation capabilities including browser automation, web scraping, API testing, and UI interaction using Playwright and modern web technologies.

Server Specifications

Server Details

• Name: web-automation-server
• Language: TypeScript 5.3+
• Location: mcp-servers/typescript/web-automation-server/
• Purpose: Demonstrate web automation and testing workflows via MCP

Core Features

• Browser automation (Chromium, Firefox, WebKit)
• Web scraping with intelligent parsing
• API testing and validation
• UI interaction and testing
• Screenshot and PDF generation
• Performance monitoring

Tools Provided

1. navigate_page

Navigate to web pages with advanced options

interface NavigatePageRequest {
  url: string;
  browserType?: 'chromium' | 'firefox' | 'webkit';
  waitFor?: 'load' | 'networkidle' | 'domcontentloaded';
  timeout?: number;
  userAgent?: string;
  viewport?: { width: number; height: number };
  headers?: Record<string, string>;
}

2. extract_data

Extract structured data from web pages

interface ExtractDataRequest {
  url?: string;  // If not provided, use current page
  selectors: Record<string, string | SelectorConfig>;
  extractType: 'text' | 'html' | 'attributes' | 'links' | 'images';
  waitForSelector?: string;
  pagination?: PaginationConfig;
  outputFormat: 'json' | 'csv' | 'xml';
}

interface SelectorConfig {
  selector: string;
  attribute?: string;
  multiple?: boolean;
  transform?: 'trim' | 'lowercase' | 'uppercase' | 'number';
}

3. interact_with_element

Perform UI interactions with web elements

interface InteractRequest {
  action: 'click' | 'type' | 'select' | 'upload' | 'hover' | 'scroll';
  selector: string;
  value?: string;
  options?: {
    force?: boolean;
    timeout?: number;
    position?: { x: number; y: number };
    modifiers?: ('Alt' | 'Control' | 'Meta' | 'Shift')[];
  };
}

4. test_api_endpoint

Comprehensive API testing and validation

interface ApiTestRequest {
  url: string;
  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
  headers?: Record<string, string>;
  body?: any;
  expectedStatus?: number;
  expectedSchema?: object;  // JSON schema for response validation
  timeout?: number;
  followRedirects?: boolean;
  validateSSL?: boolean;
}

5. capture_screenshot

Take screenshots with various options

interface ScreenshotRequest {
  selector?: string;  // Element to capture, or full page if omitted
  format: 'png' | 'jpeg';
  quality?: number;   // For JPEG
  fullPage?: boolean;
  clip?: { x: number; y: number; width: number; height: number };
  saveAs?: string;    // File path to save
  base64?: boolean;   // Return as base64 string
}

6. generate_pdf

Generate PDF documents from web pages

interface PdfGenerationRequest {
  url?: string;       // If not provided, use current page
  format?: 'A4' | 'Letter' | 'Legal' | 'Tabloid';
  landscape?: boolean;
  margin?: { top: string; right: string; bottom: string; left: string };
  printBackground?: boolean;
  scale?: number;
  saveAs?: string;
  base64?: boolean;
}

7. monitor_performance

Web performance monitoring and analysis

interface PerformanceMonitorRequest {
  url: string;
  metrics: ('load_time' | 'first_paint' | 'largest_contentful_paint' | 'cumulative_layout_shift')[];
  device?: 'desktop' | 'mobile' | 'tablet';
  networkCondition?: 'fast3g' | 'slow3g' | 'offline';
  runs?: number;      // Number of test runs for averaging
  lighthouse?: boolean; // Include Lighthouse audit
}

8. run_automation_script

Execute complex multi-step automation workflows

interface AutomationScriptRequest {
  script: AutomationStep[];
  continueOnError?: boolean;
  screenshotOnError?: boolean;
  variables?: Record<string, any>;
  timeout?: number;
}

interface AutomationStep {
  action: string;
  parameters: Record<string, any>;
  condition?: string;     // JavaScript condition to evaluate
  retries?: number;
  delay?: number;         // Delay after step in ms
}

Advanced Features

• Multi-browser Support: Parallel execution across browser engines
• Mobile Simulation: Device emulation and responsive testing
• Network Simulation: Throttling and offline testing
• Visual Regression: Screenshot comparison testing
• Accessibility Testing: WCAG compliance checking
• Cookie Management: Session persistence and manipulation

Security Features

• Domain Restrictions: Configurable allowed/blocked domains
• Input Sanitization: Protection against malicious payloads
• File Upload Safety: Secure file handling and validation
• Rate Limiting: Prevent abuse and excessive resource usage
• Audit Logging: Complete activity logging for compliance

Acceptance Criteria

• TypeScript MCP server with 8+ web automation tools
• Multi-browser support (Chromium, Firefox, WebKit)
• Web scraping with intelligent data extraction
• UI interaction and automation capabilities
• API testing with schema validation
• Screenshot and PDF generation
• Performance monitoring integration
• Complex multi-step automation workflows
• Security features and domain restrictions
• Comprehensive test suite (>90% coverage)
• Complete documentation with automation examples

Priority

High - Demonstrates modern web development and testing patterns

Use Cases

• Automated web testing and QA
• Data collection and web scraping
• API testing and validation
• UI/UX testing and monitoring
• Performance benchmarking
• Content generation (PDF reports, screenshots)
• E-commerce automation
• Social media management