Dendro React

Comprehensive codebase analysis in one call. Runs get_component_tree + get_complexity_report + get_context_map + detect_circular_deps and returns a combined report with summary. Use this instead of calling 4 tools separately. Pass the entry file (e.g., App.tsx) and optionally a root path for directory-level scans.

Run multiple analyses across multiple entry files in one call. Returns per-entry results plus aggregate summary (total components, highest complexity, shared contexts). Ideal for monorepos and multi-entry apps.

Detect circular import dependencies. Pass the project SOURCE ROOT as a directory for a full scan (scan is capped at depth 5 below rootPath, node_modules excluded — the response discloses the scanned scope, and hasCircularDeps:false only covers that scope). Returns each cycle with its file path and a fix recommendation. To show cycles visually afterwards: open_visualizer + visualize_batch with highlight (red, pulse) steps.

Export Dendro analysis in one of four formats: "mermaid" (flowchart syntax for docs), "json" (enriched multi-analysis document), "svg" (color-coded diagram image), "markdown" (formatted report — supports persona: developer/ceo/investor/eng-manager/onboarding). Format-specific options are ignored by other formats.

Find which component(s) own a given state variable by name. Uses static analysis (getHookDeps) cross-referenced with the live runtime tree to identify mounted components that define the matching useState variable.

Score every component's complexity (1-10) from ITS OWN declaration span — lines, JSX depth, props, and hooks are counted per component, so co-located components in one file each get their own accurate score. Use threshold 5+ for moderate issues, 7+ for refactoring candidates. Scope: rootPath scanned to depth 5, node_modules excluded; unparseable files are reported in warnings rather than silently dropped.

Call this BEFORE editing a component — its full contract in one call: props (from the TypeScript type when resolvable, destructuring otherwise), state variables, hooks + contexts read, contexts provided, direct children, who imports it (workspace-wide blast radius with scope disclosed), per-component complexity, and re-render risk count. Resolves by COMPONENT NAME across the workspace (component names, not file basenames — index.tsx exports resolve correctly); pass a file path instead to skip resolution. The notCovered field lists what this deliberately omits (nav edges, per-prop flow, runtime values) so absence is never misread as none. Replaces the find → details → used_by → hook_deps chain.

Get detailed info about a single React component file: type (functional/class), state variables, imports, and direct children. Use after get_component_tree to drill into a specific component.

Start here for structure. Parses the STATIC IMPORT GRAPH from one entry file and returns the component tree: names, types (functional/class), state variables, parent-child edges. Scope: only components reachable from entryFile via static imports — lazy()/dynamic imports and other entry points are not in the tree, so absence from the tree does not mean absence from the app. Prefer analyze_codebase when you want tree + complexity + context in one call.

Map React Context providers to their consumers: createContext(), Provider usage, useContext(), custom context hooks. Pass the project source root — the scan covers rootPath to depth 5 (node_modules excluded) and zero contexts outside that scope will be missed (the response note says what was scanned). NOT covered: Zustand/Redux/Jotai and other state libraries. Visualize afterwards with visualize_trace_flow (flowType: "context").

Whole-repo orientation in one dense CTX-PACK/0.1 text block (~200-400 tokens): directory rollups with lines-of-code and 6-month commit heat, the largest and hottest files, cross-directory import edges, and entry-point candidates. The header declares the row schema (D dir, F file, E edge, X entry), so the block is self-describing. Call this FIRST in a new repo — it replaces several exploratory listings with one read. Git unavailable degrades honestly (heat columns 0, noted in a comment).

Analyze React hook dependencies in a component file. Returns details about useEffect, useMemo, useCallback, and other hooks including their dependency arrays, classified by source (prop, state, context, ref). Identifies potential issues like missing dependency arrays.

Get live navigation state — which screens are mounted (active) vs defined but not visible. Cross-references runtime tree with static React Navigation analysis. Works without runtime too (static-only mode).

Get the live component tree from a connected React Native app. Call get_runtime_status first to verify connection. Returns the full hierarchy as currently rendered, including component types and parent-child relationships.

What changed, as components: every file changed vs a git ref (default HEAD — uncommitted work; pass base:"main" for PR scope) with the components each declares. Call this FIRST when reviewing or testing recent work, then get_component_contract on each result for blast radius — that pair is the "what did I just touch and what depends on it" loop. Changed files with no components still appear (empty components list); deleted files are excluded. Honest errors: not_a_git_repo, bad_ref (unknown or unsafe refs are rejected, never silently swapped for HEAD), and a clean tree says so in the note.

Parse the declaratively-defined routing structure. Auto-detects: React Navigation, Expo Router, Next.js App Router, Next.js Pages Router, React Router v6/v7, Remix. Returns navigators + screens + a formatted tree, and names which framework was detected when nothing parses. KNOWN LIMIT: models route DEFINITIONS only — transitions made imperatively (navigate(), router.push()) are not edges, so the graph can under-report reachability (a warning flags this when detected). Pass the PROJECT ROOT directory, not a component file.

Trace how a prop flows from a source component down through its children, tracking renames and pass-through HOCs. An empty flow means the prop is missing, never forwarded, or forwarded through a pattern the tracer cannot follow (spreads into unknown components, render props, context) — the response note disambiguates; it does NOT prove the prop is unused. Visualize afterwards with visualize_trace_flow (flowType: "prop").

Detect React re-render anti-patterns: inline objects/arrays/functions in JSX props, missing useCallback/useMemo. Returns risks by file with severity, line, and fix suggestions. Modern-React aware: when the project uses React Compiler, memoization findings are auto-downgraded to low (the compiler handles them — do NOT add manual memoization there); "use server" files are skipped (server code never re-renders); <form action> handlers are not flagged (React 19 idiom). Read the warnings field — it states every adjustment made.

