Dendro

Sieh dir die Sternenkonstellation deiner React-App an.

Dendro verleiht deinem KI-Assistenten ein tiefes Verständnis deiner React- und React-Native-Codebasis — Komponentenbäume, Komplexitäts-Scores, Navigationskarten, Datenfluss und eine interaktive visuelle Leinwand. 36 MCP-Tools, keinerlei Konfiguration deinerseits.

Erste Schritte

1. Installiere Dendro React — führe ext install RooneyTech.dendro-react in VS Code aus oder installiere es über den Marketplace

2. Öffne dein React- oder React-Native-Projekt in Claude Code

3. Füge dieses ein:

Set up Dendro React for this project. Die Erweiterung ist bereits in VS Code installiert. Führe diese Schritte in dieser Reihenfolge aus:

1. Finde den MCP-Server-Pfad: ls ~/.vscode/extensions/rooneytech.dendro-react-*/dist/mcp-server.js

2. Finde den absoluten Node.js-Pfad: which node

3. Erstelle .mcp.json im Projektstamm mit dem absoluten Node.js-Pfad als "command" und dem MCP-Server-Pfad als erstem Argument.

4. Füge einen Dendro-Abschnitt zu CLAUDE.md hinzu (erstelle ihn bei Bedarf) mit: dem Pfad der Einstiegsdatei, get_usage_guide als erstem Aufruf und einem Hinweis, die eldongn-Befehle nacheinander auszuführen.

5. Verifiziere das durch den Aufruf von get_usage_guide.

Das war’s. Dein Agent erledigt den Rest.

Related MCP server: Synapse

Zum Ausprobieren

Sag „Dendro“ in deinen Prompts — etwa so: „Use Dendro, um mir zu zeigen, wie diese App aufgebaut ist.“ Es nutzt dann den Visualizer und tiefere Analysen, statt nur Dateien zu lesen.

• „Nutze Dendro, um mir einen Überblick über die Architektur dieses Projekts zu geben.“

• „Nutze Dendro, um zu prüfen, wie gesund diese Codebasis ist.“

• „Zeig mir mit Dendro, wie die Navigation in dieser Anwendung funktioniert.“

• „Nutze Dendro, um den Komponentenbaum zu visualisieren und komplexe Komponenten hervorzuheben.“

• „Wo liegt der State? Nutze Dendro, um den Datenfluss zu verfolgen.“

• „Öffne den Dendro-Visualizer und geh mit mir durch die Anwendung.“

Was es tut

• Komponentenbaum-Analyse — vollständige Hierarchie, Beziehungen und Struktur

• Komplexitäts-Bewertung — jede Komponente mit einer Bewertung von 1–10 und einwandfreien Kandidaten

• Navigations-Mapping — React Navigation, Next.js, React Router, Remix

• Context & Datenfluss — Provider, Consumer, Erkennung von Prop-Drilling

• Health-Audits — Schulnote A–F mit einem umsetzbaren Hinweisen

• Visuelle Leinwand — KI hebt hervor, annotiert und zeichnet Abläufe in einem Live-Dendrogram nach

• Runtime-Inspektion — automatisch in einer laufenden App für Live-State, Props und Hooks (optional)

Preise

Alle 36 Tools sind kostenlos — inklusive Exporte, Snapshots, verifizierte Projektion, Live-Introspektion und Batch-Analyse. Kein Konto, keine Lizenz und kein Code verlässt deinen Rechner.

Konfiguration

Weitere sieht

• Setup-Guide — manuelle Einrichtung, Cursor/Windsurf-Konfiguration, Runtime-Verbindung, Fehlerbehebung.

• Tools-Referenz — alle 36 MCP-Tools mit Beschreibungen.

Feedback

Dendro ist im Early Access. Wenn etwas nicht funktioniert, sich seltsam anfühlt oder du dir andere Funktionen wünschst — ich will davon andere Höre.

• Issues & aber: GitHub Issues

• Abgelegt: colin@rooneytech.com

Erstellt von Colin Rooney. Ursprünglich abgeleitet von Reactive, erstellt bei OSLabs mit Micah Ziegler und Susana Lam. Benannt nach dem griechischen Wort für Baum und den verzweigten Dendriten von Neuronen.