Skip to main content
Glama
upnorthmedia

Screenshot MCP

by upnorthmedia
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript

Screenshot MCP

A Model Context Protocol MCP server for capturing website screenshots with full page, element, and device size features.

Screenshot MCP

Features

  • Full-page screenshot capture with automatic scrolling

  • Element-specific screenshots using CSS selectors

  • Multiple device presets (mobile, tablet, desktop)

  • Custom viewport configurations

  • Advanced wait conditions (CSS selectors, network idle, custom delays)

  • Error handling and validation for secure operation

  • Rate limiting to prevent resource exhaustion

Related MCP server: webdev-mcp

Installation

  1. Clone or download this project

  2. Move to the directory: cd /path/to/ScreenshotMCP

  3. rename .env.example to .env

  4. Install dependencies: npm install

  5. Start Server: npm start

Using with Claude Code

You can use Screenshot MCP directly within the Claude Code CLI or Claude Desktop to capture screenshots as part of your development workflow.

For Claude Code CLI: Add to your ~/.config/claude/mcp_servers.json:

{
  "screenshot-full-page-mcp": {
    "command": "node",
    "args": ["/path/to/screenshot-full-page-mcp/index.js"]
  }
}

or

claude mcp add screenshot-full-page-mcp node ./index.js

For Claude Desktop: Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "screenshot-full-page-mcp": {
      "command": "node",
      "args": ["/path/to/screenshot-full-page-mcp/index.js"]
    }
  }
}

Using with Cursor

You can use Screenshot MCP directly within the Cursor IDE to capture screenshots as part of your development workflow.

  1. Open Cursor.

  2. Go to Settings > MCP Servers.

  3. Add a new MCP server entry for Screenshot MCP:

    {
  "mcpServers": {
    "screenshot-full-page-mcp": {
      "command": "node",
      "args": ["/path/to/screenshot-full-page-mcp/index.js"]
    }
  }
}

  4. Save your settings.

Usage

Once configured, you can use natural language commands with Claude Code:

Basic Screenshot

"Take a screenshot of https://example.com"

Mobile Screenshot

"Capture a mobile screenshot of https://myapp.com"

Custom Viewport

"Screenshot https://myapp.com at 1024x768 resolution"

Wait for Element

"Take a screenshot of https://example.com after the loading spinner disappears"

Element Screenshot

"Capture just the navigation bar from https://example.com"

Available Tools

capture_screenshot

Captures a full-page screenshot with advanced configuration options.

Parameters:

  • url (required): The webpage URL to screenshot

  • viewport: Viewport configuration

    • preset: Device preset (mobile, tablet, desktop)

    • width: Custom width in pixels (100-5000)

    • height: Custom height in pixels (100-5000)

    • deviceScaleFactor: Scale factor (0.1-3)

    • isMobile: Mobile device emulation

    • hasTouch: Touch support emulation

  • waitFor: Wait conditions

    • type: selector, function, timeout, or networkidle

    • value: CSS selector, function, or timeout value

    • timeout: Wait timeout in milliseconds

  • delay: Additional delay before screenshot

  • waitUntil: Navigation completion condition

capture_element

Captures a screenshot of a specific page element.

Parameters:

  • url (required): The webpage URL

  • selector (required): CSS selector for the target element

  • viewport: Viewport configuration (same as above)

list_device_presets

Lists all available device presets with their configurations.

Device Presets

Preset

Width

Height

Scale

Mobile

Touch

mobile

375px

667px

2x

Yes

Yes

tablet

768px

1024px

2x

Yes

Yes

desktop

1920px

1080px

1x

No

No

Configuration

Environment variables can be set in the .env file:

# Browser Configuration
BROWSER_HEADLESS=true
BROWSER_TIMEOUT=30000
MAX_CONCURRENT_SCREENSHOTS=5

# Screenshot Defaults
DEFAULT_VIEWPORT_WIDTH=1920
DEFAULT_VIEWPORT_HEIGHT=1080
DEFAULT_WAIT_TIMEOUT=10000

# Security
RATE_LIMIT_REQUESTS=100
RATE_LIMIT_WINDOW=60000

# Debug
DEBUG=false
LOG_LEVEL=info

Security Features

  • URL validation (HTTP/HTTPS only)

  • CSS selector sanitization

  • Rate limiting for concurrent requests

  • Sandboxed browser execution

  • Input validation and error handling

System Requirements

  • Node.js 18+

  • Chrome/Chromium browser (installed automatically with Puppeteer)

  • Minimum 2GB RAM

  • 500MB disk space

Troubleshooting

Common Issues

  1. Browser launch fails:

    • Ensure sufficient system resources

    • Check if Chrome/Chromium is properly installed

    • Try setting BROWSER_HEADLESS=false for debugging

  2. Screenshot timeout:

    • Increase BROWSER_TIMEOUT in .env

    • Check if the target website loads properly

    • Use appropriate waitUntil conditions

  3. Memory issues:

    • Reduce MAX_CONCURRENT_SCREENSHOTS

    • Restart the MCP server periodically

    • Monitor system memory usage

Debug Mode

Enable debug mode by setting DEBUG=true in .env file for detailed logging.

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:

  • Open an issue on GitHub

  • Check the troubleshooting section

  • Review the MCP documentation

Available Tools

3 tools
capture_elementC

