kaboom-browser-ai-devtools

Kaboom Browser AI DevTools MCP

Skill by 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:

curl -sSL https://raw.githubusercontent.com/brennhill/Kaboom-Browser-AI-Devtools-MCP/STABLE/scripts/install.sh | bash

Windows (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
2. Extract and make executable:

   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):

{
  "mcpServers": {
    "kaboom": {
      "command": "/usr/local/bin/kaboom",
      "args": ["--mcp"]
    }
  }
}

Cursor (config.json in .cursor/ directory):

{
  "mcpServers": {
    "kaboom": {
      "command": "/usr/local/bin/kaboom",
      "args": ["--mcp"]
    }
  }
}

Zed (settings.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

// No arguments required
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_clear"
});

kaboom_console_get — Get all captured console logs

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

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

await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_network_clear"
});

DOM Inspection

kaboom_dom_query — Query DOM elements with CSS selectors

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

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

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

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

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

await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_click",
  arguments: {
    selector: "button[type='submit']"
  }
});

kaboom_browser_type — Type into input field

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

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

await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_select",
  arguments: {
    selector: "select[name='country']",
    value: "US"
  }
});

kaboom_browser_upload — Upload file

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

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

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

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

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

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

await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_annotation_enable"
});

kaboom_annotation_get — Get annotations with computed styles

await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_annotation_get",
  arguments: {
    includeStyles: true
  }
});

Common Workflows

Debug Console Errors

// 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

// 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

// 1. Start recording
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_start",
  arguments: {
    captureClicks: true,
    captureInputs: true,
    captureNavigation: true
  }
});

// 2. User performs actions in browser...

// 3. Stop recording and get actions
const actions = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_stop"
});

// 4. Generate Playwright test
const test = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_generate_test",
  arguments: {
    format: "playwright",
    includeAssertions: true
  }
});

Automate Browser Testing

// Navigate to login page
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_navigate",
  arguments: {
    url: "https://app.example.com/login",
    waitForLoad: true
  }
});

// Fill in credentials
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_type",
  arguments: {
    selector: "input[name='email']",
    text: "test@example.com"
  }
});

await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_type",
  arguments: {
    selector: "input[name='password']",
    text: "testpass123"
  }
});

// Submit form
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_click",
  arguments: {
    selector: "button[type='submit']"
  }
});

// Check for errors
const errors = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_console_get",
  arguments: { level: "error" }
});

Accessibility Audit

// Run WCAG 2.1 AA audit
const audit = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_a11y_audit",
  arguments: {
    standard: "WCAG2AA",
    includeWarnings: true
  }
});

// Export results as SARIF
const report = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_a11y_export",
  arguments: {
    format: "sarif"
  }
});

Performance Regression Detection

// Set baseline for LCP
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_baseline",
  arguments: {
    metric: "LCP",
    threshold: 2500
  }
});

// Get current metrics
const vitals = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_get"
});

// Check if LCP regressed
if (vitals.LCP > 2500) {
  console.log("LCP regression detected!");
}

Browser Extension Developer API

Use window.__kaboom in your application code for custom context:

// Add custom annotation to help AI understand context
window.__kaboom.annotate({
  type: "error-boundary",
  component: "CheckoutForm",
  message: "Payment validation failed",
  metadata: {
    step: 3,
    validationErrors: ["invalid_card", "expired"]
  }
});

// Check if Kaboom is available
if (window.__kaboom) {
  // Kaboom is active
}

Configuration

Environment Variables

# Disable telemetry
export KABOOM_TELEMETRY=off

# Custom port (default: 3333)
export KABOOM_PORT=8080

# Log level
export KABOOM_LOG_LEVEL=debug # debug, info, warn, error

# Custom extension path
export KABOOM_EXTENSION_PATH=/custom/path/to/extension

Server CLI Flags

# Start MCP server
kaboom --mcp

# Custom port
kaboom --mcp --port 8080

# Enable debug logging
kaboom --mcp --debug

# Print version
kaboom --version

Troubleshooting

Extension Not Connecting

1. Check extension is loaded:

   • Open chrome://extensions
   • Verify Kaboom is enabled
   • Check for errors in extension details

2. Verify server is running:

   ps aux | grep kaboom
   

