paparazzi

Paparazzi is an MCP server that connects Claude to your active Chrome browser session via the Chrome DevTools Protocol. It exposes a suite of tools that let Claude inspect and interact with the page context without launching a separate browser instance or writing explicit selectors. The tools include take_screenshot to capture the current viewport or full page, get_console_logs to fetch console output, get_network_requests to inspect XHR/fetch activity, get_exceptions to surface uncaught errors, evaluate_js to run JavaScript in the page context, get_dom_snapshot to retrieve HTML, get_performance_metrics for Web Vitals and memory stats, get_storage_data to read cookies and local/session storage, get_active_tab to fetch the current tab’s URL and title, and refresh_page to reload (including hard refresh). These capabilities enable Claude to understand UI state, diagnose issues, and reason about page behavior without leaving the chat or performing manual debugging steps.

Prerequisites:

• Node.js installed (version compatible with the MCP server).
• pnpm or npm for package management.
• Access to a running Chrome session with the extension loaded and the debugging protocol accessible.

Installation steps:

1. Install dependencies and build:

pnpm install
pnpm build

2. Install or set up the MCP server package locally if needed (the server lives under packages/mcp-server):

cd packages/mcp-server
pnpm install
pnpm build

3. Run the MCP server. If using the provided configuration, start the server via Node and point it at the built index:

# Example (adjust path to dist/index.js as appropriate)
node packages/mcp-server/dist/index.js

4. Ensure Claude is configured to load the paparazzi MCP server. In manual config, add:

{
  "mcpServers": {
    "paparazzi": {
      "command": "node",
      "args": ["/path/to/paparazzi/packages/mcp-server/dist/index.js"]
    }
  }
}

5. If you want the server to listen on a specific port, set the PAPARAZZI_PORT environment variable accordingly before starting the server.

Tip: If you’re iterating, you can use make targets from the repository (make install, make build, make server) to speed up local development.

Tips and known considerations:

• The server interfaces with the Chrome extension via the MCP protocol, so ensure the extension is loaded in Developer mode and connected to Claude.
• Some pages or chrome:// pages cannot be captured; keep this in mind when requesting data like screenshots.
• If you encounter port conflicts, set PAPARAZZI_PORT to a free port and configure the extension to connect to that port.
• When debugging, restarting Claude Desktop or Claude Code may help re-establish the MCP connection.
• The tooling list provided (screenshot, console logs, network requests, JS evaluation, DOM snapshot, etc.) should cover common debugging tasks without needing extra instrumentation.