AI-powered React debugging with Playwright and MCP
View the Project on GitHub Lars-Albinsson/playwright-react-debug-mcp
Debug frontend applications with AI assistance using Claude and Playwright.
Playwright React Debug MCP is a Model Context Protocol server that gives AI assistants like Claude the ability to interact with live web applications through a browser. Ask Claude to navigate, click, fill forms, 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 | Ask Claude: “Navigate to /dashboard and check for errors” |
| Screenshot and paste into chat | Claude sees the live page and can interact with it |
| Copy-paste console errors | Claude captures all console logs automatically |
| Inspect React DevTools manually | Claude queries React component tree directly |
| Check Network tab for failed requests | Claude monitors all network traffic |
Navigate pages, click elements, fill forms, and automate user flows through natural language.
Get summarized DOM trees, element details, computed styles, and text content.
Track API calls, view request/response bodies, filter by URL or status code.
Inspect React component trees, props, state, and hooks—without browser DevTools.
Intelligent error analysis with full context: console logs, failed requests, React state.
Capture full-page or element screenshots for visual debugging.
You: Navigate to https://myapp.com/login and try logging in with test@example.com
Claude: I'll navigate to the login page and fill in the credentials.
[Uses navigate, fill, and click tools]
The login failed. I found these issues:
- Console error: "TypeError: Cannot read property 'user' of undefined"
- Network: POST /api/auth returned 401 Unauthorized
- React: The AuthProvider component has isAuthenticated: false
Would you like me to analyze the error further?
# Install
npm install playwright-react-debug-mcp
npx playwright install chromium
# Or clone and build
git clone https://github.com/Lars-Albinsson/playwright-react-debug-mcp
cd playwright-react-debug-mcp
npm install && npm run build
| Category | Tools | Description |
|---|---|---|
| Navigation | 11 tools | Navigate, click, fill, scroll, type |
| Inspection | 3 tools | DOM tree, element details, text content |
| Network | 3 tools | Request monitoring, response inspection |
| Console | 2 tools | Log capture, filtering |
| React | 4 tools | Component tree, state, props |
| State Management | 4 tools | Redux, Zustand, React Query, Context |
| Performance | 3 tools | Render tracking, slow components, Web Vitals |
| Error Detection | 3 tools | Hydration errors, error boundaries, memory leaks |
| Accessibility | 2 tools | WCAG audit, ARIA tree |
| Advanced | 5 tools | Screenshots, JS execution, error analysis |
MIT License - Free for personal and commercial use.