3. Check connection:

   • Open browser DevTools
   • Look for "Kaboom connected" in console
   • If not connected, refresh the page

No Console Logs Captured

1. Clear cache and refresh:

   await use_mcp_tool({
     server_name: "kaboom",
     tool_name: "kaboom_console_clear"
   });
   

2. Check log level filter — Make sure you're not filtering out the logs you need

3. Verify page is active — Kaboom only captures from the active tab

Network Requests Not Appearing

1. Check status filter:

   // Get ALL requests, not just failed
   await use_mcp_tool({
     server_name: "kaboom",
     tool_name: "kaboom_network_get",
     arguments: { status: "all" }
   });
   

2. Verify XHR/Fetch interception — Some requests may be blocked by CSP

3. Check response body size — Very large bodies may be truncated

Recording Generates Weak Selectors

1. Add explicit IDs/data attributes to critical elements:

   <button data-testid="submit-btn">Submit</button>
   

2. Use semantic HTML — <button> instead of <div onclick>

3. Manually improve selectors in generated tests after recording

MCP Client Not Finding Kaboom

1. Check binary path:

   which kaboom
   # Should output: /usr/local/bin/kaboom
   

2. Update config with full path:

   {
     "mcpServers": {
       "kaboom": {
         "command": "/usr/local/bin/kaboom",
         "args": ["--mcp"]
       }
     }
   }
   

3. Restart MCP client completely (not just reload window)

Performance Impact

Kaboom is designed for minimal overhead, but:

• Disable when not debugging — Unload extension if not needed
• Clear buffers regularly — Large console/network buffers can grow
• Use selective recording — Only record what you need

Privacy & Security

• All data stays local — Nothing leaves your machine
• No cloud, no accounts — Zero external dependencies
• Auth headers stripped — Sensitive headers automatically removed
• Localhost only — Server binds to 127.0.0.1 only
• Anonymous telemetry — Random install ID, no personal data (disable with KABOOM_TELEMETRY=off)

Advanced Usage

Custom Test Generation Template

Generate tests with custom assertions:

const test = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_generate_test",
  arguments: {
    format: "playwright",
    includeAssertions: true
  }
});

// Add custom assertions to generated test
const customTest = test.replace(
  "// end of test",
  `
  // Custom assertions
  await expect(page.locator('.success-message')).toBeVisible();
  await expect(page).toHaveURL(/.*dashboard/);
`
);

Continuous Monitoring Pattern

// Set up baseline thresholds
const thresholds = {
  LCP: 2500,
  CLS: 0.1,
  INP: 200,
  FCP: 1800
};

for (const [metric, threshold] of Object.entries(thresholds)) {
  await use_mcp_tool({
    server_name: "kaboom",
    tool_name: "kaboom_vitals_baseline",
    arguments: { metric, threshold }
  });
}

// Periodically check for regressions
const vitals = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_vitals_get"
});

// Flag regressions
const regressions = Object.entries(vitals)
  .filter(([metric, value]) => value > thresholds[metric])
  .map(([metric, value]) => `${metric}: ${value} > ${thresholds[metric]}`);

if (regressions.length > 0) {
  console.log("Performance regressions detected:", regressions);
}

Multi-Page Recording

// Start recording
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_start",
  arguments: { captureNavigation: true }
});

// Navigate through multiple pages
await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_navigate",
  arguments: { url: "https://example.com/page1" }
});

// Perform actions...

await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_browser_navigate",
  arguments: { url: "https://example.com/page2" }
});

// More actions...

// Stop and generate comprehensive test
const recording = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_stop"
});

const test = await use_mcp_tool({
  server_name: "kaboom",
  tool_name: "kaboom_recording_generate_test",
  arguments: {
    format: "playwright",
    includeAssertions: true
  }
});

Resources

• Documentation: https://gokaboom.dev
• GitHub: https://github.com/brennhill/Kaboom-Browser-AI-Devtools-MCP
• Issues: https://github.com/brennhill/Kaboom-Browser-AI-Devtools-MCP/issues
• Changelog: https://github.com/brennhill/Kaboom-Browser-AI-Devtools-MCP/blob/STABLE/CHANGELOG.md