react-render-profile-mcp

Decodifica las exportaciones del Profiler de React DevTools y detecta renderizados espurios

Documentación

react-render-profile-mcp

Un Motor Autónomo de SRE de Rendimiento y Auto-Remediación para React, expuesto como un servidor de Protocolo de Contexto de Modelo (MCP). Construido específicamente para cerrar la brecha de percepción de rendimiento para agentes de codificación de IA (Claude, Cursor, Copilot).

👁️ El Punto Ciego: Por Qué los Agentes de IA Rompen la Producción de React

Cuando un agente de IA refactoriza un Context Provider, cambia la arquitectura de estado o conecta un store global, está completamente ciego al impacto en el rendimiento en tiempo de ejecución.

Un agente puede pasar pruebas unitarias y compilar código con éxito mientras introduce regresiones de rendimiento catastróficas:

Una única actualización de estado que se propaga en 80 re-renderizados innecesarios de componentes hijos.
Bucles de renderizado infinitos provocados por referencias inestables de selectores Zustand/Redux.
Desajustes de hidratación que obligan a React a descartar el HTML renderizado en el servidor y montar desde cero.
Props key inestables que causan que los componentes se desmonten y monten en cada ciclo de renderizado (anomalías de ciclo de vida).

react-render-profile-mcp brinda a los agentes de IA un "tercer ojo" para medir, visualizar y auto-remediar dinámicamente estos cuellos de botella de rendimiento.

⚡ Los Cuatro Pilares de AI-SRE

En lugar de volcados JSON crudos, este servidor organiza los datos de rendimiento en información estructurada y accionable en cuatro pilares fundamentales de ingeniería:

🧠 1. Motor de Auto-Remediación AST (`ts-morph`)

ア Cuando se encuentra un cuello de botella, el agente no necesita reescribir el código manualmente. El servidor puede mutar el código fuente del componente en disco:

Hoisting: Elevación estática de literales de objetos y arrays fuera de los cuerpos de renderizado.
Memoización Dinámica: Envolver funciones y variables inestables en useCallback y useMemo con arrays de dependencias calculados.
Envoltura ROI: Envolver componentes en React.memo solo si el tiempo propio perfilado y el recuento de renderizados espurios justifican la sobrecarga de comparación (ROI > 1.5).
Auditoría de Reglas: Escaneo de código para prevenir salidas del compilador (detección de mutaciones de Date.now(), Math.random() o useRef en fase de renderizado).

📊 2. Visualizador Interactivo de Cascada SVG (Recurso MCP)

Genera gráficos de renderizado padre-hijo directamente en la ventana de chat del agente utilizando el esquema de URI de recurso personalizado react-profile://commits/{commitId}/cascade?profile_path={profile_path}.

Los disparadores están estilizados con paletas HSL distintivas para aislar los canales de propagación:
- 🔵 Disparador de Contexto: Azul (ola oceánica)
- 🟠 Store Zustand/Redux: Naranja (onda de suscriptores)
- 🔴 Invalidación de Props: Rojo (desajuste de referencia)
- 🟢 Cambio de Estado: Verde (fuente de disparo esmeralda)

🛡️ 3. Perfilador de Flujo RSC Flight y Seguridad

Analiza los flujos Flight de React Server Components (RSC) para optimizar la entrega:

Identifica chunks inflados (> 50KB) y cascadas secuenciales.
Escanea los payloads en busca de vulnerabilidades de recorrido de prototipos como las explotaciones de CVE-2025-55182 (React2Shell).

⚛️ 4. Correlacionador de Trazas Multi-Capa

Alinea los commits de React con los eventos de la línea de tiempo de Chrome Performance utilizando marcadores blink.user_timing.

Mide las tareas de layout, paint y cálculo de estilos posteriores al commit para calcular los impactos reales en Core Web Vitals (estimaciones de CLS / INP).

🛠️ Referencia de Herramientas MCP

A continuación se presenta un resumen compacto de las herramientas expuestas por este servidor. Todas las herramientas aceptan un profile_path obligatorio que apunta a una exportación de React DevTools .json.

