Tree Hugger Js MCP

🚀 Tree-Hugger-JS MCP Server

tree-hugger-jsライブラリを使用して、AIエージェントに強力なJavaScript/TypeScriptコード解析と変換機能を提供するMCP（Model Context Protocol）サーバーです。

✨ 主な機能

🔍 コード解析

• JavaScript、TypeScript、JSX、およびTSXファイルまたはコード文字列の解析
• 直感的な構文（例：function、class[name="MyClass"]）を使用したパターン検索
• 詳細なメタデータを含む関数、クラス、インポートの抽出
• ASTノードのナビゲーションとコード構造の解析
• 特定の位置のノードの取得

🔧 コード変換

• コード全体で識別子の名前を変更
• 未使用のインポートの削除
• 複数の変換をチェーンする
• パターンの前/後にコードを挿入
• 変換を適用する前にプレビュー

📊 コードインテリジェンス

• スコープ解析と変数バインディング
• CSSライクなセレクターによるパターンマッチング
• 非同期関数、クラス、メソッドのサポート
• TypeScriptの型インポートの処理

📦 インストール

🚀 クイックスタート（おすすめ）

npxを使用してすぐに試すことができます。インストールは不要です。

# Claude Codeまたは任意のMCPクライアントで使用
npx tree-hugger-js-mcp

📦 グローバルインストール

# 繰り返し使用するためにグローバルにインストール
npm install -g tree-hugger-js-mcp

# その後、どこからでも実行できます
tree-hugger-js-mcp

🔧 開発環境のセットアップ

# ソースからクローンしてビルド
git clone https://github.com/qckfx/tree-hugger-js-mcp.git
cd tree-hugger-js-mcp
npm install
npm run build
npm start

MCPクライアントの設定

Claude Codeでの使用

MCPクライアントの設定に追加します。

{
  "mcpServers": {
    "tree-hugger-js": {
      "command": "npx",
      "args": ["tree-hugger-js-mcp"]
    }
  }
}

その他の設定

{
  "mcpServers": {
    "tree-hugger-js": {
      // グローバルにインストールされている場合
      "command": "tree-hugger-js-mcp"
      
      // またはソースからビルドされた場合
      "command": "node",
      "args": ["/path/to/tree-hugger-js-mcp/build/index.js"]
    }
  }
}

💻 使用例

基本的な使用法

コード解析ツール

parse_code

ファイルまたは文字列からJavaScript/TypeScriptコードを解析します。

パラメーター:

• source (string): 解析するファイルパスまたはコード文字列
• isFilePath (boolean, オプション): ソースがファイルパスかどうか（指定されていない場合は自動検出）
• language (string, オプション): 使用する言語（javascript、typescript、jsx、tsx）

例:

// ファイルを解析
await callTool("parse_code", { 
  source: "./src/app.js",
  isFilePath: true 
});

// コード文字列を解析
await callTool("parse_code", { 
  source: "function hello() { console.log('world'); }" 
});

find_pattern

パターンに一致する最初のノードを検索します。

パラメーター:

• pattern (string): tree-hugger-js構文を使用して一致させるパターン

例:

// 任意の関数を検索
await callTool("find_pattern", { pattern: "function" });

// 非同期関数を検索
await callTool("find_pattern", { pattern: "function[async]" });

// 名前でクラスを検索
await callTool("find_pattern", { pattern: "class[name='MyClass']" });

find_all_pattern

パターンに一致するすべてのノードを検索します。

パラメーター:

• pattern (string): 一致させるパターン
• limit (number, オプション): 返す最大一致数

get_functions

詳細を含むすべての関数を取得します。

パラメーター:

• includeAnonymous (boolean, オプション): 匿名関数を含める（デフォルト: true）
• asyncOnly (boolean, オプション): 非同期関数のみを返す（デフォルト: false）

get_classes

メソッドとプロパティを含むすべてのクラスを取得します。

パラメーター:

• includeProperties (boolean, オプション): クラスプロパティを含める（デフォルト: true）
• includeMethods (boolean, オプション): クラスメソッドを含める（デフォルト: true）

get_imports

すべてのインポート文を取得します。

パラメーター:

• includeTypeImports (boolean, オプション): TypeScriptの型専用インポートを含める（デフォルト: true）

