Webtools MCP Server

by misterboe

194 downloads Not rated yet MIT

GitHub

Other

About

# Webtools MCP Server ⚠️ **IMPORTANT DISCLAIMER**: This software has been developed with the assistance of AI technology. It is provided as-is and should NOT be used in production environments without thorough testing and validation. The code may contain errors, security vulnerabilities, or unexpected behavior. Use at…

Details

License: MIT

Explore

- Raw HTML extraction with JavaScript rendering and proxy support
- Markdown conversion with clean content and link preservation
- Screenshot capture with full‑page, element‑specific, and device emulation
- Debug console with network monitoring, error tracking, and performance metrics
- Lighthouse audits for performance, accessibility, SEO, and best practices
- Advanced performance tools: tracing, network analysis, code coverage, web vitals, cross‑device testing
- Token usage optimization via presets (up to 89% reduction)
- Configurable proxy, browser viewport, device presets, and network conditions

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Webtools MCP Server

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

From the repository

- Node.js: Version 14 or higher
- Chrome/Chromium: Automatically provided by Puppeteer
- The server will use Puppeteer's bundled Chrome
- No need to install Chrome separately

claude mcp add webtools-basic --env ENABLED_TOOLS=BASIC -- npx -y @bschauer/webtools-mcp-server@latest



Once configured, you can ask Claude:

- "Please extract the main content from https://example.com"

- "Take a screenshot of https://google.com"

- "Analyze the performance of https://news.ycombinator.com"
By default, all tools are loaded (~10.3k tokens). You can reduce token usage by enabling only the tools you need:
1. Environment Variable: ENABLED_TOOLS=<preset|tools>

2. CLI Argument: --tools=<preset|tools>
export ENABLED_TOOLS=WEB

npx @bschauer/webtools-mcp-server

{
  "mcpServers": {
    "webtools": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"]
    }
  }
}

Basic Tools Only (89% Token Reduction)

{

  "mcpServers": {

    "webtools-basic": {

      "command": "npx",

      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],

      "env": {

        "ENABLED_TOOLS": "BASIC"

      }

    }

  }

}

Web Content + Screenshots

{

  "mcpServers": {

    "webtools-web": {

      "command": "npx",

      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],

      "env": {

        "ENABLED_TOOLS": "WEB"

      }

    }

  }

}

Performance Analysis Only

{

  "mcpServers": {

    "webtools-perf": {

      "command": "npx",

      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],

      "env": {

        "ENABLED_TOOLS": "PERFORMANCE"

      }

    }

  }

}

Custom Tool Selection

{

  "mcpServers": {

    "webtools-custom": {

      "command": "npx",

      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],

      "env": {

        "ENABLED_TOOLS": "webtool_gethtml,webtool_readpage,webtool_screenshot,webtool_debug"

      }

    }

  }

}

Using CLI Arguments (Alternative)

{

  "mcpServers": {

    "webtools": {

      "command": "npx",

      "args": ["-y", "@bschauer/webtools-mcp-server@latest", "--tools=BASIC"]

    }

  }

}


claude mcp add webtools -- npx -y @bschauer/webtools-mcp-server@latest


claude mcp add webtools-basic -- npx -y @bschauer/webtools-mcp-server@latest --tools=BASIC
claude mcp add webtools-perf -- npx -y @bschauer/webtools-mcp-server@latest --tools=PERFORMANCE

bash

claude mcp add webtools-basic --scope project --env ENABLED_TOOLS=BASIC -- npx -y @bschauer/webtools-mcp-server@latest

You can also configure the server using environment variables:

- USE_PROXY: Enable proxy support (true/false)
- PROXY_URL: Proxy server URL
- PROXY_TIMEOUT: Proxy timeout in milliseconds
- IGNORE_SSL_ERRORS: Ignore SSL certificate errors by default for all tools (true/false) - useful for development environments like DDEV

- Note: Chrome is now automatically installed via Puppeteer - no additional steps required
- If you encounter any Chrome-related issues, try reinstalling the package with npm install -g @bschauer/webtools-mcp-server

