Apra-Labs

Browser Snapshot Agent — AI skill for Claude Code

AI community

Headless browser agent for capturing page snapshots with MCP support for AI assistants.

How to install Browser Snapshot Agent

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Apra-Labs/browser-snapshot-agent and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Browser Snapshot Agent does

Headless browser agent for capturing page snapshots with MCP support for AI assistants.

Alternatives in AI

HolyClaude — AI coding workstation: Claude Code + web UI + 7 AI CLIs + headless browser + 50+ tools 2k ★
Zotero MCP — It's a plugin extension in Zotero 1.1k ★
MuseAI Skills — muse.ai (Muse AI) skills and runtime snapshot: 68 skills, workflow guides, connector manifests 261 ★

README

Browser Snapshot Agent

A powerful headless browser tool for capturing page snapshots at multiple configured window sizes, making visual debugging and responsive testing easy.

Features

🚀 Headless browser automation using Puppeteer
📱 Configurable viewport sizes (mobile, tablet, desktop)
📸 Full page or viewport-only screenshots
🎯 Multiple URLs and viewports in a single run
⚙️ Flexible configuration via JSON or CLI arguments
📊 Detailed capture summary and error reporting
🏷️ Custom labels for viewports
🖼️ PNG or JPEG output formats
⏱️ Configurable wait times for dynamic content
🤖 MCP (Model Context Protocol) Server - Use with AI assistants like Claude

Installation

cd browser-snapshot-agent
npm install

Usage

MCP Server Mode (Use with AI Assistants)

The Browser Snapshot Agent can run as an MCP (Model Context Protocol) server, allowing AI assistants like Claude to capture screenshots programmatically.

Setup

Install dependencies:

cd browser-snapshot-agent
npm install

Configure your AI assistant to use the MCP server. For Claude Desktop, add to your config file:

**Windows:** `%APPDATA%\Claude\claude_desktop_config.json` **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`

{
  "mcpServers": {
    "browser-snapshot": {
      "command": "node",
      "args": [
        "C:\\path\\to\\browser-snapshot-agent\\mcp-server.js"
      ]
    }
  }
}

Restart your AI assistant to load the MCP server.

Available MCP Tools

Once configured, AI assistants can use these tools:

**1. `capture_snapshot`** - Capture a single screenshot

Parameters: url, width, height, label, outputDir, fullPage, waitTime, format
Example: "Capture a screenshot of https://example.com at 1920x1080"

**2. `capture_multiple_viewports`** - Capture across multiple viewport sizes