Capture a screenshot of a specific element on a webpage

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesThe URL of the webpage
selectorYesCSS selector for the element to capture
viewportNoViewport configuration
standardDelayNoWhether to apply standard 2.5s delay after networkidle2 for better stability

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool captures screenshots but doesn't mention critical behaviors like network delays, viewport handling, error conditions, or output format (e.g., image data). The description is too minimal for a tool that interacts with webpages and has multiple parameters.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without any fluff. It's appropriately sized and front-loaded, making it easy for an agent to parse quickly.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (webpage interaction, multiple parameters including nested objects) and lack of annotations and output schema, the description is insufficient. It doesn't explain what the tool returns (e.g., image bytes, file path), error handling, or behavioral details like the 'standardDelay' parameter's effect, leaving significant gaps for agent understanding.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema fully documents all parameters. The description adds no additional semantic context about parameters beyond implying 'selector' targets an element, which is already clear from the schema. This meets the baseline for high schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('capture a screenshot') and target ('specific element on a webpage'), which is specific and actionable. However, it doesn't explicitly distinguish this tool from its sibling 'capture_screenshot' (which presumably captures the entire page rather than an element), missing full sibling differentiation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives like 'capture_screenshot' or 'list_device_presets'. There's no mention of prerequisites, use cases, or exclusions, leaving the agent to infer usage from the tool name alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

capture_screenshotC

Capture a full-page screenshot of a webpage with advanced options

ParametersJSON Schema
NameRequiredDescriptionDefault
urlYesThe URL of the webpage to screenshot
viewportNoViewport configuration
waitForNoWait condition before taking screenshot
standardDelayNoWhether to apply standard 2.5s delay after networkidle2 for better stability
delayNoAdditional delay in milliseconds before taking screenshot
waitUntilNoWhen to consider navigation completenetworkidle2

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden but offers minimal behavioral insight. It mentions 'advanced options' but doesn't explain what these entail (e.g., viewport configuration, wait conditions, delays), nor does it cover performance implications, error handling, or output format. This leaves significant gaps for an agent to understand tool behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It's appropriately sized and front-loaded with the core functionality.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a complex tool with 6 parameters, nested objects, no annotations, and no output schema, the description is inadequate. It doesn't explain the 'advanced options', behavioral traits like performance or errors, or what the tool returns (e.g., image format, size). The agent lacks sufficient context to use this tool effectively.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, providing detailed documentation for all parameters. The description adds no parameter-specific information beyond the generic 'advanced options' reference, which doesn't clarify individual parameters. Baseline 3 is appropriate since the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('capture a full-page screenshot') and resource ('webpage'), with the qualifier 'with advanced options' hinting at additional capabilities. However, it doesn't explicitly differentiate from sibling tools like 'capture_element' which likely captures specific elements rather than full pages.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided about when to use this tool versus alternatives like 'capture_element' or 'list_device_presets'. The description mentions 'advanced options' but doesn't specify scenarios where these are beneficial or when simpler alternatives might suffice.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_device_presetsB

List available device presets with their configurations

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It mentions listing 'available device presets with their configurations,' which implies a read-only operation, but doesn't specify whether this requires authentication, how results are returned (e.g., pagination, format), or any rate limits. This leaves significant gaps in understanding the tool's behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, clear sentence that directly states the tool's purpose without any fluff or redundant information. It is front-loaded and efficiently communicates the essential action, making it highly concise and well-structured.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's simplicity (0 parameters, no output schema, no annotations), the description is adequate as a basic read operation. However, it lacks details on output format, authentication needs, or error handling, which could be important for an agent. It meets the minimum viable standard but has clear gaps in completeness.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 0 parameters with 100% coverage, meaning no parameters are defined. The description doesn't need to add parameter details, so it appropriately avoids redundancy. A baseline of 4 is applied since no parameters exist, and the description doesn't introduce unnecessary complexity.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('List') and the resource ('device presets with their configurations'), making the purpose immediately understandable. It doesn't differentiate from sibling tools (capture_element, capture_screenshot), which are unrelated capture operations, so it doesn't reach the highest score for sibling differentiation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives or in what context. It simply states what the tool does without indicating prerequisites, timing, or comparisons to other tools, leaving the agent with no usage direction.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 3 tool updates
    • First observedcapture_element
    • First observedcapture_screenshot
    • First observedlist_device_presets
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

B3.2/5.0

Scored across 3 tools

Disambiguation5/5

Each tool has a clearly distinct purpose: capture_element targets specific webpage elements, capture_screenshot handles full-page captures with advanced options, and list_device_presets deals with device configurations. There is no overlap or ambiguity between these functions.

Naming Consistency4/5

The naming follows a consistent verb_noun pattern (capture_element, capture_screenshot, list_device_presets), with all tools using snake_case. The minor deviation is that list_device_presets uses 'list' instead of 'capture', but this is appropriate for its distinct function.

Tool Count3/5

With only 3 tools, the count feels thin for a screenshot domain that might benefit from additional operations like managing screenshots or adjusting capture settings. However, it covers core capture functions adequately.

Completeness3/5

The toolset covers basic screenshot capture (element and full-page) and device preset listing, but lacks operations for managing captured screenshots (e.g., save, delete, annotate) or advanced configuration beyond presets. This creates minor gaps in the workflow.

Maintenance

ActivitySlowing
ResponsivenessSlow

Resources

Related MCP Connectors

Related MCP Servers

Appeared in Searches