Nombre de la Herramienta	Parámetros	Propósito / Salida
`get_render_summary`	`profile_path`	Resumen de commits, tiempo total de renderizado, recuento de renderizados espurios y anomalías de ciclo de vida.
`find_spurious_renders`	`profile_path`, `min_render_count`?	Lista los componentes que se renderizaron con props/estado idénticos. Clasifica el disparador en `UNSTABLE_PARENT_REF` o `CONTEXT_UPDATE`.
`analyze_compiler_efficacy`	`profile_path`, `invalid_threshold`?	Calcula el Índice de Invalidación para identificar dónde se omite React Compiler o `React.memo`.
`diagnose_hydration_and_suspense`	`profile_path`, `waterfall_threshold_ms`?	Detecta desajustes de hidratación servidor-cliente y cascadas de fetch anidadas en Suspense.
`evaluate_external_store_performance`	`profile_path`, `max_blocking_task_ms`?	Encuentra selectores useSyncExternalStore inestables y tareas síncronas bloqueantes de alta prioridad.
`trace_state_cascade_footprint`	`profile_path`, `commit_index`	Traza el árbol de propietarios virtual para medir la profundidad de propagación y el recuento de consumidores de las actualizaciones.
`suggest_memoization`	`profile_path`, `min_wasted_ms`?	Proporciona sugerencias de `React.memo` de alto ROI basadas en el tiempo propio promedio (umbral > 2ms).
`remediate_component`	`file_path`, `component_name`, `unstable_props`, `roi_score`	Modifica el AST en disco para elevar variables, envolver hooks y aplicar memoización.
`audit_compiler_rules`	`file_path`, `component_name`	Audita estáticamente el código fuente de los componentes en busca de violaciones de reglas de React Compiler.
`profile_rsc_stream`	`stream_payload`	Analiza los registros de RSC Flight para auditar tamaños de chunks, cascadas y explotaciones de `React2Shell`.
`correlate_chrome_trace`	`profile_path`, `trace_path`	Alinea los commits de React con los eventos de traza de Chrome para calcular los impactos en las web vitals CLS/INP.

🤖 Inyección de Prompt: Enseña a Tu Agente a Perfilar

Para aprovechar al máximo este servidor, añade el siguiente prompt a las instrucciones del sistema de tu agente (por ejemplo, en .cursorrules, el System Prompt de Cursor o las Instrucciones Personalizadas de Claude):

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.

📋 Cómo Exportar un Perfil

Abre React DevTools en tu navegador.
Navega a la pestaña Profiler.
Haz clic en el botón Record (círculo), interactúa con tu aplicación para provocar el problema de rendimiento y haz clic en Stop.
Haz clic en el icono Save Profile (💾) para descargar el archivo .json.
Proporciona la ruta absoluta de este archivo al servidor MCP.

⚙️ Configuración e Instalación

Claude Desktop

Añade esto a tu claude_desktop_config.json:

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

Cursor / VS Code / Otros Clientes

Añade un servidor MCP de tipo command:

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

🔧 Bajo el Capó

ESM-Nativo: Construido con TypeScript ESM, optimizado para importaciones rápidas de Node.js.
Protocolo React DevTools v5: Decodifica de forma nativa los arrays de operaciones serializadas, resolviendo snapshots de fiber y mapas de nombres.
Identificación de Lanes: Distingue entre actualizaciones de lane de alta prioridad y commits de transición concurrentes (Low Priority/Idle) para evitar falsos positivos de regresión.
Seguridad de Modificación AST: Implementa bloques de manipulación de sentencias ts-morph, evitando la corrupción común del estado del parser durante reescrituras de múltiples pasadas.

Parte del Cinturón de Herramientas MCP

Desarrollado junto a:

tailwind-context-resolver-mcp — Resuelve tokens de diseño de Tailwind y valida clases de utilidad.
v8-cpu-profile-decoder-mcp — Decodifica perfiles de CPU de V8 para el ajuste de rendimiento de backends Node.js.

Licencia

MIT

react-render-profile-mcp

Documentación