Dendro
See your React app's nervous system.
Dendro gives your AI assistant deep understanding of your React and React Native codebase — component trees, complexity scores, navigation maps, data flow, and an interactive visual canvas. 56 MCP tools, zero configuration on your part.
Getting Started
- Install Dendro React from the VS Code 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
- Find the absolute node path:
which node
- Create
.mcp.json in the project root using the absolute node path as "command" and the MCP server path as the first arg
- Add a Dendro section to
CLAUDE.md (create it if needed) with: the entry file path, get_usage_guide as first call, and a note to run viz commands sequentially
- Verify by calling
get_usage_guide
That's it. Your agent handles the rest.
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.
- "Use Dendro to give me an overview of this project's architecture"
- "Use Dendro to check how healthy this codebase is"
- "Show me how navigation works in this app with Dendro"
- "Use Dendro to visualize the component tree and highlight complex components"
- "Where does state live? Use Dendro to trace the data flow"
- "Open the Dendro visualizer and walk me through the app"
What It Does
- Component tree analysis — full hierarchy, relationships, and structure
- Complexity scoring — every component graded 1-10 with refactoring candidates
- Navigation mapping — React Navigation, Next.js, React Router, Remix
- Context & data flow — providers, consumers, prop drilling detection
- Health audits — A-F grade with actionable issues
- Visual canvas — AI highlights, annotates, and traces flows in a live dendrogram
- Runtime inspection — connect to a running app for live state, props, and hooks (optional)
Pro Features
36 tools are free. Pro adds 20 more for $9/month — exports, snapshots, verified projection, live introspection, and batch analysis.
Upgrade: Cmd+Shift+P → "Dendro: Upgrade to Pro"
Learn More
- Setup Guide — manual setup, Cursor/Windsurf config, runtime connection, troubleshooting
- Tools Reference — all 56 MCP tools 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.
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.