`webtool_gethtml`

Get the HTML content of a webpage. Automatically handles retries and proxy if needed.

`webtool_readpage`

Get the webpage content in Markdown format, including links and images. Handles blocked access automatically.

`webtool_screenshot`

Take a screenshot of a webpage or specific element on the page with custom device emulation

`webtool_debug`

Debug a webpage by capturing console output, network requests, errors, and layout thrashing with custom device emulation. Includes advanced response size management with pagination, output limits, and compact formatting to stay within MCP token limits.

`webtool_lighthouse`

Run a Lighthouse audit on a webpage to generate a comprehensive performance report with detailed resource analysis. The report includes specific file paths, resource sizes, and performance metrics similar to Chrome DevTools. Identifies exact files causing performance issues without offering improvement suggestions.

`webtool_performance_trace`

Perform a detailed performance analysis with specialized modules for layout thrashing, CSS variables impact, JavaScript execution timeline, long tasks breakdown, memory and DOM growth analysis, and resource loading optimization. Provides actionable recommendations for performance improvements.

`webtool_coverage_analysis`

Analyze JavaScript and CSS coverage to identify unused code and optimization opportunities. Uses Chrome DevTools Protocol Coverage API to provide detailed insights into code usage.

`webtool_web_vitals`

Analyze Core Web Vitals metrics (LCP, CLS, FID/INP, TTFB) and identify problematic elements affecting these metrics. Uses Performance Observer API to provide detailed insights into real user experience metrics.

`webtool_network_monitor`

Analyze network activity and resource loading performance. Provides detailed insights into network requests, timing, and optimization opportunities.

`webtool_performance_test`

Run performance tests across different devices and network conditions. Compare results and identify device-specific or network-specific issues.

⚠️ IMPORTANT DISCLAIMER: This software has been developed with the assistance of AI technology. It is provided as-is and should NOT be used in production environments without thorough testing and validation. The code may contain errors, security vulnerabilities, or unexpected behavior. Use at your own risk for research, learning, or development purposes only.

A Model Context Protocol server providing comprehensive web analysis tools including HTML extraction, markdown conversion, screenshot capabilities, debug console, advanced performance analysis, and Lighthouse-powered web audits for performance, accessibility, SEO, and more.

- webtool_gethtml: Raw HTML content extraction
- JavaScript rendering support
- Proxy support
- Automatic retries
- webtool_readpage: Markdown conversion
- Clean content extraction
- Link preservation
- Image handling
- Custom selector support
- webtool_screenshot: Screenshot capture
- Full page screenshots
- Element-specific capture
- Device emulation
- Custom viewport settings
- webtool_debug: Debug console
- Console output capture
- Network request monitoring
- Error tracking
- Performance metrics
- Layout thrashing detection
- webtool_lighthouse: Comprehensive Web Audit
- Performance analysis
- Accessibility testing
- SEO evaluation
- Best practices review
- Progressive Web App assessment
- Device emulation support

- webtool_performance_trace: Advanced Performance Analysis
- Layout thrashing detection
- CSS variables impact analysis
- JavaScript execution timeline with layout correlation
- Long task breakdown and attribution
- Memory and DOM size analysis
- Resource loading optimization
- webtool_network_monitor: Network Activity Analysis
- Detailed request and response analysis
- Resource timing information
- Waterfall visualization data
- Optimization recommendations
- Third-party request analysis
- Cache analysis
- webtool_coverage_analysis: Code Coverage Analysis
- JavaScript and CSS coverage analysis
- Unused code identification
- Code splitting recommendations
- Third-party code analysis
- webtool_web_vitals: Core Web Vitals Analysis
- LCP (Largest Contentful Paint) analysis
- CLS (Cumulative Layout Shift) analysis
- FID/INP (First Input Delay/Interaction to Next Paint) analysis
- TTFB (Time to First Byte) analysis
- Element-specific analysis
- webtool_performance_test: Cross-device and Network Testing
- Multi-device testing
- Network condition simulation
- Comparative analysis
- Baseline comparison
- Device-specific recommendations

