Fast, efficient screenshot capture of web pages - optimized for CLI coding tools. Automatically tiles full pages into 1072x1072 chunks for optimal processing. Built specifically for AI vision workflows, this tool captures high-quality screenshots with automatic resolution limiting and tiling for optimal processing by Claude Vision API and other AI models. It ensures screenshots are perfectly sized
Add this skill
npx mdskills install just-every/mcp-screenshot-website-fastWell-documented screenshot tool with Claude Vision optimization and auto-tiling, backed by clear examples
1# @just-every/mcp-screenshot-website-fast23Fast, efficient screenshot capture of web pages - optimized for CLI coding tools. Automatically tiles full pages into 1072x1072 chunks for optimal processing.45<a href="https://glama.ai/mcp/servers/@just-every/mcp-screenshot-website-fast">6 <img width="380" height="200" src="https://glama.ai/mcp/servers/@just-every/mcp-screenshot-website-fast/badge" alt="Screenshot Website Fast MCP server" />7</a>89[](https://www.npmjs.com/package/@just-every/mcp-screenshot-website-fast)10[](https://github.com/just-every/mcp-screenshot-website-fast/actions)1112## Overview1314Built specifically for AI vision workflows, this tool captures high-quality screenshots with automatic resolution limiting and tiling for optimal processing by Claude Vision API and other AI models. It ensures screenshots are perfectly sized at 1072x1072 pixels (1.15 megapixels) for maximum compatibility.1516## Features1718- 📸 **Fast screenshot capture** using Puppeteer headless browser19- 🎯 **Claude Vision optimized** with automatic resolution limiting (1072x1072 for optimal 1.15 megapixels)20- 🔲 **Automatic tiling** - Full pages are automatically split into 1072x1072 tiles21- 🎬 **Screencast capture** - Record series of screenshots over time with configurable intervals22- 🔄 **Always fresh content** - No caching ensures up-to-date screenshots23- 📱 **Configurable viewports** for responsive testing24- ⏱️ **Wait strategies** for dynamic content (networkidle, custom delays)25- 📄 **Full page capture** by default for complete page screenshots26- 🎥 **Animated WebP export** - Save screencasts as high-quality animated WebP files27- 💉 **JavaScript injection** - Execute custom JS before screencast capture28- 📦 **Minimal dependencies** for fast npm installs29- 🔌 **MCP integration** for seamless AI workflows30- 🔋 **Resource efficient** - Automatic browser cleanup after 60 seconds of inactivity31- 🧹 **Memory management** - Pages are closed after each screenshot to prevent leaks3233## Installation3435### Claude Code3637```bash38claude mcp add screenshot-website-fast -s user -- npx -y @just-every/mcp-screenshot-website-fast39```4041### VS Code4243```bash44code --add-mcp '{"name":"screenshot-website-fast","command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}'45```4647### Cursor4849```bash50cursor://anysphere.cursor-deeplink/mcp/install?name=screenshot-website-fast&config=eyJzY3JlZW5zaG90LXdlYnNpdGUtZmFzdCI6eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBqdXN0LWV2ZXJ5L21jcC1zY3JlZW5zaG90LXdlYnNpdGUtZmFzdCJdfX0=51```5253### JetBrains IDEs5455Settings → Tools → AI Assistant → Model Context Protocol (MCP) → Add5657Choose "As JSON" and paste:5859```json60{"command":"npx","args":["-y","@just-every/mcp-screenshot-website-fast"]}61```6263### Raw JSON (works in any MCP client)6465```json66{67 "mcpServers": {68 "screenshot-website-fast": {69 "command": "npx",70 "args": ["-y", "@just-every/mcp-screenshot-website-fast"]71 }72 }73}74```7576Drop this into your client's mcp.json (e.g. .vscode/mcp.json, ~/.cursor/mcp.json, or .mcp.json for Claude).7778## Prerequisites7980- Node.js 20.x or higher81- npm or npx82- Chrome/Chromium (automatically downloaded by Puppeteer)8384## Quick Start8586### MCP Server Usage8788Once installed in your IDE, the following tools are available:8990#### Available Tools9192- `take_screenshot` - Captures a high-quality screenshot of a webpage93 - Parameters:94 - `url` (required): The HTTP/HTTPS URL to capture95 - `width` (optional): Viewport width in pixels (max 1072, default: 1072)96 - `height` (optional): Viewport height in pixels (max 1072, default: 1072)97 - `fullPage` (optional): Capture full page screenshot with tiling (default: true)98 - `waitUntil` (optional): Wait until event: load, domcontentloaded, networkidle0, networkidle2 (default: domcontentloaded)99 - `waitFor` (optional): Additional wait time in milliseconds100 - `directory` (optional): Directory to save screenshots - returns file paths instead of base64 images101102#### Usage Examples103104**Default usage (returns base64 images):**105```106take_screenshot(url="https://example.com")107```108109**Save to directory (returns file paths):**110```111take_screenshot(url="https://example.com", directory="/path/to/screenshots")112```113114When using the `directory` parameter:115- Screenshots are saved as PNG files with timestamps116- File paths are returned instead of base64 data117- For tiled screenshots, each tile is saved as a separate file118- Directory is created automatically if it doesn't exist119120### take_screencast121122Captures a series of screenshots over time to create a screencast. Only captures the top tile (1072x1072) of the viewport.123124#### Parameters125- `url` (required): The URL to capture126- `duration` (optional): Total duration in seconds (default: 10)127- `interval` (optional): Interval between screenshots in seconds (default: 2)128- `jsEvaluate` (optional): JavaScript code to execute at the start129- `waitUntil` (optional): Wait strategy: 'load', 'domcontentloaded', 'networkidle0', 'networkidle2'130- `waitForMS` (optional): Additional wait time before starting131- `directory` (optional): Save as animated WebP to directory (captures every 1 second)132133#### Usage Examples134135**Basic screencast (5 frames over 10 seconds):**136```137take_screencast(url="https://example.com")138```139140**Custom timing:**141```142take_screencast(url="https://example.com", duration=15, interval=3)143```144145**With JavaScript execution:**146```147take_screencast(148 url="https://example.com",149 jsEvaluate="document.body.style.backgroundColor = 'red';"150)151```152153**Save as animated WebP:**154```155take_screencast(url="https://example.com", directory="/path/to/output")156```157158When using the `directory` parameter:159- An animated WebP is created with 1-second intervals160- Individual frames are also saved as PNG files161- The animation loops forever by default162- WebP provides excellent quality:163 - Full color support (no 256 color limitation)164 - Efficient compression for web animations165 - Perfect for gradient backgrounds and smooth animations166 - Smaller file sizes compared to GIF with better quality167168## Development Usage169170### Install171172```bash173npm install174npm run build175```176177### Capture screenshot178```bash179# Full page with automatic tiling (default)180npm run dev capture https://example.com -o screenshot.png181182# Viewport-only screenshot183npm run dev capture https://example.com --no-full-page -o screenshot.png184185# Wait for specific conditions186npm run dev capture https://example.com --wait-until networkidle0 --wait-for 2000 -o screenshot.png187```188189### CLI Options190191- `-w, --width <pixels>` - Viewport width (max 1072, default: 1072)192- `-h, --height <pixels>` - Viewport height (max 1072, default: 1072)193- `--no-full-page` - Disable full page capture and tiling194- `--wait-until <event>` - Wait until event: load, domcontentloaded, networkidle0, networkidle2195- `--wait-for <ms>` - Additional wait time in milliseconds196- `-o, --output <path>` - Output file path (required for tiled output)197198## Auto-Restart Feature199200The MCP server includes automatic restart capability by default for improved reliability:201202- Automatically restarts the server if it crashes203- Handles unhandled exceptions and promise rejections204- Implements exponential backoff (max 10 attempts in 1 minute)205- Logs all restart attempts for monitoring206- Gracefully handles shutdown signals (SIGINT, SIGTERM)207208For development/debugging without auto-restart:209```bash210# Run directly without restart wrapper211npm run serve:dev212```213214## Architecture215216```217mcp-screenshot-website-fast/218├── src/219│ ├── internal/ # Core screenshot capture logic220│ ├── utils/ # Logger and utilities221│ ├── index.ts # CLI entry point222│ ├── serve.ts # MCP server entry point223│ └── serve-restart.ts # Auto-restart wrapper224```225226## Development227228```bash229# Run in development mode230npm run dev capture https://example.com -o screenshot.png231232# Build for production233npm run build234235# Run tests236npm test237238# Type checking239npm run typecheck240241# Linting242npm run lint243```244245## Why This Tool?246247Built specifically for AI vision workflows:2482491. **Optimized for Claude Vision API** - Automatic resolution limiting to 1072x1072 pixels (1.15 megapixels)2502. **Automatic tiling** - Full pages split into perfect chunks for AI processing2513. **Always fresh** - No caching ensures you get the latest content2524. **MCP native** - First-class integration with AI development tools2535. **Simple API** - Clean, straightforward interface for capturing screenshots254255## Contributing256257Contributions are welcome! Please:2582591. Fork the repository2602. Create a feature branch2613. Add tests for new functionality2624. Submit a pull request263264## Troubleshooting265266### Puppeteer Issues267- Ensure Chrome/Chromium can be downloaded268- Check firewall settings269- Try setting `PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true` and provide custom executable270271### Screenshot Quality272- Adjust viewport dimensions273- Use appropriate wait strategies274- Check if site requires authentication275276### Timeout Errors277- Increase wait time with `--wait-for` flag278- Use different `--wait-until` strategies279- Check if site is accessible280281## License282283MIT
Full transparency — inspect the skill content before installing.