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を作成し、"command"にはnodeの絶対パス、最初の引数にはMCPサーバーのパスを指定する

4. CLAUDE.md（なければ作成）にDendroセクションを追加する — エントリファイルのパス、最初の呼び出しとして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

• Contextとデータフロー — provider、consumer、prop drillingの検出

• 健全性監査 — A〜Fの評価で、対応可能な問題を提示

• ビジュアルキャンバス — ライブなデンドログラム上で、AIがハイライト、注釈、フローの追跡を行います

• ランタイム検査 — 実行中のアプリに接続して、ライブなstate、props、hooksを確認する（任意）

料金

36のツールはすべて無料です — エクスポート、スナップショット、検証済みプロジェクション、ライブ内観察、バッチ分析も含まれます。アカウントもライセンスキーも不要で、コードがあなたのマシンの外に出ることはありません。

設定

さらに学ぶ

• セットアップガイド — 手動セットアップ、Cursor/Windsurf設定、ラムタイム接続、トラブルシューティング

• ツールリファレンス — 36のMCPツールとその説明

フィードバック

Dendroはアーリーアクスイベントです。うまく動かない、わかりにくい、あるいは別の動作にしてほしい場合は、ぜひお聞かせください。

• 問題やアイデア： GitHubのIssues

• メール： colin@rooneytech.com

Colin Rooneyによって開発されました。もともとは Reactive から派生し、OSLabsでMichead Ziegler、Susana Lamとともに構築されました。「木」を意味するギリシア語と、ニューロンの枝分かれしたデンドライトにちなんで名付けられました。