Dendro
Your agent is editing code it's never read.
It just scanned forty files to answer "what breaks if I change this?" It could have asked one fucking question.
Dendro is one model of your React or React Native codebase, rendered twice: semantics your agent can query, and a map you can both point at.
For your agent — the semantics
MCP tools that answer React questions in React terms: the component's contract
before an edit (props, state, contexts, blast radius), rerender risk with the
why, effect hygiene (cleanup risks, setter-only effects, fetch races
that exhaustive-deps can't see), navigation graphs (Next.js, React Navigation,
Remix, Expo Router), live runtime state from a running app — and whole-repo
orientation in one ~300-token call.
Symbol servers tell your agent where the symbol is. Dendro tells it what rerenders, and why.
For you — the visualizer
Your app's constellation: a live dendrogram in VS Code, descended from Reactive. Your agent drives it — highlights what it's talking about, annotates, traces a prop, walks you through the architecture step by step while you click Next/Back. You watch the same map the agent reasons over.
Getting Started
- Install Dendro React — run
ext install RooneyTech.dendro-reactin VS Code, or install from the Marketplace - Open your React or React Native project in Claude Code
- Paste this:
Set up Dendro React for this project. The extension is already installed in VS Code. Do these steps in order:
- Find the MCP server path:
ls ~/.vscode/extensions/rooneytech.dendro-react-*/dist/mcp-server.js. If several versions are installed, choose the newest one.- Find the absolute node path:
which node(Node 22.12+ or Node 20.19+ in the 20.x line).- Merge a
dendro-reactserver into.mcp.jsonusing the absolute node path as"command", the selected server path as the first arg, andDENDRO_WORKSPACE_ROOTset to this project's absolute path. Preserve other servers.- Restart the MCP client, then call
get_usage_guideand report its running version. If the tools are unavailable, stop and explain what setup remains.- Get the contract of one component I am about to edit. Read its source and one reported importer; check props, state, and used-by claims. Explain one concrete change impact and any mismatch before proposing an edit.
Your first useful result is a source-checked answer to “what depends on the component I'm changing?” The finish line is an accurate explanation of one change impact, with file references and scope limits.
For standalone analysis, Cursor/Windsurf setup, or troubleshooting, use the setup guide. The VS Code extension is needed for the shared map; static analysis can run through the npm MCP server alone.
Things to Try
Say "Dendro" in your prompts — like "Use Dendro to show me how this app is structured." It'll use the visualizer and deeper analysis instead of just reading files.
- Watch: "Open the Dendro visualizer and walk me through the app"
- Ask: "Use Dendro to check how healthy this codebase is"
- Before an edit: "Get the component contract for CheckoutForm first"
- "Where does state live? Use Dendro to trace the data flow"
- "Show me how navigation works in this app with Dendro"
- "Use Dendro to explain this repo's architecture like I've never seen it"
What It Does
- Component contracts — props, state, contexts, blast radius, complexity in one call, before your agent edits
- Health audits — A-F grade plus line-anchored review signals (cleanup risks, possible fetch races, informational setter-only effects)
- Complexity scoring — every component graded, refactoring candidates named
- Navigation mapping — React Navigation, Next.js, React Router, Remix, Expo Router
- Context & data flow — providers, consumers, prop drilling detection
- Visual canvas — the agent highlights, annotates, and traces flows in a live dendrogram
- Runtime inspection — connect to a running app for live state, props, and hooks (optional)
Check findings before changing code
Static analysis suggests places to inspect. A health grade is a heuristic, not a correctness or performance verdict. The tree follows static imports; lazy imports and other entry points can be absent. Reported re-render risks need context about memoization and runtime behavior.
Read the flagged source before applying a fix. In particular, an effect can return cleanup implicitly or through an optional chain; v0.9.0 can incorrectly flag these as leaks. Check the running server version rather than assuming a changelog entry means a fix is installed. Visualizer commands being queued does not confirm that the requested nodes appeared on screen.
Free & local
Every tool is free — exports, snapshots, verified projection, live introspection,
and batch analysis included. No account, no license key, and no code leaves your
machine. The one exception is submit_feedback, which sends a debrief to the
maker only when you explicitly say yes.
Configuration
| Setting | Default | Description |
|---|---|---|
dendro-react.autoStartRuntime | false | Auto-connect to React Native apps on activation |
dendro-react.runtimePlatform | auto | Target platform: auto, ios, android, or device |
dendro-react.runtimePort | 8097 | DevTools WebSocket port |
dendro-react.runtimeHost | localhost | WebSocket host (0.0.0.0 for physical devices) |
dendro-react.projectorMode | false | Larger fonts/strokes for screen sharing |
Learn More
- Setup Guide — manual setup, Cursor/Windsurf config, runtime connection, troubleshooting
- Tools Reference — every MCP tool with descriptions
Feedback
Dendro is in early access. If something doesn't work, feels confusing, or you wish it did something different — I want to hear it.
- Issues & ideas: GitHub Issues
- Email: [email protected]
- Or just tell your agent to use
submit_feedback— it knows what to do.
Built by Colin Rooney. Originally derived from Reactive, built at OSLabs with Micah Ziegler and Susana Lam. Named after the Greek word for tree and the branching dendrites of neurons.