Dendro React

Dendro

エージェントが一度も読んだことのないコードを編集しています。

「これを変更したら何が壊れる？」に答えるために、ファイルを40個スキャンしました。 たった一つ質問すればよかったのに。

Dendroは、ReactまたはReact Nativeのコードベースを一つのモデルで表現し、 エージェントがクエリできるセマンティクスと、あなたとエージェントが一緒に指し示せるマップの二つの形で表示します。

エージェント向け — セマンティクス

Reactに関する質問にReactの用語で答えるMCPツールです。編集前のコンポーネントの契約 （props、state、contexts、影響範囲）、再レンダーのリスクとその理由、 エフェクトの健全性（クリーンアップのリスク、セッターのみのエフェクト、exhaustive-depsでは 検出できないフェッチ競合）、ナビゲーショングラフ（Next.js、React Navigation、 Remix、Expo Router）、実行中のアプリのリアルタイムなランタイム状態、そして約300トークンの呼び出し一つで得られるリポジトリ全体の概要を提供します。

シンボルサーバーがエージェントに伝えるのは、シンボルの場所です。 Dendroは、何が再レンダーされるのか、そしてその理由を伝えます。

あなた向け — ビジュアライザー

アプリの星座図です。Reactiveを起源とする ライブの樹形図をVS Codeに表示します。エージェントが操作し、話題にしている箇所をハイライトし、注釈を付け、propsをたどり、アーキテクチャを段階的に案内します。あなたは「次へ／戻る」をクリックしながら、エージェントが推論に使うのと同じマップを見られます。

はじめに

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サーバーを追加します。"command"にはnodeの絶対パスを使い、最初の引数には選択したサーバーパスを指定し、DENDRO_WORKSPACE_ROOTにはこのプロジェクトの絶対パスを設定します。他のサーバー設定は保持してください。
4. MCPクライアントを再起動してから、get_usage_guideを呼び出し、実行中のバージョンを報告します。ツールを利用できない場合は、そこで止めて、残っているセットアップ手順を説明してください。
5. これから編集するコンポーネントを一つ選び、その契約を取得します。そのソースと報告されたインポーターを一つ読み、props、state、使用箇所に関する主張を確認します。編集案を出す前に、具体的な変更の影響と、不一致があればそれを説明してください。

最初に役立つ結果は、「変更するコンポーネントに依存しているものは何か？」にソースを確認したうえで答えることです。最終的な目標は、ファイル参照と適用範囲の制限を示しながら、一つの変更の影響を正確に説明することです。

単体での分析、Cursor／Windsurfのセットアップ、またはトラブルシューティングについては、 セットアップガイドを参照してください。共有マップにはVS Code拡張機能が必要です。 静的解析はnpm MCPサーバーだけでも実行できます。

試してみる

プロンプトで**「Dendro」**と言ってみてください。たとえば「Dendroを使って、このアプリの構造を見せて」のように伝えます。ファイルを読むだけでなく、ビジュアライザーとより深い分析を使います。

• 見る：「Dendroビジュアライザーを開いて、アプリを順に説明して」
• 質問する：「Dendroを使って、このコードベースの健全性を確認して」
• 編集する前に：「まずCheckoutFormのコンポーネント契約を取得して」
• 「stateはどこにある？Dendroを使ってデータフローをたどって」
• 「Dendroを使って、このアプリのナビゲーションの仕組みを見せて」
• 「初めて見る人にもわかるように、Dendroを使ってこのリポジトリのアーキテクチャを説明して」

できること

• コンポーネントの契約 — エージェントが編集する前に、props、state、コンテキスト、影響範囲、複雑さを1回の呼び出しで確認できます
• 健全性監査 — A〜Fの評価に加え、行に紐づいたレビューシグナル（クリーンアップのリスク、フェッチ競合の可能性、情報提供のみを行う setter 専用のエフェクト）を確認できます
• 複雑さのスコアリング — すべてのコンポーネントを評価し、リファクタリング候補を提示します
• ナビゲーションのマッピング — React Navigation、Next.js、React Router、Remix、Expo Router
• コンテキストとデータフロー — プロバイダー、コンシューマー、props のバケツリレーを検出します
• ビジュアルキャンバス — ライブの樹状図上で、エージェントがハイライト表示、注釈付け、フローの追跡を行います
• ランタイムの検査 — 実行中のアプリに接続して、ライブの state、props、hooks を確認できます（任意）

コードを変更する前に検出結果を確認してください

静的解析では、確認が必要な箇所を提案します。健全性の評価はヒューリスティックであり、 正確性やパフォーマンスを判定するものではありません。ツリーは静的インポートをたどるため、 遅延インポートやその他のエントリーポイントが含まれない場合があります。再レンダリングのリスクを 判断するには、メモ化やランタイムの動作を踏まえたコンテキストが必要です。

修正を適用する前に、フラグが付いたソースを読んでください。特に、エフェクトのクリーンアップは 暗黙的に、またはオプショナルチェーンを通じて返される場合があります。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]
• または、エージェントに submit_feedback を使うよう伝えてください。使い方はエージェントが把握しています。

---

Colin Rooney が開発しました。もともとは Reactive を基にしており、OSLabs で Micah Ziegler、Susana Lam とともに開発されました。名前は、木を意味するギリシャ語と、ニューロンの枝分かれした樹状突起に由来します。