kaboom-browser-ai-devtools

# Kaboom Browser AI DevTools MCP > Skill by [ara.so](https://ara.so) — Devtools Skills collection. Kaboom is a browser debugging, inspection, and verification toolkit that streams console logs, network failures, exceptions, recordings, and browser evidence into MCP-compatible coding assistants. It provides real-time browser debugging without requiring `--remote-debugging-port`, using a standard browser extension instead. ## Key Features - **Console monitoring** — Stream all `console.log()`, `.warn()`, `.error()` with full arguments - **Network debugging** — Capture failed requests (4xx/5xx) with full request/response bodies - **Exception tracking** — Uncaught errors with complete stack traces - **WebSocket monitoring** — Connection events and message payloads - **User action recording** — Click, type, navigate, scroll with smart selectors - **Web Vitals tracking** — LCP, CLS, INP, FCP with regression detection - **DOM inspection** — Query page elements via CSS selectors - **Accessibility audits** — WCAG compliance checks with SARIF export - **Security audits** — Credentials, PII, headers, cookies analysis - **Browser automation** — Click, type, select, upload, navigate programmatically - **Test generation** — Generate Playwright tests from recorded sessions - **Visual annotations** — Drawing mode for user feedback with style extraction ## Installation ### Quick Install (Recommended) **macOS / Linux:** ```bash curl -sSL https://raw.githubusercontent.com/brennhill/Kaboom-Browser-AI-Devtools-MCP/STABLE/scripts/install.sh | bash ``` **Windows (PowerShell):** ```powershell irm https://raw.githubusercontent.com/brennhill/Kaboom-Browser-AI-Devtools-MCP/STABLE/scripts/install.ps1 | iex ``` This automatically: 1. Downloads the binary for your platform 2. Installs browser extension to `~/.kaboom/extension` 3. Auto-configures detected MCP clients (Claude Code, Cursor, Windsurf, Zed) ### Manual Installation 1. **Download binary** from [releases](https://github.com/brennhill/Kaboom-Browser-AI-Devtools-MCP/releases) 2. **Extract and make executable:** ```bash tar -xzf kaboom-*.tar.gz chmod +x kaboom mv kaboom /usr/local/bin/ ``` 3. **Install browser extension:** - Open `chrome://extensions` - Enable Developer mode - Click "Load unpacked" - Select `~/.kaboom/extension` directory ### MCP Configuration Add to your MCP client config: **Claude Desktop / Claude Code (`claude_desktop_config.json`):** ```json { "mcpServers": { "kaboom": { "command": "/usr/local/bin/kaboom", "args": ["--mcp"] } } } ``` **Cursor (`config.json` in `.cursor/` directory):** ```json { "mcpServers": { "kaboom": { "command": "/usr/local/bin/kaboom", "args": ["--mcp"] } } } ``` **Zed (`settings.json`):** ```json { "context_servers": { "kaboom": { "command": { "path": "/usr/local/bin/kaboom", "args": ["--mcp"] } } } } ``` ## MCP Tools Reference ### Console & Error Monitoring **`kaboom_console_clear`** — Clear all captured console logs ```typescript // No arguments required await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_console_clear" }); ``` **`kaboom_console_get`** — Get all captured console logs ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_console_get", arguments: { level: "error" // Optional: "log", "warn", "error", "info" } }); ``` ### Network Monitoring **`kaboom_network_get`** — Get captured network requests ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_network_get", arguments: { status: "failed", // "all", "failed", "success" includeBody: true } }); ``` **`kaboom_network_clear`** — Clear network capture buffer ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_network_clear" }); ``` ### DOM Inspection **`kaboom_dom_query`** — Query DOM elements with CSS selectors ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_dom_query", arguments: { selector: ".error-message", includeStyles: true, includeAttributes: true } }); ``` **`kaboom_dom_snapshot`** — Capture full DOM snapshot ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_dom_snapshot", arguments: { includeInlineStyles: true } }); ``` ### User Action Recording **`kaboom_recording_start`** — Start recording user actions ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_recording_start", arguments: { captureClicks: true, captureInputs: true, captureNavigation: true, captureScrolls: true } }); ``` **`kaboom_recording_stop`** — Stop and retrieve recording ```typescript const recording = await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_recording_stop" }); // Returns array of recorded actions with selectors ``` **`kaboom_recording_generate_test`** — Generate Playwright test from recording ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_recording_generate_test", arguments: { format: "playwright", // "playwright" or "puppeteer" includeAssertions: true } }); ``` ### Browser Automation **`kaboom_browser_click`** — Click element ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_browser_click", arguments: { selector: "button[type='submit']" } }); ``` **`kaboom_browser_type`** — Type into input field ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_browser_type", arguments: { selector: "input[name='email']", text: "user@example.com", clear: true } }); ``` **`kaboom_browser_navigate`** — Navigate to URL ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_browser_navigate", arguments: { url: "https://example.com/dashboard", waitForLoad: true } }); ``` **`kaboom_browser_select`** — Select dropdown option ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_browser_select", arguments: { selector: "select[name='country']", value: "US" } }); ``` **`kaboom_browser_upload`** — Upload file ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_browser_upload", arguments: { selector: "input[type='file']", filePath: "/path/to/file.pdf" } }); ``` ### Accessibility Auditing **`kaboom_a11y_audit`** — Run WCAG accessibility audit ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_a11y_audit", arguments: { standard: "WCAG2AA", // "WCAG2A", "WCAG2AA", "WCAG2AAA" includeWarnings: true } }); ``` **`kaboom_a11y_export`** — Export audit results ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_a11y_export", arguments: { format: "sarif" // "sarif", "json", "html" } }); ``` ### Security Auditing **`kaboom_security_audit`** — Run security audit ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_security_audit", arguments: { checkCredentials: true, checkPII: true, checkHeaders: true, checkCookies: true, checkThirdParty: true } }); ``` ### Web Vitals Monitoring **`kaboom_vitals_get`** — Get Web Vitals metrics ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_vitals_get", arguments: { metrics: ["LCP", "CLS", "INP", "FCP"] // Optional, defaults to all } }); ``` **`kaboom_vitals_baseline`** — Set performance baseline ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_vitals_baseline", arguments: { metric: "LCP", threshold: 2500 // milliseconds } }); ``` ### Visual Annotations **`kaboom_annotation_enable`** — Enable drawing mode ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_annotation_enable" }); ``` **`kaboom_annotation_get`** — Get annotations with computed styles ```typescript await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_annotation_get", arguments: { includeStyles: true } }); ``` ## Common Workflows ### Debug Console Errors ```typescript // 1. Get all error logs const errors = await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_console_get", arguments: { level: "error" } }); // 2. Inspect DOM at error location const elements = await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_dom_query", arguments: { selector: ".error-component", includeStyles: true } }); // 3. Clear logs after fix await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_console_clear" }); ``` ### Debug Failed API Calls ```typescript // 1. Get failed network requests const failed = await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_network_get", arguments: { status: "failed", includeBody: true } }); // 2. Check for auth issues in request headers // Analyze the response from failed requests // 3. Clear network buffer await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_network_clear" }); ``` ### Record User Flow and Generate Test ```typescript // 1. Start recording await use_mcp_tool({ server_name: "kaboom", tool_name: "kaboom_recording_start", arguments: { captureClicks: true,