MCP Marketplace
Sign inSign up
Back to Browse

Dendro React MCP Server

by RooneyTech
Developer ToolsUse Caution4.2MCP RegistryLocal
Free

Server data from the Official MCP Registry

React codebase semantics for AI agents, with a VS Code visualizer you both share. Free, local.

About

React codebase semantics for AI agents, with a VS Code visualizer you both share. Free, local.

Security Report

4.2
Use Caution4.2High Risk

Dendro React is a React codebase analysis and visualization tool for AI agents. The MCP server implementation is well-structured with appropriate file system and network permissions matching its purpose. While the minified/bundled npm package makes detailed code inspection challenging, the TypeScript source configuration, dependency management, and documented authentication model (no auth required - runs locally) present no critical security issues. Minor code quality concerns around error handling in the bundled code do not significantly impact the overall security posture. Supply chain analysis found 3 known vulnerabilities in dependencies (0 critical, 2 high severity). Package verification found 1 issue (1 critical, 0 high severity).

4 files analyzed · 6 issues found

Security scores are indicators to help you make informed decisions, not guarantees. Always review permissions before connecting any MCP server.

Permissions Required

This plugin requests these system permissions. Most are normal for its category.

File System Read

Reads files on your machine. Normal for tools that analyze or process local data.

File System Write

Writes or modifies files on your machine. Check that this is expected for the tool.

env_vars

Check that this permission is expected for this type of plugin.

HTTP Network Access

Connects to external APIs or services over the internet.

network_websocket

Check that this permission is expected for this type of plugin.

Unverified package source

We couldn't verify that the installable package matches the reviewed source code. Proceed with caution.

How to Install

Add this to your MCP configuration file:

{
  "mcpServers": {
    "io-github-rooneytech-dendro-react": {
      "args": [
        "-y",
        "dendro-react"
      ],
      "command": "npx"
    }
  }
}

Documentation

View on GitHub

From the project's GitHub README.

Dendro

VS Code Marketplace Installs

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 (leaked subscriptions, derived-state 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

  1. Install Dendro React — run ext install RooneyTech.dendro-react in VS Code, or install from the Marketplace
  2. Open your React or React Native project in Claude Code
  3. Paste this:

Set up Dendro React for this project. The extension is already installed in VS Code. Do these steps in order:

  1. Find the MCP server path: ls ~/.vscode/extensions/rooneytech.dendro-react-*/dist/mcp-server.js
  2. Find the absolute node path: which node
  3. Create .mcp.json in the project root using the absolute node path as "command" and the MCP server path as the first arg
  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
  5. 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.

  • 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 with line-anchored findings and fixes (leaked listeners, fetch races, derived-state 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)

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

SettingDefaultDescription
dendro-react.autoStartRuntimefalseAuto-connect to React Native apps on activation
dendro-react.runtimePlatformautoTarget platform: auto, ios, android, or device
dendro-react.runtimePort8097DevTools WebSocket port
dendro-react.runtimeHostlocalhostWebSocket host (0.0.0.0 for physical devices)
dendro-react.projectorModefalseLarger 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.

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.

Reviews

No reviews yet

Be the first to review this server!

More Developer Tools MCP Servers

Fetch

Free

by Modelcontextprotocol · Developer Tools

Web content fetching and conversion for efficient LLM usage

80.0K
Stars
15
Installs
5.3
Security
No ratings yet
Local

Git

Free

by Modelcontextprotocol · Developer Tools

Read, search, and manipulate Git repositories programmatically

80.0K
Stars
14
Installs
6.5
Security
No ratings yet
Local

Toleno

Free

by Toleno · Developer Tools

Toleno Network MCP Server — Manage your Toleno mining account with Claude AI using natural language.

180
Stars
697
Installs
8.0
Security
4.8
Local

mcp-creator-python

Free

by mcp-marketplace · Developer Tools

Create, build, and publish Python MCP servers to PyPI — conversationally.

-
Stars
114
Installs
10.0
Security
4.7
Local

MCP Marketplace

Free

by mcp-marketplace · Developer Tools

Search and install MCP servers from inside your AI client.

-
Stars
86
Installs
10.0
Security
5.0
Remote

MarkItDown

Free

by Microsoft · Content & Media

Convert files (PDF, Word, Excel, images, audio) to Markdown for LLM consumption

168.6K
Stars
84
Installs
4.2
Security
5.0
Local