kaboom-browser-ai-devtools

Streams browser console logs, network failures, and DOM state into MCP-compatible coding assistants.

4|Updated May 16, 2026
One-click install
npx skills add https://github.com/reason-machines/devtools-skills --skill kaboom-browser-ai-devtools-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kaboom-browser-ai-devtools
Source: https://github.com/reason-machines/devtools-skills/tree/main/skills/kaboom-browser-ai-devtools
Command: npx skills add https://github.com/reason-machines/devtools-skills --skill kaboom-browser-ai-devtools-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Debugging browser behavior from an AI coding assistant normally requires manual copy-pasting of console errors, network traces, and DOM state. This Skill connects a live browser session to MCP clients so assistants can directly inspect console logs, failed requests, exceptions, and page elements without remote debugging ports. ## Core Features & Use Cases - Console and Network Monitoring: Capture console logs, uncaught exceptions with stack traces, and failed HTTP requests with full request/response bodies. - Recording and Test Generation: Record user interactions (clicks, typing, navigation) and generate Playwright or Puppeteer tests from recorded sessions. - Audits and Automation: Run WCAG accessibility audits with SARIF export, security audits for credentials and PII, Web Vitals tracking, and programmatic browser actions like click, type, and navigate. - Use Case: A developer asks their assistant to debug a failing checkout flow; the assistant retrieves the failed network request body, queries the error element in the DOM, and generates a Playwright regression test from the recorded session. ## Quick Start Install the Kaboom binary and browser extension, add the kaboom MCP server to your client config, then ask your assistant to get all console errors from the active browser tab.

Frequently Asked Questions about kaboom-browser-ai-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug browser console errors with an AI coding assistant?▼

Install the Kaboom binary and browser extension, then register it as an MCP server in your client config. The assistant can call kaboom_console_get to retrieve logs filtered by level and kaboom_dom_query to inspect elements at the error location.

How to generate Playwright tests from recorded browser sessions?▼

Start recording with kaboom_recording_start, perform the user flow in the browser, then call kaboom_recording_stop followed by kaboom_recording_generate_test with format set to playwright. Assertions can be included via the includeAssertions argument.

Does Kaboom require Chrome remote debugging port?▼

No, Kaboom works through a standard browser extension loaded from chrome://extensions instead of --remote-debugging-port. The extension communicates with a local server bound to 127.0.0.1 on port 3333 by default.

Which MCP clients support Kaboom browser devtools?▼

Kaboom auto-configures Claude Code, Cursor, Windsurf, and Zed during installation. Each client needs an mcpServers entry pointing to the kaboom binary with the --mcp argument.

Why are network requests not appearing in Kaboom capture?▼

Check that the status filter is set to all rather than failed, since the default view may hide successful requests. Some requests can also be blocked by CSP, and very large response bodies may be truncated.

Does Kaboom send browser data to external servers?▼

No, all captured data stays local and the server binds only to 127.0.0.1. Auth headers are stripped automatically, and anonymous telemetry can be disabled by setting KABOOM_TELEMETRY=off.