Skip to main content
Glama
Sign In
deenesjakoruzh
RooneyTech

Dendro

by RooneyTech
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

Dendro

VS Code Marketplace Installs

React 앱의 별자리를 확인해 보세요.

Dendro는 AI 어시스턴트가 React 및 React Native 코드베이스를 깊이 이해하도록 돕습니다 — 컴포넌트 트리, 복잡도 점수, 내비게이션 맵, 데이터 흐름, 그리고 인터랙티브한 시각적 캔버스까지. 36개의 MCP 도구, 설정은 전혀 필요 없습니다.

시작하기

  1. Dendro React를 설치합니다 — VS Code에서 ext install RooneyTech.dendro-react를 실행하거나 Marketplace에서 설치합니다.

  2. Claude Code에서 React 또는 React Native 프로젝트를 엽니다.

  3. 다음을 붙여 넣습니다:

이 프로젝트에 Dendro React를 설정해 줘. 확장 기능은 이미 VS Code에 설치되어 있어. 다음 단계를 차례대로 실행해:

  1. MCP 서버 경로를 찾아: ls ~/.vscode/extensions/rooneytech.dendro-react-*/dist/mcp-server.js

  2. node의 절대 경로를 찾아: which node

  3. 프로젝트 루트에 .mcp.json을 만들고, 절대 node 경로를 "command"로, MCP 서버 경로를 첫 번째 인수로 사용해

  4. CLAUDE.md(없으면 생성)에 Dendro 섹션을 추가해: 진입 파일 경로, 첫 번째 호출로 get_usage_guide, 그리고 시각화 명령을 순차적으로 실행하라는 메모를 포함해

  5. get_usage_guide를 호출해 확인해

이게 전부입니다. 나머지는 에이전트가 처리합니다.

Related MCP server: Synapse

시도해 볼 것

프롬프트에 **"Dendro"**라고 말해 보세요 — "Use Dendro to show me how this app is structured."처럼요. 그냥 파일을 읽는 대신 시각화 도구와 더 깊은 분석을 사용합니다.

  • "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"

무엇을 하는 도구인가요?

  • 컴포넌트 트리 분석 — 전체 계층 구조, 관계, 구조

  • 복잡도 점수화 — 모든 컴포넌트를 1~10점으로 평가하고 리팩터링 후보 제시

  • 내비게이션 매핑 — React Navigation, Next.js, React Router, Remix

  • Context 및 데이터 흐름 — provider, consumer, prop drilling 감지

  • 건강도 감사 — 실행 가능한 이슈와 함께 A-F 등급 제공

  • 시각적 캔버스 — AI가 라이브 덴드로그램에서 흐름을 강조하고, 주석을 달고, 추적

  • 런타임 검사 — 실행 중인 앱에 연결해 실시간 state, props, hooks를 확인(선택 사항)

요금

36개 도구는 모두 무료입니다 — 내보내기, 스냅샷, 검증된 프로젝션, 실시간 인트로스펙션, 일괄 분석까지 포함됩니다. 계정, 라이선스 키가 필요 없으며 코드가 여러분의 머신을 떠나지 않습니다.

구성

Setting

Default

Description

dendro-react.autoStartRuntime

false

활성화 시 React Native 앱에 자동 연결

dendro-react.runtimePlatform

auto

대상 플랫폼: auto, ios, android 또는 device

dendro-react.runtimePort

8097

DevTools WebSocket 포트

dendro-react.runtimeHost

localhost

WebSocket 호스트 (0.0.0.0은 실기기용)

dendro-react.projectorMode

false

화면 공유 시 더 큰 글꼴/선 두께 사용

더 알아보기

피드백

Dendro는 얼리 액세스 중입니다. 무언가 작동하지 않거나, 혼란스럽거나, 다르게 동작했으면 하는 것이 있다면 — 듣고 싶습니다.

Colin Rooney이 만들었습니다. 원래는 OSLabs에서 Micah Ziegler, Susana Lam과 함께 만든 Reactive에서 파생되었습니다. 나무를 뜻하는 그리스어와 뉴런의 가지처럼 갈라진 수상돌기에서 이름을 따왔습니다.

This server cannot be deployed

Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

Maintenance

ActivityMaintained
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers

  • arch-viewer

    axumquant
    A
    license
    Not graded
    quality
    D
    maintenance
    Provides AI-powered architecture analysis and visualization of codebases, exposing 17 MCP tools for querying components, dependencies, and generating interactive diagrams.
    294 npm
    5
    MIT

  • Synapse

    amitsingh2003
    F
    license
    Not graded
    quality
    D
    maintenance
    Provides structural code intelligence via 26 MCP tools, enabling AI assistants to query code symbols, dependencies, and call graphs accurately without file-pasting.
    -

  • CodeIntel MCP Server

    SecondLifes
    A
    license
    Not graded
    quality
    C
    maintenance
    Enables AI agents to perform hybrid code search, get explanations, analyze relations and impacts, retrieve context packs, and generate documentation across ~45 languages via 17 MCP tools, all powered by a local vector database and LLM.
    2
    Apache 2.0

  • weavatrix-js

    Weavatrix
    A
    license
    Not graded
    quality
    B
    maintenance
    Local repository intelligence MCP server that builds a reusable graph of code structure for AI coding agents, providing 34 network-free tools for understanding, searching, and analyzing repositories without data leaving the machine.
    76 npm
    MIT