Dendro React

Dendro

你的 Agent 正在编辑从未读过的代码。

它刚扫描了 40 个文件，来回答“如果我改了这个，哪些地方会出问题？” 其实它只要问一句就行。

Dendro 会为你的 React 或 React Native 代码库构建一个模型，并以两种方式呈现： 你的 Agent 可以查询的语义信息，以及你们都可以指着讨论的地图。

为你的 Agent 提供语义信息

MCP 工具会用 React 术语回答 React 问题：编辑前的组件契约（属性、状态、上下文、影响范围）、重新渲染风险及其原因、Effect 的整洁性（清理风险、仅调用 setter 的 Effect、exhaustive-deps 无法发现的请求竞态）、导航图（Next.js、React Navigation、Remix、Expo Router）、运行中应用的实时运行状态，以及一次调用即可获取整个代码库的概览（约 300 个 token）。

符号服务会告诉你的 Agent 符号在哪里。 Dendro 会告诉它哪些内容会重新渲染，以及原因。

为你提供可视化工具

你的应用星图：VS Code 中实时呈现的树状图，源自 Reactive。你的 Agent 可以操控它——高亮正在讨论的内容、添加注释、追踪属性，并逐步带你了解架构，让你点击“下一步”/“上一步”。你和 Agent 可以查看同一张地图。

开始使用

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（Node 22.12+ 或 20.x 系列中的 Node 20.19+）。
3. 在 .mcp.json 中合并一个 dendro-react 服务：将 node 的绝对路径设为 "command"，将选定的服务路径设为第一个参数，并将 DENDRO_WORKSPACE_ROOT 设为此项目的绝对路径。保留其他服务。
4. 重启 MCP 客户端，然后调用 get_usage_guide 并报告其运行版本。如果工具不可用，请停止并说明还需要完成哪些设置。
5. 获取我即将编辑的一个组件的契约。阅读其源代码和一个报告中的导入方；检查属性、状态和使用位置的声明。提出编辑建议前，说明一项具体的变更影响以及任何不一致之处。

第一个有用的结果应当是经过源码核查的回答，说明“有哪些内容依赖我正在更改的组件？”。最终目标是准确解释一项变更的影响，并注明文件引用和范围限制。

如需单独运行分析、设置 Cursor/Windsurf 或排查问题，请参阅设置指南。共享地图需要 VS Code 扩展；静态分析则可仅通过 npm MCP 服务运行。

可以尝试的操作

在提示词中说 “Dendro”——例如“用 Dendro 向我展示这个应用的结构”。它会使用可视化工具和更深入的分析，而不只是读取文件。

• 查看：“打开 Dendro 可视化工具，带我了解这个应用”
• 询问：“用 Dendro 检查这个代码库的健康状况”
• 编辑前：“先获取 CheckoutForm 的组件契约”
• “状态在哪里？用 Dendro 追踪数据流”
• “用 Dendro 向我展示这个应用中的导航如何运作”
• “用 Dendro 解释这个代码库的架构，就当我从未看过它”

功能

• 组件契约 — 在 Agent 修改代码前，通过一次调用查看 props、状态、上下文、影响范围和复杂度
• 健康审计 — A-F 级评分，以及带行号的审查信号（清理风险、可能的 fetch 竞态、仅设置状态的提示性 effect）
• 复杂度评分 — 为每个组件评级，并指出重构候选项
• 导航映射 — React Navigation、Next.js、React Router、Remix、Expo Router
• 上下文与数据流 — 检测提供者、使用者和 props 层层传递
• 可视化画布 — Agent 会在实时树状图中高亮、添加注释并追踪数据流
• 运行时检查 — 连接到正在运行的应用，查看实时状态、props 和 hooks（可选）

修改代码前先检查发现的问题

静态分析会提示需要检查的位置。健康评级仅为启发式指标， 并不代表正确性或性能结论。组件树依据静态导入构建； 动态导入和其他入口可能不会显示。重新渲染风险报告 需要结合记忆化和运行时行为来判断。

应用修复前，请先阅读标记出的源代码。特别要注意，effect 可以 通过隐式方式或可选链返回清理函数；v0.9.0 可能会错误地将这些情况 标记为泄漏。请检查正在运行的服务版本，不要假定更新日志中的修复 已经安装。可视化工具命令已排队，并不意味着请求的节点已显示在屏幕上。

免费且本地运行

所有工具均免费——包括导出、快照、已验证的投影、实时内省 和批量分析。无需账号或许可证密钥，代码也不会离开你的 计算机。唯一例外是 submit_feedback，仅当你明确同意时，它才会向开发者发送反馈。

配置

设置	默认值	描述
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	屏幕共享时使用更大的字体和描边

了解更多

• 设置指南 — 手动设置、Cursor/Windsurf 配置、运行时连接、故障排除
• 工具参考 — 所有 MCP 工具及其说明

反馈

Dendro 目前处于早期体验阶段。如果有功能无法使用、令人困惑，或你希望它能做些不同的事——欢迎告诉我。

• 问题与想法： GitHub Issues
• 电子邮件： [email protected]
• 或者直接告诉你的 Agent 使用 submit_feedback——它知道该怎么做。

---

由 Colin Rooney 开发。最初改编自 Reactive，由 Micah Ziegler 和 Susana Lam 在 OSLabs 开发。名称源自希腊语中的“树”，也呼应了神经元分支状的树突。