コード変換ツール

rename_identifier

識別子のすべての出現箇所の名前を変更します。

パラメーター:

• oldName (string): 現在の識別子名
• newName (string): 新しい識別子名
• preview (boolean, オプション): プレビューのみを返す（デフォルト: false）

例:

await callTool("rename_identifier", {
  oldName: "fetchData",
  newName: "fetchUserData",
  preview: true
});

remove_unused_imports

未使用のインポート文を削除します。

パラメーター:

• preview (boolean, オプション): プレビューのみを返す（デフォルト: false）

transform_code

複数の変換を順番に適用します。

パラメーター:

• operations (array): 変換操作の配列
• preview (boolean, オプション): プレビューのみを返す（デフォルト: false）

例:

await callTool("transform_code", {
  operations: [
    { type: "rename", parameters: { oldName: "oldFunc", newName: "newFunc" } },
    { type: "removeUnusedImports" },
    { type: "replaceIn", parameters: { nodeType: "string", pattern: /localhost/g, replacement: "api.example.com" } }
  ],
  preview: true
});

insert_code

パターンに一致するノードの前または後にコードを挿入します。

パラメーター:

• pattern (string): 挿入ポイントを一致させるパターン
• code (string): 挿入するコード
• position (string): "before" または "after"
• preview (boolean, オプション): プレビューのみを返す（デフォルト: false）

ナビゲーションツール

get_node_at_position

特定の行と列のASTノードを取得します。

パラメーター:

• line (number): 行番号（1から始まる）
• column (number): 列番号（0から始まる）

analyze_scopes

変数のスコープとバインディングを解析します。

パラメーター:

• includeBuiltins (boolean, オプション): 組み込み識別子を含める（デフォルト: false）

高度な使用法

基本的なコード解析

// Reactコンポーネントを解析して分析
await callTool("parse_code", { source: "./components/UserProfile.jsx" });

// すべての関数を取得
const functions = await callTool("get_functions", { asyncOnly: true });

// JSX要素を検索
const jsxElements = await callTool("find_all_pattern", { pattern: "jsx" });

コードリファクタリング

// 関数の名前を変更し、未使用のインポートを削除
await callTool("transform_code", {
  operations: [
    { type: "rename", parameters: { oldName: "getUserData", newName: "fetchUserProfile" } },
    { type: "removeUnusedImports" }
  ]
});

パターンマッチング

// console.logを呼び出すすべての非同期関数を検索
await callTool("find_all_pattern", { 
  pattern: "function[async]:has(call[text*='console.log'])" 
});

// コンストラクタメソッドを持つクラスを検索
await callTool("find_all_pattern", { 
  pattern: "class:has(method[name='constructor'])" 
});

📚 ドキュメント

リソース

サーバーは内部状態にアクセスするための3つのリソースを提供します。

ast://current

メタデータと統計情報を含む現在の解析されたAST状態。

ast://analysis

最新のコード解析の結果（関数、クラス、インポート）。

ast://transforms

コード変換の履歴と利用可能な操作。

パターン構文

Tree-hugger-jsは、冗長なtree-sitterノードタイプの代わりに直感的なパターンを使用します。

基本パターン

• function - 任意の関数（宣言、式、アロー、メソッド）
• class - クラス宣言と式
• string - 文字列とテンプレートリテラル
• import/export - インポート/エクスポート文
• call - 関数呼び出し
• loop - for、while、do-whileループ

属性セレクター

• [name="foo"] - 特定の名前を持つノード
• [async] - 非同期関数
• [text*="test"] - 特定のテキストを含むノード

CSSライクなセレクター

• class method - クラス内のメソッド
• function > return - 関数内の直接のreturn文
• :has() および :not() 疑似セレクター

🔧 技術詳細

開発

# 依存関係のインストール
npm install

# プロジェクトのビルド
npm run build

# 開発用のウォッチモード
npm run dev

# MCPインスペクターでテスト
npm run inspector

エラー処理

サーバーは詳細なエラーメッセージと提案を提供します。

• 無効なファイルパスに対するファイルが見つからないエラー
• 役に立つコンテキストを含む解析エラー
• 提案を含むパターンマッチングエラー
• ロールバック機能を持つ変換エラー

📄 ライセンス

MIT