Skip to main content
Glama
bingal

Webshot MCP

by bingal
OverviewSchemaRelated ServersScoreDiscussions
Python
Local

webshot-mcp

中文文档 | English

A MCP (Model Context Protocol) server for generating web page screenshots, implemented with Playwright.

Features

  • 🌐 Support for any web page screenshots

  • 📱 Support for multiple device types (desktop, mobile, tablet)

  • 🎨 Support for multiple image formats (PNG, JPEG, WebP)

  • 📏 Support for custom dimensions and DPI scaling

  • 🖼️ Support for full-page screenshots

  • 🗜️ Support for image quality compression

  • ⚡ Asynchronous processing for excellent performance

Related MCP server: MCP Browser Screenshot Server

Usage

As MCP Server

Method 1: Run directly with uvx (Recommended)

{
  "mcpServers": {
    "webshot": {
      "command": "uvx",
      "args": ["webshot-mcp"]
    }
  }
}

Method 2: Use with Claude Code

Claude Code can be configured to use this MCP server in two ways:

Option A: Using the CLI wizard

claude mcp add

Then follow the prompts to add webshot-mcp.

Option B: Direct config file editing (Recommended)

Edit your Claude Code configuration file (~/.claude.json) and add:

{
  "mcpServers": {
    "webshot": {
      "type": "stdio",
      "command": "uvx",
      "args": ["webshot-mcp"]
    }
  }
}

After editing the config file, restart Claude Code to apply the changes.

Method 3: Install with pip and run

# Install webshot-mcp
pip install webshot-mcp
# Install chromium browser
playwright install chromium

Then add to your MCP client configuration:

For Claude Desktop (claude_desktop_config.json):

{
  "mcpServers": {
    "webshot": {
      "command": "webshot-mcp"
    }
  }
}

For Claude Code (~/.claude.json):

{
  "mcpServers": {
    "webshot": {
      "type": "stdio",
      "command": "webshot-mcp"
    }
  }
}

Tool Parameters

The webshot tool supports the following parameters:

Required Parameters

  • url (string): URL of the web page to screenshot

  • output (string): Path to save the screenshot file

Optional Parameters

  • width (integer): Browser window width, default 1280

  • height (integer): Browser window height, default 768. Set to 0 for full-page screenshot

  • dpi_scale (number): DPI scaling ratio, default 2

  • device (string): Device type, options:

    • desktop (default): Desktop device

    • mobile: Mobile device (iPhone 13)

    • tablet: Tablet device (iPad Pro)

  • format (string): Image format, options:

    • png (default): PNG format

    • jpeg: JPEG format

    • webp: WebP format

  • quality (integer): Image quality (0-100), default 100. Only effective for JPEG and WebP formats

Usage Examples

Full-page Screenshot (Long Screenshot) Prompt Reference

Please generate a full-page screenshot of www.baidu.com, save it as WebP format to /Users/ben/Downloads/screenshot-baidu-1.webp

Custom Size Screenshot Prompt Reference

Please generate a screenshot of www.baidu.com with dimensions 1280x720, save it as WebP format to /Users/ben/Downloads/screenshot-baidu-2.webp

Mobile Device Screenshot Prompt Reference

Note: Mobile and tablet devices will use their actual device dimensions, ignoring custom size parameters

Please generate a mobile screenshot of www.baidu.com, save it as WebP format to /Users/ben/Downloads/screenshot-mobile.webp

Tablet Device Screenshot Prompt Reference

Please generate a tablet screenshot of www.baidu.com, save it as PNG format to /Users/ben/Downloads/screenshot-tablet.png

Custom Format and Quality Prompt Reference

Please generate a screenshot of www.baidu.com, save it as JPEG format with 80% quality to /Users/ben/Downloads/screenshot.jpg

High-resolution Desktop Screenshot Prompt Reference

Please generate a high-resolution screenshot of www.github.com with dimensions 1920x1080, save it as PNG format to /Users/ben/Downloads/github-hd.png

Batch Screenshots Prompt Reference

Please generate screenshots for the following websites and save them to /Users/ben/Downloads/:
1. www.google.com - full page, WebP format, filename: google-full.webp
2. www.github.com - 1280x720 size, JPEG format 90% quality, filename: github.jpg
3. www.stackoverflow.com - mobile view, PNG format, filename: stackoverflow-mobile.png

