mcp-snapshot

The MCP Snapshot Server exposes a specialized toolset that lets AI agents capture screenshots of web pages using a headless Chrome browser. The core capability is take_snapshot, which directs the server to navigate to a URL, optionally emulate devices (mobile, tablet, or PC), adjust viewport size, apply a delay, and perform a sequence of interactions before taking a screenshot. Interactions support common web UI actions such as typing text, clicking elements, waiting for selectors, scrolling, hovering, pressing keys, and even executing custom JavaScript. The server also serves the resulting images via a built-in HTTP server, providing direct URLs to saved snapshots, and can emulate different device form factors for responsive testing. The combination of full page or viewport-specific captures and console log capture helps surface rendering issues and JavaScript errors in automated workflows. This makes it suitable for automated UI testing, site previews, and programmatic visual verification as part of Claude Code Skills workflows.

Prerequisites:

• Go 1.23+ installed on your system
• Chrome/Chromium installed (or accessible via CHROME_BIN)

Installation steps:

1. Clone the repository or download the prebuilt binary for your platform.

2. Ensure the Go toolchain can build and fetch dependencies:

   go mod tidy

3. Build the binary (example from the repo):

   make all

4. Start the server with the desired port and snapshot directory. Example (adjust paths as needed):

   /path/to/mcp-snapshot-server/bin/mcp-snapshot-server-linux-amd64 -port 5123 -dir .snapshots

5. Update your MCP configuration to point to the started binary (see the sample in the README).

Tips and notes:

• If Chrome/Chromium is not on your PATH, set CHROME_BIN to the full path of the browser binary (e.g., CHROME_BIN=/usr/bin/chromium-browser) before launching.
• The -port argument is resilient: if the requested port is in use, the server automatically selects the next available port.
• The -dir option controls where screenshots are saved; ensure the process has write permissions to that directory.
• The tool take_snapshot supports a sequence of interactions (steps) to automate login, form submissions, or navigation before capturing a screenshot. Each step can specify a CSS selector and a value or a JavaScript snippet (for action: js).
• Device emulation is supported via the mobile, device, width, and height parameters to tailor the viewport for mobile, tablet, or PC captures.
• The server can emit browser console logs (stdout/stderr/errors) alongside the captured image for debugging.
• If you plan to run this in Claude Code Skills workflows, you can reference the take_snapshot tool in your SKILL.md definitions to automate browser-based tasks.