{
  "markdown": "# Dendro\n\n[![VS Code Marketplace](https://img.shields.io/visual-studio-marketplace/v/RooneyTech.dendro-react?label=VS%20Code%20Marketplace)](https://marketplace.visualstudio.com/items?itemName=RooneyTech.dendro-react)\n[![Installs](https://img.shields.io/visual-studio-marketplace/i/RooneyTech.dendro-react)](https://marketplace.visualstudio.com/items?itemName=RooneyTech.dendro-react)\n\n**Your agent is editing code it's never read.**\n\nIt just scanned forty files to answer \"what breaks if I change this?\"\nIt could have asked one fucking question.\n\nDendro is one model of your React or React Native codebase, rendered twice:\nsemantics your agent can query, and a map you can both point at.\n\n## For your agent — the semantics\n\nMCP tools that answer React questions in React terms: the component's contract\nbefore an edit (props, state, contexts, blast radius), rerender risk with the\nwhy, effect hygiene (leaked subscriptions, derived-state effects, fetch races\nthat `exhaustive-deps` can't see), navigation graphs (Next.js, React Navigation,\nRemix, Expo Router), live runtime state from a running app — and whole-repo\norientation in one ~300-token call.\n\nSymbol servers tell your agent where the symbol is.\nDendro tells it what rerenders, and why.\n\n## For you — the visualizer\n\nYour app's constellation: a live dendrogram in VS Code, descended from\n[Reactive](https://github.com/oslabs-beta/reactive). Your agent drives it —\nhighlights what it's talking about, annotates, traces a prop, walks you through\nthe architecture step by step while you click Next/Back. You watch the same map\nthe agent reasons over.\n\n## Getting Started\n\n1. Install **Dendro React** — run `ext install RooneyTech.dendro-react` in VS Code, or install from the [Marketplace](https://marketplace.visualstudio.com/items?itemName=RooneyTech.dendro-react)\n2. Open your React or React Native project in Claude Code\n3. Paste this:\n\n> Set up Dendro React for this project. The extension is already installed in VS Code. Do these steps in order:\n>\n> 1. Find the MCP server path: `ls ~/.vscode/extensions/rooneytech.dendro-react-*/dist/mcp-server.js`\n> 2. Find the absolute node path: `which node`\n> 3. Create `.mcp.json` in the project root using the absolute node path as `\"command\"` and the MCP server path as the first arg\n> 4. 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\n> 5. Verify by calling `get_usage_guide`\n\nThat's it. Your agent handles the rest.\n\n## Things to Try\n\nSay **\"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.\n\n- **Watch:** \"Open the Dendro visualizer and walk me through the app\"\n- **Ask:** \"Use Dendro to check how healthy this codebase is\"\n- **Before an edit:** \"Get the component contract for CheckoutForm first\"\n- **\"Where does state live? Use Dendro to trace the data flow\"**\n- **\"Show me how navigation works in this app with Dendro\"**\n- **\"Use Dendro to explain this repo's architecture like I've never seen it\"**\n\n## What It Does\n\n- **Component contracts** — props, state, contexts, blast radius, complexity in one call, before your agent edits\n- **Health audits** — A-F grade with line-anchored findings and fixes (leaked listeners, fetch races, derived-state effects)\n- **Complexity scoring** — every component graded, refactoring candidates named\n- **Navigation mapping** — React Navigation, Next.js, React Router, Remix, Expo Router\n- **Context & data flow** — providers, consumers, prop drilling detection\n- **Visual canvas** — the agent highlights, annotates, and traces flows in a live dendrogram\n- **Runtime inspection** — connect to a running app for live state, props, and hooks (optional)\n\n## Free & local\n\nEvery tool is free — exports, snapshots, verified projection, live introspection,\nand batch analysis included. No account, no license key, and no code leaves your\nmachine. The one exception is `submit_feedback`, which sends a debrief to the\nmaker only when you explicitly say yes.\n\n## Configuration\n\n| Setting | Default | Description |\n|---------|---------|-------------|\n| `dendro-react.autoStartRuntime` | `false` | Auto-connect to React Native apps on activation |\n| `dendro-react.runtimePlatform` | `auto` | Target platform: `auto`, `ios`, `android`, or `device` |\n| `dendro-react.runtimePort` | `8097` | DevTools WebSocket port |\n| `dendro-react.runtimeHost` | `localhost` | WebSocket host (`0.0.0.0` for physical devices) |\n| `dendro-react.projectorMode` | `false` | Larger fonts/strokes for screen sharing |\n\n## Learn More\n\n- [Setup Guide](docs/setup-guide.md) — manual setup, Cursor/Windsurf config, runtime connection, troubleshooting\n- [Tools Reference](docs/tools-reference.md) — every MCP tool with descriptions\n\n## Feedback\n\nDendro is in early access. If something doesn't work, feels confusing, or you wish it did something different — I want to hear it.\n\n- **Issues & ideas:** [GitHub Issues](https://github.com/RooneyTech/dendro-react/issues)\n- **Email:** colin@rooneytech.com\n- Or just tell your agent to use `submit_feedback` — it knows what to do.\n\n---\n\n*Built by [Colin Rooney](https://github.com/12mv2). Originally derived from [Reactive](https://github.com/oslabs-beta/reactive), built at OSLabs with Micah Ziegler and Susana Lam. Named after the Greek word for tree and the branching dendrites of neurons.*\n",
  "bytes": 5473,
  "sha": "20a4cde0c42cc18163d91345315b520193b6a9147352248f5a819274d3060378",
  "repo_slug": "rooneytech/dendro-react",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_rooneytech_dendro_react_165d2303/readme"
}