Development

Run Tests

uv run pytest

Code Structure

webshot-mcp/
├── src/webshot_mcp/
│   ├── __init__.py
│   ├── cli.py          # CLI entry point
│   └── server.py       # MCP server implementation
├── tests/
│   └── test_server.py  # Test cases
├── pyproject.toml      # Project configuration
└── README.md

Tech Stack

  • MCP: Model Context Protocol framework

  • Playwright: Browser automation and screenshots

  • Pillow: Image processing and compression

  • asyncio: Asynchronous programming support

Publishing

Build and Publish to PyPI

# Install build tools
uv add --dev build twine

# Build package
uv run python -m build

# Publish to PyPI
uv run twine upload dist/*

License

MIT License

Contributing

Issues and Pull Requests are welcome!

Changelog

v0.1.0

  • Initial release

  • Support for basic web page screenshot functionality

  • Support for multiple device types and image formats

  • Support for image quality compression and size adjustment

Available Tools

1 tool
webshotC

生成网页截图

ParametersJSON Schema
NameRequiredDescriptionDefault
deviceNo截图设备类型desktop
dpi_scaleNoDPI 缩放比例
formatNo截图文件格式png
heightNo浏览器窗口高度，0表示全页面截图
outputYes截图文件保存路径，比如: /path/to/screenshot.png
qualityNo图片质量（仅对 jpeg 和 webp 有效）
urlYes要截图的网页 URL，比如: https://www.baidu.com
widthNo浏览器窗口宽度

TDQS

C2.7/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 states the action ('生成' meaning generate/creates) but doesn't mention side effects (e.g., file creation, network usage), performance aspects (e.g., speed, rate limits), or error handling. This leaves significant gaps for a tool that performs external operations.

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 extremely concise with a single phrase ('生成网页截图'), which is front-loaded and wastes no words. For a tool with a well-documented schema, this brevity is appropriate, though it may sacrifice completeness.

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 (8 parameters, no output schema, no annotations), the description is inadequate. It doesn't explain return values (e.g., file path, error messages), behavioral traits, or usage context, leaving the agent to rely solely on the schema for operational details.

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?

The description adds no parameter-specific information beyond the input schema, which has 100% coverage with detailed descriptions for all 8 parameters. Since the schema fully documents parameters like 'url' and 'output', the description doesn't need to compensate, but it also doesn't enhance understanding of parameter interactions or defaults.

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

Purpose3/5

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

The description '生成网页截图' (generate webpage screenshot) clearly states the verb (generate) and resource (webpage screenshot), making the purpose understandable. However, it lacks specificity about the tool's scope or any distinguishing features, and with no sibling tools, differentiation isn't needed but the description remains somewhat vague.

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, such as prerequisites (e.g., internet access, URL validity), alternatives, or constraints (e.g., timeouts, size limits). With no sibling tools, explicit alternatives aren't required, but general usage context is missing.

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

Install Server
RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

TDQS

C2.9/5.0
Disambiguation5/5

With only one tool, there is no possibility of confusion or overlap between tools. The single tool 'webshot' has a clear and distinct purpose of generating webpage screenshots, leaving no ambiguity for an agent to misselect between multiple options.

Naming Consistency5/5

The naming is perfectly consistent as there is only one tool, 'webshot', which follows a clear and descriptive pattern. There are no other tools to compare against, so no inconsistencies in verb_noun patterns or style mixing can arise.

Tool Count2/5

A single tool is generally too few for most server purposes, as it limits functionality and may indicate an incomplete or overly narrow scope. For a webshot server, one tool might suffice for basic screenshot generation, but it lacks related operations like configuration, batch processing, or image editing, making it feel thin and potentially inadequate for broader use cases.

Completeness2/5

The server is severely incomplete for a webshot domain. While the single tool covers the core action of generating screenshots, there are obvious gaps such as setting parameters (e.g., resolution, timeout), handling errors, or managing multiple screenshots. This minimal surface will likely cause agent failures when more complex tasks are required beyond basic screenshot capture.

Maintenance

ActivityInactive
ResponsivenessSyncing

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

Appeared in Searches

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/bingal/webshot-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server