MCP Snapshot Server

A Model Context Protocol (MCP) server that allows AI agents to take screenshots of websites using a headless Chrome browser.

Features:

• Take Snapshot: Capture screenshots of any URL.
• Interactions: Perform actions like Login, Search, Click, Scroll, Hover, or Custom JS.
• Console Logs: Captures browser console logs (stdout, stderr, exceptions) and returns them.
• Image Hosting: Built-in HTTP server provides direct URLs to saved screenshots.
• Device Emulation: Simplified simulation for Mobile, Tablet, and PC.
• Full Page & Custom Viewport: Flexible capture options.

Installation

Prerequisites

• Go 1.23+
• Chrome/Chromium installed on the system.

Build

go mod tidy
make all

Usage

Configuration for Claude Desktop

Add the following to your MCP configuration file:

{
  "mcpServers": {
    "snapshot": {
      "command": "/path/to/mcp-snapshot-server/bin/mcp-snapshot-server-linux-amd64",
      "args": [
        "-port", "5123",
        "-dir", ".snapshots"
      ]
    }
  }
}

CLI Arguments

• -port: HTTP server port to serve images (default 5123). If the port is busy, the server automatically tries the next available port.
• -dir: Directory to save screenshots (default .snapshots).
• -base-url: Custom Base URL for returned links.

Environment Variables

• CHROME_BIN: Path to Chrome/Chromium executable (optional, use if Chrome is not in your PATH).
  • Example: CHROME_BIN=/usr/bin/chromium-browser ./mcp-snapshot-server

Tool: take_snapshot

Arguments:

• url (string): The URL to visit.
• full_page (boolean): Capture full page.
• mobile (boolean): Enable mobile emulation (alias for device: "mobile").
• device (string): Device type: "mobile", "tablet", or "pc" (default).
• width / height (number): Custom viewport (for PC mode).
• delay_ms (number): Wait time.
• steps (array): List of interactions to perform before snapshot.

Interactions (steps):

• action (string): type, click, wait, submit, scroll, hover, press, js.
• selector (string): CSS selector.
• value (string): Text value or JS script.

Claude Code Skills Integration

This server can be integrated with Claude Code Skills to create complex, automated workflows.

What are Skills?

Skills are custom functionalities defined in SKILL.md files. They consist of:

• YAML Frontmatter: Configures behavior (e.g., name, description, allowed-tools).
• Markdown Instructions: Step-by-step guidance for Claude.

Example: Automated UI Testing Skill

Create a .claude/skills/ui-test/SKILL.md file:

---
name: ui-test
description: Run an automated UI test and snapshot the result
allowed-tools: [snapshot-server:take_snapshot]
---

To run a UI test:
1. Use `take_snapshot` to navigate to the login page.
2. Perform login steps: type username, type password, and click submit.
3. Wait for the dashboard element to appear.
4. Capture the dashboard and review the browser console logs for any errors.

By bundling this server as a skill, you can automate complex browser-based tasks with simple natural language commands in Claude Code.

License

MIT