MCP DeepGraph React — el grafo de tus componentes, state flow y dependencias

Qué es#

DeepGraph React analiza tu proyecto React como un grafo navegable. A diferencia de DeepGraph Next.js, que es vertical de Next, este MCP cubre proyectos React puros: CRA, Vite, Remix, Astro con React, librerías de componentes, etc.

Lo que mapea:

• Jerarquía de componentes — quién renderiza a quién
• State flows — useState, useReducer, context propagation
• Dependencias — imports entre componentes

Resultado: cuando Claude piensa en tu codebase, no adivina; consulta el grafo.

Tabla resumen#

Cómo se instala#

npx claude-code-templates@latest --mcp deepgraph/deepgraph-react

Para Claude:

Instalé el MCP deepgraph/deepgraph-react. Mostrame el grafo de mi
proyecto: árbol de componentes desde el root y dónde está el state
principal (useState/useReducer/context).

Qué podés hacer con esto#

Mapa de jerarquía de componentes#

"Dibujame el árbol desde <App> hasta hoja. Identificá los componentes con más hijos directos". Útil para detectar componentes-monolito que conviene fragmentar.

Análisis de state flow#

"¿Dónde se define el state que termina afectando a <ProductCard>? ¿Está prop-drilled o llega por context?". Sin esto, vas leyendo archivos hasta encontrarlo.

Impact de un refactor#

"Si cambio la firma de useUser(), qué componentes necesitan actualizarse?". Lista exacta.

Detectar prop drilling#

"Buscame casos donde un prop viaja 4+ niveles. Esos son candidatos a context o store global".

Dead code#

"Componentes definidos que nadie importa". Limpieza pre-release.

Pre-requisitos#

• Proyecto React accesible al MCP
• Node.js + Claude Code funcionando

Cuándo NO conviene#

Bajalo de la fuente#

• Ficha en aitmpl.com: DeepGraph React MCP — comando exacto.
• Config JSON: deepgraph-react.json.

Recursos relacionados#

• DeepGraph Next.js MCP — vertical Next.
• DeepGraph TypeScript MCP — para análisis de tipos.
• Cartographer — análisis horizontal de cualquier codebase (no solo React).