Content
# MCP Screen Capture
An MCP server for capturing screenshots, recording videos, and generating animated GIFs from web pages using Playwright and ffmpeg.
## Prerequisites
- Node.js 18+
- ffmpeg (install via `brew install ffmpeg` on macOS)
## Installation
```bash
cd mcp-screen-capture
npm install
```
This will automatically install Playwright's Chromium browser via the postinstall script.
## MCP Configuration
Add to your Claude Code MCP settings (`~/.claude/settings.json`):
```json
{
"mcpServers": {
"screen-capture": {
"command": "node",
"args": ["/path/to/mcp-screen-capture/src/index.js"]
}
}
}
```
## Available Tools
### `screenshot`
Take a screenshot of a URL.
**Parameters:**
- `url` (required): URL to capture
- `outputPath` (required): Path to save the screenshot (.png)
- `width`: Viewport width (default: 1280)
- `height`: Viewport height (default: 720)
- `fullPage`: Capture full scrollable page (default: false)
- `waitForSelector`: Wait for a CSS selector before capturing
- `delay`: Delay in ms before capturing (default: 0)
**Example:**
```json
{
"url": "http://localhost:5173",
"outputPath": "/path/to/screenshot.png",
"fullPage": true
}
```
### `record_video`
Record a video of a webpage with optional auto-scrolling.
**Parameters:**
- `url` (required): URL to record
- `outputPath` (required): Path to save the video (.webm)
- `width`: Viewport width (default: 1280)
- `height`: Viewport height (default: 720)
- `duration`: Recording duration in ms (default: 5000)
- `scrollToBottom`: Auto-scroll during recording (default: false)
- `scrollSpeed`: Pixels per scroll step (default: 100)
**Example:**
```json
{
"url": "http://localhost:5173",
"outputPath": "/path/to/recording.webm",
"duration": 8000,
"scrollToBottom": true
}
```
### `video_to_gif`
Convert a video file to an animated GIF.
**Parameters:**
- `inputPath` (required): Path to input video
- `outputPath` (required): Path to save the GIF
- `fps`: Frames per second (default: 10)
- `width`: GIF width in pixels (default: 800)
- `quality`: Quality preset - "low", "medium", "high" (default: "medium")
**Example:**
```json
{
"inputPath": "/path/to/video.webm",
"outputPath": "/path/to/output.gif",
"fps": 12,
"quality": "high"
}
```
### `capture_gif`
All-in-one: Record a webpage and save directly as GIF.
**Parameters:**
- `url` (required): URL to record
- `outputPath` (required): Path to save the GIF
- `width`: Viewport width (default: 1280)
- `height`: Viewport height (default: 720)
- `duration`: Recording duration in ms (default: 5000)
- `scrollToBottom`: Auto-scroll during recording (default: false)
- `fps`: GIF frames per second (default: 10)
- `gifWidth`: Output GIF width (default: 800)
- `quality`: Quality preset (default: "medium")
**Example:**
```json
{
"url": "http://localhost:5173",
"outputPath": "/path/to/demo.gif",
"duration": 8000,
"scrollToBottom": true,
"fps": 12,
"gifWidth": 800,
"quality": "high"
}
```
## Quality Presets
| Preset | Dithering | Best For |
|--------|-----------|----------|
| `low` | None | Small file size, simple graphics |
| `medium` | Bayer | Balanced quality and size |
| `high` | Sierra | Best quality, larger files |
## Use Cases
- Generate demo GIFs for README files
- Capture screenshots for documentation
- Record UI interactions for bug reports
- Create visual regression test baselines
## License
MIT
