react-render-profile-mcp

Decodes React DevTools Profiler exports and detects spurious renders

AnAutonomous Performance SRE & Auto-Remediation Enginefor React, exposed as a Model Context Protocol (MCP) server. Built specifically to bridge the performance perception gap for AI coding agents (Claude, Cursor, Copilot).

👁️ The Blind Spot: Why AI Agents Break React Production

When an AI agent refactors a Context Provider, changes state architecture, or hooks up a global store, it iscompletely blindto the runtime performance impact.

An agent can successfully pass unit tests and compile code while introducing catastrophic performance regressions:

- A single state update cascading into80 unnecessary child re-renders.
- Infinite rendering loops triggered byunstable Zustand/Redux selector references.
- Hydration mismatchesforcing React to throw away server-rendered HTML and mount from scratch.
- Unstablekeypropscausing components to unmount and mount on every render cycle (lifecycle anomalies).

react-render-profile-mcpgives AI agents a "third eye" to dynamically measure, visualize, and auto-remediate these performance bottlenecks.

Instead of raw JSON dumps, this server organizes performance data into structured, actionable insights across four core engineering pillars:

🧠 1. AST Auto-Remediation Engine (ts-morph)

ア When a bottleneck is found, the agent doesn't need to manually rewrite code. The server can mutate component source code on disk:

- Hoisting: Statically hoisting object and array literals out of render bodies.
- Dynamic Memoization: Wrapping unstable functions and variables inuseCallbackanduseMemowith computed dependency arrays.
- ROI Wrapping: Wrapping components inReact.memoonly if the profiled self-time and spurious render count justify the comparison overhead (ROI > 1.5).
- Rule Auditing: Scanning code to prevent compiler bailouts (detectingDate.now(),Math.random(), or render-phaseuseRefmutations).

📊 2. Interactive SVG Cascade Visualizer (MCP Resource)

Generates parent-child rendering graphs directly into the agent's chat window using the custom resource URI schemereact-profile://commits/{commitId}/cascade?profile_path={profile_path}.

🛡️ 3. RSC Flight Stream & Security Profiler

Analyzes React Server Components (RSC) Flight streams to optimize delivery:

- Identifies bloated chunks (> 50KB) and sequential waterfalls.
- Scans payloads for prototype traversal vulnerabilities likeCVE-2025-55182 (React2Shell)exploits.

Aligns React commits with Chrome Performance timeline events usingblink.user_timingmarkers.

- Measures post-commit layout, paint, and style calculation tasks to calculate real Core Web Vitals impacts (CLS / INP estimates).

Below is a compact summary of the tools exposed by this server. All tools accept a requiredprofile_pathpointing to a React DevTools export.json.

🤖 Prompt Injection: Teach Your Agent to Profile

To get the most out of this server, add the following prompt to your agent's system instructions (e.g., in.cursorrules, Cursor System Prompt, or Claude Custom Instructions):

You are equipped with react-render-profile-mcp. Use it systematically whenever: 1. You make structural changes to React components, global state providers, or store selectors. 2. The user reports lag, slow input response, or UI stuttering. 3. You refactor context providers, Zustand selectors, or Redux dispatches. Debugging Workflow: - Ask the user to record and export a React DevTools profile (.json). - Run get_render_summary to understand the scale of the problem and look for lifecycle_anomaly: true (unstable keys). - Run find_spurious_renders and analyze_compiler_efficacy to pinpoint unstable prop references. - Call the react-profile://commits/{commitId}/cascade resource to visualize cascades. - Use remediate_component to automatically apply AST optimizations (hoisting static variables, wrapping hooks) instead of doing it manually.

- OpenReact DevToolsin your browser.
- Navigate to theProfilertab.
- Click theRecordbutton (circle), interact with your application to trigger the performance issue, and clickStop.
- Click theSave Profileicon (💾) to download the.jsonfile.
- Provide the absolute path to this file to the MCP server.

Add this to yourclaude_desktop_config.json:

{ "mcpServers": { "react-render-profile": { "command": "npx", "args": ["-y", "react-render-profile-mcp"] } } }

- Command:npx -y react-render-profile-mcp

- ESM-Native: Built with TypeScript ESM, optimized for fast Node.js imports.
- React DevTools v5 Protocol: Natively decodes serialized operations arrays, resolving fiber snapshots and name maps.
- Lane Identification: Distinguishes between high-priority lane updates and concurrent transition commits (Low Priority/Idle) to prevent false-positive regression flags.
- AST Modification Safety: Implementsts-morphstatement manipulation blocks, avoiding common parser state corruption during multi-pass rewrites.

- tailwind-context-resolver-mcp— Resolve Tailwind design tokens and validate utility classes.
- v8-cpu-profile-decoder-mcp— Decode V8 CPU profiles for Node.js backend performance tuning.

Decodes V8 CPU profiles into flame graph summaries and hotspots for AI agents