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"——比如"用 Dendro 给我展示这个应用的结构"。它会使用可视化器和更深入的分析，而不仅仅是读取文件。

• "用 Dendro 给我一个这个项目架构的概览"

• "用 Dendro 检查这个代码库的健康状况"

• "用 Dendro 给我展示这个应用中的导航是如何工作的"

• "用 Dendro 可视化组件树，并突出显示复杂的组件"

• "状态存储在哪里？用 Dendro 追踪数据流"

• "打开 Dendro 可视化器，带我浏览这个应用"

它能做什么

• 组件树分析 —— 完整的层级、关系和结构

• 复杂度评分 —— 每个组件按 1-10 分评级，并提供重构候选

• 导航映射 —— React Navigation、Next.js、React Router、Remix

• Context 与数据流 —— providers、consumers、prop drilling 检测

• 健康审计 —— A-F 评级，附带可操作的问题

• 可视化画布 —— AI 在实时树状图中突出显示、标注并追踪数据流

• 运行时检查 —— 连接到正在运行的应用，以获取实时 state、props 和 hooks（可选）

定价

全部 36 个工具均免费——包括导出、快照、验证投影、实时内省和批量分析。无需账户、无需许可证密钥，且不会有任何代码离开你的机器。

配置

了解更多

• 设置指南 —— 手动设置、Cursor/Windsurf 配置、运行时连接、故障排查

• 工具参考 —— 全部 36 个 MCP 工具及其说明

反馈

Dendro 正处于早期访问阶段。如果有功能无法正常工作、让你感到困惑，或者你希望它的行为有所不同——我都想听到你的反馈。

• 问题与想法： GitHub Issues

• 邮箱： colin@rooneytech.com

由 Colin Rooney 构建。最初源自 Reactive，由 Micah Ziegler 和 Susana Lam 在 OSLabs 共同构建。其名称取自希腊语中表示"树"的词语，以及神经元的分支状树突。