ENABLED_TOOLS=BASIC npx @bschauer/webtools-mcp-server

npx @bschauer/webtools-mcp-server --tools=PERFORMANCE

ENABLED_TOOLS=DEBUG npx @bschauer/webtools-mcp-server

npx @bschauer/webtools-mcp-server --tools=webtool_gethtml,webtool_readpage,webtool_screenshot

{
  "mcpServers": {
    "webtools": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"]
    }
  }
}

claude mcp add webtools -- npx -y @bschauer/webtools-mcp-server@latest

claude mcp add webtools-basic --env ENABLED_TOOLS=BASIC -- npx -y @bschauer/webtools-mcp-server@latest claude mcp add webtools-debug --env ENABLED_TOOLS=DEBUG -- npx -y @bschauer/webtools-mcp-server@latest

claude mcp add webtools-custom --env ENABLED_TOOLS=webtool_gethtml,webtool_readpage,webtool_screenshot -- npx -y @bschauer/webtools-mcp-server@latest

claude mcp add webtools-basic -- npx -y @bschauer/webtools-mcp-server@latest --tools=BASIC
claude mcp add webtools-perf -- npx -y @bschauer/webtools-mcp-server@latest --tools=PERFORMANCE
```

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "webtools mcp server": {
            "webtools-mcp-server": {
                "command": "npx",
                "args": [
                    "@bschauer/webtools-mcp-server"
                ]
            }
        }
    }
}

McpServers

{
    "webtools-mcp-server": {
        "command": "npx",
        "args": [
            "@bschauer/webtools-mcp-server"
        ]
    }
}

Prerequisites

- Node.js: Version 14 or higher
- Chrome/Chromium: Automatically provided by Puppeteer
- The server will use Puppeteer's bundled Chrome
- No need to install Chrome separately

Features

Core Tools

Performance Analysis Tools

MCP Prompts

- analyze-website: Comprehensive Website Analysis
- Performance, accessibility, SEO, and UX analysis
- Device type selection (mobile/desktop)
- Detailed recommendations tailored to device type
- Complete analysis report with actionable insights
- get-website-content: Content Extraction
- Main content extraction from any webpage
- Clean markdown conversion
- Removal of navigation, ads, and non-essential elements
- Preservation of important formatting and structure
- screenshot-website: Screenshot Capture
- Visual representation of webpage
- Full page capture
- Simple URL-based interface
- technical-performance-analysis: Technical Performance Analysis
- Detailed technical analysis of performance bottlenecks
- Code examples and optimization suggestions
- Focus area selection (JavaScript, rendering, resources, network)
- Performance metrics with severity assessment
- Actionable, code-level recommendations

Installation

You can install the package globally:

npm install -g @bschauer/webtools-mcp-server

Or use it directly with npx:

npx @bschauer/webtools-mcp-server

Quick Start

For Claude Desktop Users

{
  "mcpServers": {
    "webtools": {
      "command": "npx",
      "args": ["-y", "@bschauer/webtools-mcp-server@latest"],
      "env": {
        "ENABLED_TOOLS": "BASIC"
      }
    }
  }
}

This configuration uses only basic tools and reduces token usage by 89%.

For Claude Code Users

```bash

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Explore

Setting up with Highlight

From the repository

webtool_gethtml

webtool_readpage

webtool_screenshot

webtool_debug

webtool_lighthouse

webtool_performance_trace

webtool_coverage_analysis

webtool_web_vitals

webtool_network_monitor

webtool_performance_test

Claude Desktop / Cursor

McpServers

Prerequisites

Features

Core Tools

Performance Analysis Tools

MCP Prompts

Installation

Quick Start

For Claude Desktop Users

For Claude Code Users

More like this

Sequential Thinking

Filesystem

EverArt

Google Drive

`webtool_gethtml`

`webtool_readpage`

`webtool_screenshot`

`webtool_debug`

`webtool_lighthouse`

`webtool_performance_trace`

`webtool_coverage_analysis`

`webtool_web_vitals`

`webtool_network_monitor`

`webtool_performance_test`