Dendro

Взгляните на созвездие вашего React-приложения.

Dendro даёт вашему ИИ-ассистенту глубокое понимание вашей кодовой базы на React и React Native — деревья компонентов, оценки сложности, карты навигации, потоки данных и интерактивный визуальный холст. 36 инструментов MCP — и ноль настроек с вашей стороны.

Начало работы

1. Установите Dendro React — выполните ext install RooneyTech.dendro-react в VS Code или установите с Marketplace

2. Откройте ваш проект на React или React Native в Claude Code

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. Добавьте раздел Dendro в CLAUDE.md (создайте его при необходимости), включив: путь к входному файлу, get_usage_guide в качестве первого вызова и примечание о том, что команды визуализации (viz) нужно выполнять последовательно

5. Проверьте, вызвав get_usage_guide

Вот и всё. Остальное ваш агент сделает сам.

Related MCP server: Synapse

Что попробовать

Добавьте «Dendro» в свои промпты — например: «Используй Dendro, чтобы показать, как устроено это приложение». Он задействует визуализатор и более глубокий анализ, а не просто читает файлы.

• «Используйте Dendro, чтобы получить обзор архитектуры этого проекта»

• «Используйте Dendro, чтобы проверить, насколько здорова эта кодовая база»

• «Покажите, как работает навигация в этом приложении, с помощью Dendro»

• «Используйте Dendro, чтобы визуализировать дерево компонентов и подсветить сложные компоненты»

• «Где живёт состояние? Используйте Dendro, чтобы проследить поток данных»

• «Откройте визуализатор Dendro и проведите меня по приложению»

Что он умеет

• Анализ дерева компонентов — полная иерархия, взаимосвязи и структура

• Оценка сложности — каждый компонент оценивается от 1 до 10 с кандидатами на рефакторинг

• Картирование навигации — React Navigation, Next.js, React Router, Remix

• Контекст и поток данных — провайдеры, потребители, обнаружение прокидывания пропсов (prop drilling)

• Аудит здоровья — оценка от A до F с конкретными проблемами для исправления

• Визуальный холст — ИИ подсвечивает, аннотирует и прослеживает потоки в живой дендрограмме

• Инспекция рантайма — подключение к запущенному приложению для просмотра текущего состояния, пропсов и хуков (необязательно)

Цены

Все 36 инструментов бесплатны — включая экспорт, снимки, проверенную проекцию, живую интроспекцию и пакетный анализ. Никакого аккаунта, никакого лицензионного ключа, и код не покидает ваш компьютер.

Настройки

Подробнее

• Руководство по настройке — ручная настройка, конфигурация Cursor/Windsurf, подключение к запущенному приложению, устранение неполадок

• Справочник по инструментам — все 36 MCP-инструментов с описаниями

Обратная связь

Dendro находится в раннем доступе. Если что-то не работает, кажется запутанным или вы хотите, чтобы оно работало как-то иначе, — я хочу об этом услышать.

• Проблемы и идеи: GitHub Issues

• Электронная почта: colin@rooneytech.com

Создано Colin Rooney. Изначально основано на Reactive, созданном в OSLabs вместе с Micah Ziegler и Susana Lam. Название восходит к греческому слову «дерево» и ветвящимся дендритам нейронов.