This server provides 67 tools for AI-assisted debugging of React applications through Playwright. Capabilities include:
Browser Automation: Navigate, click, fill forms, select, type, hover, drag, scroll, upload files, press keys, go back/forward, reload, and wait for elements/navigation.
Tabs, Dialogs, Downloads: Manage multiple tabs, handle alert/confirm/prompt dialogs, track downloads.
DOM Inspection: Get summarized DOM trees, element details (styles, bounding box), text content extraction, and ARIA snapshots.
Network Monitoring & Mocking: View and filter network requests, inspect details, mock API responses by URL pattern, and manage mocks.
Console Capture: Retrieve logs with level/text filtering.
React DevTools: Get component tree, find components by name, inspect state/props, collect all instances of a component.
State Management: Inspect Redux, Zustand, React Query/TanStack Query caches, and React Context values.
Cookies & Storage: Get/set cookies, manage localStorage/sessionStorage.
Device & Environment Emulation: Set viewport, emulate devices, media features, geolocation, offline mode, network/CPU throttling.
Performance: Track render counts, slow components, Core Web Vitals (LCP, FID, CLS).
Error Detection: Find hydration errors, inspect error boundaries, detect memory leaks.
Accessibility: Run WCAG audits and inspect ARIA accessibility tree.
Advanced: Screenshots, PDF generation, execute JavaScript, AI-powered error explanations, and debug summaries.
Provides tools to inspect React component trees, view component state, props, and hooks, and detect React-specific errors such as hydration mismatches and error boundaries.
Allows inspection of React Query cache, including query states, data, and mutation status.
Provides tools to inspect Redux store state and view dispatched actions, aiding in debugging Redux-based applications.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@playwright-react-debug-mcp Find React errors on the dashboard page"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Debug React applications with AI assistance using Claude and Playwright.
A Model Context Protocol (MCP) server that gives Claude the ability to interact with live web applications through a browser. Navigate pages, inspect the DOM, monitor network requests, debug React components, and analyze errors—all through natural conversation.
Traditional Debugging | With Playwright React Debug MCP |
Manually reproduce issues | "Navigate to /dashboard and check for errors" |
Screenshot and paste into chat | Claude sees the live page and interacts directly |
Copy-paste console errors | Console logs captured automatically |
Open React DevTools manually | Claude queries component tree with state/props |
Check Network tab for failures | All HTTP traffic monitored and analyzed |
Related MCP server: Debugger MCP Server
67 debugging tools across 15 categories
Browser Control - Navigate, click, fill forms, keyboard, drag & drop, automate user flows
Tabs, Dialogs & Files - Multi-tab support, alert/confirm/prompt handling, uploads and downloads
DOM Inspection - Element details, computed styles, text extraction, token-efficient ARIA snapshots
Network Monitoring - Request/response bodies, headers, timing
Network Mocking - Mock API responses to test loading/error states without a backend
Console Capture - Errors, warnings, logs with filtering
React DevTools - Component tree, props, state, hooks inspection
State Management - Redux, Zustand, React Query, Context inspection
Cookies & Storage - Inspect and modify cookies, localStorage, sessionStorage
Device Emulation - Mobile devices, dark mode, geolocation, offline, CPU/network throttling
Performance - Render tracking, slow components, Web Vitals
Error Detection - Hydration errors, error boundaries, memory leaks
Accessibility - WCAG-style audits, ARIA tree inspection
Error Analysis - AI-powered analysis with suggested fixes
MCP tool annotations - Read-only/destructive hints so clients can auto-approve safe inspection tools
npm install -g playwright-react-debug-mcp
npx playwright install chromiumAdd to ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"playwright-debug": {
"command": "npx",
"args": ["playwright-react-debug-mcp"]
}
}
}Add to your project's .mcp.json:
{
"mcpServers": {
"playwright-debug": {
"command": "npx",
"args": ["playwright-react-debug-mcp"],
"transport": "stdio"
}
}
}You: Navigate to https://example.com and take a screenshot
Claude: I'll navigate to the page and capture a screenshot.
[Browser opens, navigates, returns screenshot]
Done! The page shows...You: Navigate to my app at localhost:3000/login and try logging in
with test@example.com
Claude: I'll navigate to the login page and fill in the credentials.
[Navigates, fills email/password, clicks submit]
The login failed. Let me check what happened:
- Console: "TypeError: Cannot read property 'token' of undefined"
- Network: POST /api/auth returned 200 but body is empty
- React: AuthProvider shows { isAuthenticated: false, error: null }
The API returns 200 without a token. The frontend expects response.data.token
but data is undefined. The error state isn't being set because the HTTP
status was 200.
Suggestions:
1. Backend should return { data: { token: "..." } } or proper error status
2. Frontend should validate response structure, not just HTTP statusTool | Description |
| Navigate to URL with wait conditions |
| Click elements (left/right/double) |
| Fill form fields |
| Select dropdown options |
| Type text character-by-character |
| Press keyboard keys (Enter, Escape, Control+A...) |
| Hover over elements |
| Drag and drop between elements |
| Scroll page or element into view |
| Wait for element/navigation |
| Set files on a file input |
| Browser back |
| Browser forward |
| Reload page |
Tool | Description |
| List open tabs |
| Open a new tab |
| Switch the active tab |
| Close a tab |
| Auto-accept or dismiss alert/confirm/prompt |
| Log of dialogs and how they were handled |
| Downloads captured this session |
Tool | Description |
| Token-efficient ARIA snapshot (best first look at a page) |
| Summarized DOM tree |
| Element details with styles |
| Extract visible text |
Tool | Description |
| View requests with filtering |
| Full request/response details |
| Clear captured requests |
| Mock API responses by URL pattern (status, body, delay) |
| Remove a mock |
| Active mocks and hit counts |
Tool | Description |
| View logs with filtering |
| Clear captured logs |
Tool | Description |
| Component tree with hooks |
| Search components by name |
| Detailed state/props |
| All instances of a component |
Tool | Description |
| Redux store state + actions |
| Zustand store inspection |
| React Query cache |
| React Context values |
Tool | Description |
| Browser cookies |
| Set a cookie (e.g. inject a session token) |
| Clear all cookies |
| localStorage / sessionStorage contents |
| Set a storage item |
| Clear web storage |
Tool | Description |
| Resize the viewport |
| Emulate a device ("iPhone 15", "Pixel 7"...) |
| Dark mode, reduced motion, print media |
| Set browser geolocation |
| Toggle offline mode |
| Slow-3G/fast-3G/4G network throttling |
| CPU slowdown for performance testing |
Tool | Description |
| Component render tracking |
| Slow component detection |
| Core Web Vitals (LCP, CLS, etc.) |
Tool | Description |
| SSR hydration mismatches |
| React error boundaries |
| Memory leak indicators |
Tool | Description |
| WCAG-style audit |
| Accessibility tree |
Tool | Description |
| Capture page or element |
| Save page as PDF (headless mode) |
| Execute JavaScript |
| AI error analysis |
| Page state overview |
Interactive Debugging
What errors are on this page?
Why did the form submission fail?Automated Testing
Fill the registration form and verify it submits successfully
Click through the checkout flow and check for errorsReact Development
Find the UserProfile component and show its state
What props are being passed to the Modal?
Collect all Button instances and compare their usageAPI Integration
What requests were made when I clicked submit?
Show me the response from the failed API callVariable | Default | Description |
| 200 | Console log buffer size |
| 100 | Network request buffer size |
| false | Run browser headless (required for |
{
"mcpServers": {
"playwright-debug": {
"command": "npx",
"args": ["playwright-react-debug-mcp"],
"env": {
"BROWSER_HEADLESS": "true"
}
}
}
}# Clone
git clone https://github.com/Lars-Albinsson/playwright-react-debug-mcp
cd playwright-react-debug-mcp
# Install
npm install
npx playwright install chromium
# Build
npm run build
# Run
npm start
# Watch mode
npm run devNode.js 18+
Playwright (Chromium)
Claude Desktop or Claude Code
Contributions are welcome! See CONTRIBUTING.md for guidelines.
MIT License - see LICENSE for details.
This project | |||
Browser automation | âś… | âś… | âś… |
Console & network capture | âś… | âś… | âś… |
Network mocking | ✅ | ✅ | ❌ |
Device emulation & throttling | âś… | partial | âś… |
React component tree, props, state, hooks | ✅ | ❌ | ❌ |
Redux / Zustand / React Query / Context inspection | ✅ | ❌ | ❌ |
Hydration errors, error boundaries, render tracking | ✅ | ❌ | ❌ |
If you need generic browser automation at scale, Microsoft's playwright-mcp is excellent. This project's focus is being a one-stop shop for React debugging: everything above plus React internals no other MCP server inspects.
Tool design in the tabs, dialogs, mocking, and emulation categories was inspired by the excellent microsoft/playwright-mcp and ChromeDevTools/chrome-devtools-mcp projects (implementations are original to this codebase).
Run accessibility audit: missing alt text, labels, heading structure, color contrast, ARIA issues.
Inputs: selector, includeWarnings.
Clear captured console logs
Inputs: no named parameters.
Clear captured network logs
Inputs: no named parameters.
Click on an element matching the given selector
Inputs: selector (required), button, timeout, clickCount.
Collect all instances of a React component type with props→HTML mapping. Useful for understanding component behavior, comparing different usages, or extracting component patterns. Returns props, rendered HTML, and minified source for each instance.
Inputs: name, maxInstances.
Detect potential memory leaks: large DOM, detached nodes, growing collections.
Inputs: no named parameters.
Execute arbitrary JavaScript in the page context. Powerful for custom inspection and debugging.
Inputs: code (required).
Analyze a console error with full context: related network requests, React state, and debugging suggestions. Best tool for diagnosing issues.
Inputs: index, search.
Fill a form field with the given value. Clears existing content first.
Inputs: value (required), selector (required), timeout.
Find React components by name. Returns matching components with their props and state.
Inputs: name (required).
Detect SSR hydration mismatches. Essential for Next.js/Remix debugging.
Inputs: no named parameters.
Get the accessibility tree showing roles, names, and states. Useful for screen reader debugging.
Inputs: maxDepth, selector.
Get detailed state and props for a specific React component
Inputs: name (required), index.
Get console log entries from the page. Useful for seeing errors, warnings, and debug output.
Inputs: last, level, search.
List all React Context providers and their current values.
Inputs: contextName.
Get a quick overview of the debugging state: page info, error count, failed requests
Inputs: no named parameters.
Get a summarized DOM tree. Returns tag names, IDs, classes, and text content in a digestible format.
Inputs: depth, selector.
Get detailed information about a specific element including computed styles and bounding box
Inputs: selector (required).
Find React error boundaries and any errors they have caught.
Inputs: no named parameters.
Get network request log. See API calls, their status codes, and timing. Essential for debugging Lambda/API issues.
Inputs: last, filter, method, status.
Inspect React Query/TanStack Query cache. Shows queries, their status, and cached data.
Inputs: status, queryKey.
Get the React component tree with props and state. Works with React 16+.
Inputs: depth.
Inspect Redux store state and recent actions. Works with Redux DevTools or globally exposed stores.
Inputs: path, actionsLimit.
Track component render counts to identify unnecessary re-renders.
Inputs: threshold, componentName.
Get detailed info about a specific network request including headers
Inputs: id, url.
Find React components with slow render times. Requires React Profiler or DevTools.
Inputs: limit, threshold.
Get visible text content of elements matching a selector
Inputs: selector (required).
Get Core Web Vitals (LCP, FID, CLS) and other performance metrics.
Inputs: no named parameters.
Inspect Zustand store state. Finds stores used in React components.
Inputs: storeName.
Go back to the previous page in browser history
Inputs: no named parameters.
Go forward to the next page in browser history
Inputs: no named parameters.
Hover over an element
Inputs: selector (required), timeout.
Reload the current page
Inputs: no named parameters.
Take a screenshot of the page or a specific element. Returns base64 PNG image.
Inputs: fullPage, selector.
Scroll the page or scroll an element into view
Inputs: x, y, selector.
Select option(s) from a dropdown/select element
Inputs: value (required), selector (required), timeout.
Type text into an element character by character (useful for autocomplete)
Inputs: text (required), selector (required), delay, timeout.
Wait for an element to appear/disappear or for navigation to a URL
Inputs: url, state, timeout, selector.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 39 tools
Most tools have clearly distinct purposes, with browser actions, network/console inspection, and React state inspection well separated. However, similar tools like find_component and collect_component_instances, or get_dom and get_react_tree, could cause some misselection despite descriptive help.
All tool names use snake_case and follow a consistent verb_noun pattern, with action verbs like navigate, click, fill, and get_* for inspections, clear_* for resets, and find_*/collect_*/detect_* for specific operations. No mixing of conventions.
39 tools is well beyond the typical well-scoped range and even exceeds the 25+ threshold for 'too many'. While the broad scope of a Playwright and React debugger justifies some depth, this many tools feels heavy and could overwhelm an agent.
The tool set covers the full debugging lifecycle: navigation, interaction, DOM inspection, React component state and tree, multiple state management libraries (Zustand, Redux, React Query), performance monitoring, error detection, hydration mismatch, and accessibility audits. No obvious dead ends or missing critical operations for the stated purpose.
Live browser debugging for AI assistants — DOM, console, network via MCP.
Write, run and check natural-language browser tests of your web app from your AI assistant.
Control a real browser from AI agents: navigate, click, type, screenshot, read the page.
AI QA tester — real browsers scan sites for bugs, SEO, perf, and accessibility issues via chat.