GitHub
github.com › ChakshuGautam › react-devtools-mcp
GitHub - ChakshuGautam/react-devtools-mcp
Proof of concept for integrating React DevTools with Model Context Protocol (MCP).
Author ChakshuGautam
GitHub
github.com › wimpywarlord › mcp-react-dev-tools
GitHub - wimpywarlord/mcp-react-dev-tools: MCP for React Dev Tools - Use directly inside cursor
This application is a powerful browser monitoring and interaction tool that enables AI-powered applications via Anthropic's Model Context Protocol (MCP) to capture and analyze browser data through a Chrome extension.
Author wimpywarlord
Videos
06:03
How to use the DevTools MCP server for AI debugging #DevToolsTips ...
05:12
Using the Chrome MCP Server with Copilot to fix a UI bug - YouTube
23:15
"Interactive MCP with React Router" by Kent C. Dodds - YouTube
17:38
Chrome DevTools MCP: Automated Test, Debug and Performance Analysis ...
07:20
Chrome DevTools MCP Server Solves a BIG Problem - YouTube
03:08
Chrome DevTools MCP: How to use DevTools MCP in VS Code - YouTube
Visual Studio Marketplace
marketplace.visualstudio.com › items
React Native MCP DevTools - Visual Studio Marketplace
Extension for Visual Studio Code - Chrome DevTools-like GUI for React Native MCP — Console, Network, State, Renders, Component Tree
Glama
glama.ai › mcp › servers › react-devtools-mcp
react-devtools-mcp by skylarbarrera | Glama
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 ...
LogRocket
blog.logrocket.com › home › debugging with chrome devtools mcp: giving ai eyes in the browser
Debugging with Chrome DevTools MCP: Giving AI eyes in the browser - LogRocket Blog
October 28, 2025 - In the next sections, we will use the MCP server to debug the problem we are having with the page. Let’s see what’s up with the app and if there are any errors in the console. ... We do not have to get into the Chrome browser ourselves and check for console errors; we can now get the AI agent to get the error code from the console for us and have it display nicely for us in the text editor. ... It says React is not defined.
MCP
mcp.so › client › mcp-react-dev-tools › wimpywarlord
BrowserTools MCP MCP Client
To use BrowserTools MCP, install the Chrome extension, set up the MCP server in your IDE, and run the browser-tools-server in a terminal. After setup, open the Chrome DevTools and access the BrowserToolsMCP panel.
Reddit
reddit.com › r/vibecoding › devtools mcp is magic
r/vibecoding on Reddit: Devtools MCP is magic
September 27, 2025 -
https://developer.chrome.com/blog/chrome-devtools-mcp
Long story short - this is like playwright, but:
95% used context less
WAY smarter
allows your AI agent to seamlessly go through the whole testing processes of web development.
just get this started, and if you have any sort of bug - tell agent to use this MCP and ITS FLYING.
Just discovered this like 2 days ago, i've been extensively testing this - mainly using my main model - GLM4.5 - and honestly i can say - for any sort of web development it's amazing to just get the stuff done. Console logs - solved. Going through pages - no problem, solved. 500 errors? It'll collect the data itself, debug and resolve on it's own. And what's the most funny thing? Its a total context saver - as it uses so minor context amount surprisingly - to be honest i prefer to just tell GLM to use MCP instead of typing the whole prompt and stuff i'd want it to debug.
Glama
glama.ai › mcp › servers › react-devtools-mcp › schema
Schema | react-devtools-mcp | Glama
View the complete schema definition for react-devtools-mcp. Explore data structures, field types, and relationships used in this MCP implementation.
GitHub
github.com › kalivaraprasad-gonapa › react-mcp
GitHub - kalivaraprasad-gonapa/react-mcp: react-mcp integrates with Claude Desktop, enabling the creation and modification of React apps based on user prompts · GitHub
react-mcp integrates with Claude Desktop, enabling the creation and modification of React apps based on user prompts - kalivaraprasad-gonapa/react-mcp
Starred by 67 users
Forked by 9 users
Languages JavaScript 97.1% | Dockerfile 2.9%
Medium
medium.com › @joe.njenga › 6-react-js-mcp-servers-frameworks-i-use-to-build-react-apps-5x-faster-12649a1b7c1a
6 React JS MCP Servers & Frameworks I Use to Build React Apps 5x Faster | by Joe Njenga | Medium
July 23, 2025 - When I discovered this React hook from Use MCP that simplifies MCP development,
LobeHub
lobehub.com › mcp › chakshugautam-react-devtools-mcp
React DevTools MCP POC | MCP Servers
November 27, 2025 - Proof of concept for integrating React DevTools with Model Context Protocol (MCP). The MCP server starts a react-devtools-core WebSocket server on port 8097 and communicates via stdio.
GitHub
github.com › pnarayanaswamy › react-native-devtools-mcp
GitHub - pnarayanaswamy/react-native-devtools-mcp: MCP server for debugging React Native apps — screenshots, UI hierarchy, interactions, JS console, and more
Import createServer to get a pre-configured MCP server with all generic tools, then register your own: import { createServer } from "react-native-devtools-mcp"; const server = createServer({ name: "my-custom-mcp", version: "1.0.0" }); // Add your own tools on top of the 16 built-in ones server.tool("my_tool", "Does something custom", {}, async () => { return { content: [{ type: "text", text: "result" }] }; });
Author pnarayanaswamy
GitHub
github.com › igorzheludkov › react-native-ai-devtools
GitHub - igorzheludkov/react-native-ai-devtools · GitHub
claude mcp add rn-debugger --scope user -- npx react-native-ai-devtools
Starred by 33 users
Forked by 5 users
Languages TypeScript 78.0% | JavaScript 21.8% | Shell 0.2%
GitHub
github.com › Phoenixrr2113 › debugger-mcp
GitHub - Phoenixrr2113/debugger-mcp: A comprehensive development companion tool that provides real-time debugging, code quality monitoring, and AI-enhanced insights for React/Next.js applications via the Model Context Protocol (MCP). · GitHub
A comprehensive development companion tool that provides real-time debugging, code quality monitoring, and AI-enhanced insights for React/Next.js applications via the Model Context Protocol (MCP). - Phoenixrr2113/debugger-mcp
Author Phoenixrr2113
GitHub
github.com › ohah › react-native-mcp
GitHub - ohah/react-native-mcp · GitHub
2 weeks ago - Install React Native MCP DevTools from the Marketplace, or in VS Code: Ctrl+Shift+X (Extensions) → search React Native MCP DevTools → Install. Gives you Console, Network, State, Renders, and Component Tree in the sidebar.
Author ohah
MCP Market
mcpmarket.com › home › mcp servers › react native devtools
React Native Devtools for AI: Real-time Debugging & Insights
3 weeks ago - This tool acts as an MCP server, bridging your running React Native application's internal state with an AI host like Claude. It leverages a dual-channel architecture: the Chrome DevTools Protocol (CDP) for zero-config access to console logs, errors, network requests, and performance profiling via Metro, and an optional SDK for advanced features like navigation state inspection, Redux/Zustand store viewing, AsyncStorage/MMKV reading, and granular render profiling.
Copilotkit
webflow.copilotkit.ai › blog › add-an-mcp-client-to-any-react-app-in-under-30-minutes
Add an MCP Client to Any React App in Under 30 Minutes
May 1, 2025 - Instead of writing backend logic to handle tools, memory, or actions (which are all part of MCP), you simply send a request to an existing MCP server, and it handles the smart stuff for you. Let’s say you are building a React-based project management app.
LobeHub
lobehub.com › home › mcp servers › react native debugger mcp
React Native Debugger MCP | MCP Servers
3 weeks ago - The React Native Debugger MCP Server is a specialized server that interfaces with your React Native application debugger.
React
react.dev › learn › react-developer-tools
React Developer Tools – React
To inspect apps built with React Native, you can use React Native DevTools, the built-in debugger that deeply integrates React Developer Tools.
MCP Servers
mcpservers.org › debugger mcp server
Debugger MCP Server | Awesome MCP Servers
A comprehensive development companion tool that provides real-time debugging, code quality monitoring, and AI-enhanced insights for React/Next.js applications via the Model Context Protocol (MCP).