What can you do with this server?

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.

Which integrations are available for this server?

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.

How do I use playwright-react-debug-mcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. 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.

playwright-react-debug-mcp

by Lars-Albinsson

Overview Schema Related Servers Score Discussions

TypeScript

Local

Playwright React Debug MCP

npm version License: MIT Node.js

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.

Why Use This?

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

Features

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

Quick Start

Install

npm install -g playwright-react-debug-mcp
npx playwright install chromium

Configure Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "playwright-debug": {
      "command": "npx",
      "args": ["playwright-react-debug-mcp"]
    }
  }
}

Configure Claude Code

Add to your project's .mcp.json:

{
  "mcpServers": {
    "playwright-debug": {
      "command": "npx",
      "args": ["playwright-react-debug-mcp"],
      "transport": "stdio"
    }
  }
}

Try It

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

Example Session

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 status

Available Tools

Tool	Description
`navigate`	Navigate to URL with wait conditions
`click`	Click elements (left/right/double)
`fill`	Fill form fields
`select`	Select dropdown options
`type`	Type text character-by-character
`press_key`	Press keyboard keys (Enter, Escape, Control+A...)
`hover`	Hover over elements
`drag`	Drag and drop between elements
`scroll`	Scroll page or element into view
`wait_for`	Wait for element/navigation
`upload_file`	Set files on a file input
`go_back`	Browser back
`go_forward`	Browser forward
`reload`	Reload page

Tabs, Dialogs & Downloads (7 tools)

Tool	Description
`list_tabs`	List open tabs
`new_tab`	Open a new tab
`switch_tab`	Switch the active tab
`close_tab`	Close a tab
`set_dialog_action`	Auto-accept or dismiss alert/confirm/prompt
`get_dialogs`	Log of dialogs and how they were handled
`list_downloads`	Downloads captured this session

Inspection (4 tools)

Tool	Description
`snapshot`	Token-efficient ARIA snapshot (best first look at a page)
`get_dom`	Summarized DOM tree
`get_element`	Element details with styles
`get_text_content`	Extract visible text

Network (6 tools)

Tool	Description
`get_network`	View requests with filtering
`get_request_detail`	Full request/response details
`clear_network`	Clear captured requests
`mock_route`	Mock API responses by URL pattern (status, body, delay)
`unmock_route`	Remove a mock
`list_mocks`	Active mocks and hit counts

Console (2 tools)

Tool	Description
`get_console`	View logs with filtering
`clear_console`	Clear captured logs

React (4 tools)

Tool	Description
`get_react_tree`	Component tree with hooks
`find_component`	Search components by name
`get_component_state`	Detailed state/props
`collect_component_instances`	All instances of a component

State Management (4 tools)

Tool	Description
`get_redux_state`	Redux store state + actions
`get_zustand_stores`	Zustand store inspection
`get_react_query_cache`	React Query cache
`get_context_values`	React Context values

Cookies & Storage (6 tools)

Tool	Description
`get_cookies`	Browser cookies
`set_cookie`	Set a cookie (e.g. inject a session token)
`clear_cookies`	Clear all cookies
`get_storage`	localStorage / sessionStorage contents
`set_storage_item`	Set a storage item
`clear_storage`	Clear web storage

Device & Environment Emulation (7 tools)

Tool	Description
`set_viewport`	Resize the viewport
`emulate_device`	Emulate a device ("iPhone 15", "Pixel 7"...)
`emulate_media`	Dark mode, reduced motion, print media
`set_geolocation`	Set browser geolocation
`set_offline`	Toggle offline mode
`throttle_network`	Slow-3G/fast-3G/4G network throttling
`throttle_cpu`	CPU slowdown for performance testing

Performance (3 tools)

Tool	Description
`get_render_count`	Component render tracking
`get_slow_components`	Slow component detection
`get_web_vitals`	Core Web Vitals (LCP, CLS, etc.)

Error Detection (3 tools)

Tool	Description
`find_hydration_errors`	SSR hydration mismatches
`get_error_boundaries`	React error boundaries
`detect_memory_leaks`	Memory leak indicators

Accessibility (2 tools)

Tool	Description
`audit_accessibility`	WCAG-style audit
`get_aria_tree`	Accessibility tree

Advanced (5 tools)

Tool	Description
`screenshot`	Capture page or element
`save_pdf`	Save page as PDF (headless mode)
`evaluate_js`	Execute JavaScript
`explain_error`	AI error analysis
`get_debug_summary`	Page state overview

Use Cases

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 errors

React Development

Find the UserProfile component and show its state
What props are being passed to the Modal?
Collect all Button instances and compare their usage

API Integration

What requests were made when I clicked submit?
Show me the response from the failed API call

Configuration

Environment Variables

Variable	Default	Description
`MAX_CONSOLE_ENTRIES`	200	Console log buffer size
`MAX_NETWORK_ENTRIES`	100	Network request buffer size
`BROWSER_HEADLESS`	false	Run browser headless (required for `save_pdf`)

{
  "mcpServers": {
    "playwright-debug": {
      "command": "npx",
      "args": ["playwright-react-debug-mcp"],
      "env": {
        "BROWSER_HEADLESS": "true"
      }
    }
  }
}

Development

# 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 dev

Documentation

Requirements

Node.js 18+
Playwright (Chromium)
Claude Desktop or Claude Code

Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines.

License

MIT License - see LICENSE for details.

How It Compares

	This project	playwright-mcp	chrome-devtools-mcp
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.

Acknowledgements

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

Install Server

license - permissive license

quality

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

1Releases (12mo)

Commit activity

Resources

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

View all tools

Related MCP Servers

Curupira
Developer Tools App Automation Testing & QA Tools
drzln
A
license
Not graded
quality
D
maintenance
Enables AI assistants to debug frontend applications by providing direct access to browser DevTools, React state, DOM inspection, and runtime debugging capabilities. Bridges the gap between AI and complex web applications for autonomous debugging and issue resolution.
Updated 4 months ago (2026-04-19 02:45 UTC)
1
MIT
Debugger MCP Server
Developer Tools Testing & QA Tools Monitoring
Phoenixrr2113
F
license
Not graded
quality
D
maintenance
Provides real-time debugging, code quality monitoring, and performance insights for React/Next.js applications with features including Chrome DevTools integration, breakpoint management, complexity analysis, and live error streaming.
Updated a year ago (2025-07-02 20:30 UTC)
29
1
react-devtools-mcp
Developer Tools Monitoring Code Analysis
skylarbarrera
A
license
C
quality
D
maintenance
Provides AI agents with visibility into React applications by exposing tools to inspect component state, props, and performance metrics. It enables debugging and state analysis for both web and React Native applications through the Model Context Protocol.
Updated 7 months ago (2026-01-31 02:06 UTC)
45
10
1
MIT
browser-connect-mcp
Browser Automation Monitoring Developer Tools
perception30
A
license
C
quality
D
maintenance
Enables AI assistants to connect to browser DevTools and backend debuggers for full-stack debugging, including frontend console, network, performance, and backend log analysis.
Updated a year ago (2025-06-10 00:44 UTC)
16
18
7
MIT

View all related MCP servers

Related MCP Connectors

sncro
Live browser debugging for AI assistants — DOM, console, network via MCP.
ProdPoke
AI QA tester — real browsers scan sites for bugs, SEO, perf, and accessibility issues via chat.
Vynix
Give AI coding agents access to your Vynix visual feedback, bug reports, and AI diagnosis.

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Lars-Albinsson/playwright-react-debug-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server