React Debugger

Supercharge agents with React runtime values.

⚠️ Alpha. APIs subject to change.

Why

AI agents are good at guessing. They can read your codebase, suggest edits, and point you in the right direction.

But they can’t see what’s actually happening in your running app. That’s the missing piece.

React Debugger bridges that gap. It connects your React runtime to MCP-enabled agents (Cursor, Claude, VSCode, etc.), so they can inspect live components, props, and state — the same way you would in devtools.

This turns agents from helpful advisors into practical debuggers.

Quickstart

1. Initialize the project (creates Cursor rule + MCP config):

npx @react-debugger/core init

Tip: to avoid getting a cached/older package from the registry, you can force the latest published version with:

npx @react-debugger/core@latest init

2. Enable the MCP server in your environment:

• Cursor: you should see a popup New MCP server detected: react-debugger → click "Enable". If not, open Settings → MCP & Integrations → MCP Tools and toggle react-debugger.
• Claude Desktop: look for the same popup or enable in Settings → MCP Servers.
• VS Code: open the Command Palette → Manage MCP Servers → Add or enable react-debugger (requires the MCP extension).
• Other: start locally with npx @react-debugger/core mcp.

If you've just run init, the CLI prints a short summary showing what was added and a single line with the most likely next step for your editor.

Need guided troubleshooting? Run:

npx @react-debugger/core help

This opens an interactive, terminal-only help menu with fixes for common problems (MCP server port conflicts, mcp.json issues, Cursor rules not applying).

What you get

• Agents with context They don’t just guess — they can tell you exactly why your button isn’t clickable, or why a prop isn’t updating.

• Faster debugging “This component has disabled={true} because it’s inheriting state from X.” → Answers that normally take you 10–20 minutes to track down.

Requirements

• React 16.8+