Dendro

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

구성

더 알아보기

• 설정 가이드 — 수동 설정, Cursor/Windsurf 설정, 런타임 연결, 문제 해결

• 도구 참조 — 36개 MCP 도구 전체 설명

피드백

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

• 이슈 및 아이디어: GitHub Issues

• 이메일: colin@rooneytech.com

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