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
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.
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 ...
GitHub
github.com › ohah › react-native-mcp
GitHub - ohah/react-native-mcp · GitHub
1 week 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
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.
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 66 users
Forked by 10 users
Languages JavaScript 97.1% | Dockerfile 2.9%
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.
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,
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
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 › 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
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.
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.
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.
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.
npm
npmjs.com › package › chrome-devtools-mcp
chrome-devtools-mcp - npm
5 days ago - Step 1: Install the MCP proxy by following the MCP proxy setup guide. Step 2: Start the Chrome DevTools MCP server with the proxy:
» npm install chrome-devtools-mcp
Published Mar 18, 2026
Version 0.20.2
Author Google LLC
Chrome Developers
developer.chrome.com › blog › chrome devtools (mcp) for your ai agent
Chrome DevTools (MCP) for your AI agent | Blog | Chrome for Developers
The Model Context Protocol (MCP) is an open-source standard for connecting large language models (LLMs) to external tools and data sources. The Chrome DevTools MCP server adds debugging capabilities to your AI agent.
X
x.com › aidenybai › status › 1922670487848497536
Aiden Bai on X: "react devtools + MCP is an incredibly compelling story" / X
react devtools + MCP is an incredibly compelling story · 11:09 am · 14 May 2025 · · · 16.5K Views · 12 · 6 · 194 · 39 · Read 12 replies · Sign up now to get your own personalized timeline! Sign up with GoogleSign up with Google. Opens in new tab ·