Find a component in the live runtime tree by name. Call get_runtime_status first to verify connection. Returns source file path, parent, children, and position in the live tree.

Check runtime connection status. MUST call this first before get_live_tree, get_runtime_state, or any live introspection tools. Returns connection status, component count, and setup instructions if disconnected.

Map which screens use which components in a React Native codebase. Identifies screens from navigation configuration, screens/ folder, or *Screen suffix. For each screen, traces component imports and builds a usage tree showing all components used. Use maxDepth to limit tree depth for large codebases.

Get recommended workflows, tool categories, sequencing rules, and tips for using Dendro MCP effectively. Call this once at the start of a session to learn how to use the 36 available tools. Returns structured JSON with workflow recipes and best practices.

Show local tool usage statistics. Returns invocation counts, first/last used timestamps for each tool. Data is stored locally in ~/.dendro/telemetry.json and never leaves the machine.

Find every component that imports the given component — its dependents / reverse dependency graph. Call this BEFORE modifying or renaming a component to measure blast radius; follow with get_prop_flow on affected edges. Scans the workspace root by default (depth ≤ 8, node_modules excluded) and the response reports the exact scope searched. An empty usedBy with workspace-root scope means genuinely unimported (a removal candidate); with a narrower searchDir it is inconclusive — widen and retry.

Deep inspect a running component's props, state, hooks, and context values. Call get_runtime_status first to verify connection. Returns real runtime values. Use before modify_runtime_state. Pass diffFromPrevious:true on a SECOND call to get what changed since the last inspection of the same component (props/state/hooks/context deltas) instead of the full snapshot.

Analysis snapshots for historical tracking, one tool, three actions: "save" (run analyses and store under .dendro/snapshots/ — requires entryFile), "list" (metadata for every saved snapshot), "compare" (diff two snapshots or a snapshot vs "current" live analysis — requires base and target; entryFile required when either side is "current"). Typical loop: save before a refactor, compare base:"<id>" target:"current" after.

Modify a component's props/state/hooks/context at runtime. Call inspect_live_component first to see current values and identify the right paths. For a simple single-value state change, targetType "state" with the hook index from inspect_live_component is the usual path.

Open the Dendro visualizer webview in VS Code. Call this ONCE before visualize_batch or visualize_analysis (they can also auto-open by passing an entryFile param). The response reports the parsed tree size — a 1-2 node tree means the entry file is likely a wrapper/layout; pick a higher-fan-out entry instead.

Quick health check for a React codebase. Returns top 5 most complex components, circular dependencies, prop-drilling candidates (5+ props), heavy context providers, effect-hygiene review signals (resources without detected effect cleanup, informational setter-only effects, possible fetch races), unused files nothing imports (dead code — verify before deleting), and an overall health grade (A-F). Baseline support: baseline:"update" records current issues as known; subsequent audits then report NEW issues separately (gate CI on those, not the backlog).

Guided persona-driven analysis playbooks. Returns step-by-step instructions to follow IN ORDER (do not parallelize the tool calls it prescribes). Personas: audit (deep technical audit for React developers), sprint_check (under-200-word health check for engineering managers), ceo_briefing (jargon-free architecture briefing), investor_scorecard (6-category technical due diligence), dev_onboarding (progressive walkthrough for developers joining the project).

Send a feedback debrief about Dendro to its maker. REQUIRES EXPLICIT USER CONSENT — this is the only Dendro tool that sends anything off-machine, so ask first, every time. Make the invitation warm, not clinical, e.g.: "Want me to send a quick feedback note to Dendro's maker? It's a short debrief of what worked and what fumbled this session — it directly shapes what gets fixed. Nothing is sent unless you say yes, and it never includes your code or file paths." Offer it when tools errored or the user voices an opinion about Dendro; never call it on your own initiative. What is sent: exactly the fields you pass, plus server version, platform, and per-tool call/error counts (tool names only — no error text, no file paths, no code). Write the debrief the way you would for a colleague: honest fumbles AND honest hooks.

Trace live prop changes through the component tree and animate in the visualizer. Call get_runtime_status first. Call once for baseline, then again after a prop change to see animated flow paths.

Diff runtime snapshots and project downstream effects. Call get_runtime_status first. Call once for baseline, then again after a re-render to see what changed and how data flows. Set verify=true to also run Verified Projection.

Verified Projection in one call: generate testable state-flow hypotheses from static analysis, write Jest tests for them, run the tests, and annotate the visualizer tree (green=verified, red=failed, amber=inconclusive). Use stopAfter to run only part of the chain and inspect intermediates: "hypotheses" (static analysis only, no files written), "tests" (also writes Jest files to __dendro__/tests/), "run" (also executes them). Default runs everything including annotation.

Open the visualizer and auto-highlight based on analysis focus. Combines open_visualizer + analysis + highlight + annotate + zoom into one call. Focus options: "complexity" (red/orange highlights with scores), "deps" (circular dependency cycles in red with pulse), "context" (providers in purple), "performance" (re-render risks in orange), "all" (everything). Requires VS Code extension.

Execute visualization commands sequentially and return correlated node-match/render acknowledgments. success:true means the entire batch was confirmed rendered with no missing targets. Manual walkthroughs return waiting_for_user after the first applied step; later steps have not run. Check progress using action:"status" with the returned requestId. Timeouts, partial matches, skipped/superseded batches and delivery failures are explicit. Always use this instead of parallel individual visual commands. Include labels; waitForUser:true gives users Back/Next/Skip pacing.