Dendro React

What Dendro React MCP server does

The Dendro React MCP server builds a model of a React or React Native repository and makes that model available to an AI agent through MCP. Its analysis is expressed in React terms rather than only locating symbols: an agent can inspect a component’s props, state, contexts, complexity, and likely change impact before editing it.

The repository model also covers effect hygiene, including patterns such as leaked subscriptions, derived-state effects, and fetch races that ordinary dependency checks may not identify. It can examine providers and consumers, identify prop drilling, and describe application data flow. Navigation analysis supports React Navigation, Next.js, React Router, Remix, and Expo Router.

A companion VS Code visualizer presents the project as a live dendrogram. The agent can highlight the relevant area, annotate it, trace a prop, or guide a step-by-step architecture walkthrough. Runtime inspection is optional and can expose live state, props, and hooks from a connected running application.

How it works

The Dendro React MCP server runs locally from the extension’s MCP server file. An MCP client starts it with an absolute Node executable path and the server script as an argument. The agent should call get_usage_guide first, and visualization commands should be run sequentially.

Analysis is performed against the opened React or React Native project. For runtime features, the server can connect to a running React Native application over a DevTools WebSocket. Runtime startup is disabled by default and can target iOS, Android, or a device.

Setup and configuration

Install the Dendro React extension from the VS Code Marketplace or with ext install RooneyTech.dendro-react. Then locate the installed mcp-server.js file under the VS Code extensions directory and find the absolute path to Node. Add both values to an .mcp.json file in the project root, using Node as the command and the server path as its first argument.

The extension settings include dendro-react.autoStartRuntime, dendro-react.runtimePlatform, dendro-react.runtimePort, dendro-react.runtimeHost, and dendro-react.projectorMode. The runtime defaults to port 8097 and host localhost; physical-device connections can use 0.0.0.0 as the host.

Tools and capabilities

The Dendro React MCP server supports:

• Component contracts covering props, state, contexts, blast radius, and complexity.
• Health audits with A–F grades, line-linked findings, and suggested fixes.
• Complexity scores and identified refactoring candidates.
• Navigation mapping for supported React web and native frameworks.
• Context, provider, consumer, and prop-drilling analysis.
• Visual highlighting, annotations, flow tracing, and architecture walkthroughs.
• Optional live inspection of application state, props, and hooks.
• Repository orientation through a compact usage-guide call.

Limitations and notes

The project is described as early access, so behavior may change or require troubleshooting. The tools are free to use locally, with no account or license key required according to the README. Code stays on the machine except when submit_feedback is explicitly approved; that operation sends a debrief to the project maker.

Runtime inspection is optional and depends on connecting to a running application. The README documents configuration for React Native runtime connections, while static analysis and visualization are available without that connection.