Tree-Hugger-JS MCP Server

Tree Hugger JS MCP服务器

一个MCP（模型上下文协议）服务器，使用树拥抱js库为AI代理提供强大的JavaScript/TypeScript代码分析和转换功能。

特性

🔍 代码分析

• 解析JavaScript、TypeScript、JSX和TSX文件或代码字符串
• 使用直观语法查找模式（例如。， function, class[name="MyClass"])
• 提取带有详细元数据的函数、类和导入
• 浏览AST节点并分析代码结构
• 在特定位置获取节点

🔧 代码转换

• 在整个代码中重命名标识符
• 删除未使用的导入
• 链式多重转换
• 在模式之前/之后插入代码
• 应用前预览转换

📊 代码智能

• 范围分析和变量绑定
• 使用类似CSS的选择器进行模式匹配
• 支持异步函数、类、方法
• TypeScript类型导入处理

安装与使用

🚀 快速入门（推荐）

立即尝试使用npx-无需安装：

# Use with Claude Code or any MCP client
npx tree-hugger-js-mcp

📦 全球安装

# Install globally for repeated use
npm install -g tree-hugger-js-mcp

# Then run anywhere
tree-hugger-js-mcp

🔧 开发设置

# Clone and build from source
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代码

添加到MCP客户端配置中：

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

替代配置

{
  "mcpServers": {
    "tree-hugger-js": {
      // If installed globally
      "command": "tree-hugger-js-mcp"
      
      // Or if built from source
      "command": "node",
      "args": ["/path/to/tree-hugger-js-mcp/build/index.js"]
    }
  }
}

工具

代码分析工具

parse_code

从文件或字符串中解析JavaScript/TypeScript代码。

参数：

• source （string）：要解析的文件路径或代码字符串
• isFilePath （布尔值，可选）：源是否为文件路径（如果未提供，则自动检测）
• language （字符串，可选）：要使用的语言（javascript、typescript、jsx、tsx）

例子：

// Parse a file
await callTool("parse_code", { 
  source: "./src/app.js",
  isFilePath: true 
});

// Parse code string
await callTool("parse_code", { 
  source: "function hello() { console.log('world'); }" 
});

find_pattern

查找与模式匹配的第一个节点。

参数：

• pattern （string）：使用tree hugger js语法匹配的模式

示例：

// Find any function
await callTool("find_pattern", { pattern: "function" });

// Find async functions
await callTool("find_pattern", { pattern: "function[async]" });

// Find class by name
await callTool("find_pattern", { pattern: "class[name='MyClass']" });

find_all_pattern

查找与模式匹配的所有节点。

参数：

• pattern （string）：要匹配的模式
• limit （数字，可选）：返回的最大匹配项数

get_functions

获取所有功能的详细信息。

参数：

• includeAnonymous （布尔值，可选）：包含匿名函数（默认值：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 （布尔值，可选）：仅返回预览（默认值：false）

例子：

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

remove_unused_imports

删除未使用的导入语句。

参数：

• preview （布尔值，可选）：仅返回预览（默认值：false）

transform_code

按顺序应用多个转换。

参数：

• operations （array）：转换操作数组
• preview （布尔值，可选）：仅返回预览（默认值：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）：“之前”或“之后”
• preview （布尔值，可选）：仅返回预览（默认值：false）

导航工具

get_node_at_position

在特定行和列处获取AST节点。

参数：

• line （number）：行号（从1开始）
• column （number）：列号（从0开始）

analyze_scopes

分析变量作用域和绑定。

参数：

• includeBuiltins （布尔值，可选）：包括内置标识符（默认值：false）

资源

服务器提供三种资源用于访问内部状态：

ast://current

当前解析的AST状态，包括元数据和统计信息。

ast://analysis

最新代码分析的结果（函数、类、导入）。

ast://transforms

代码转换和可用操作的历史。

模式语法

Tree hugger js使用直观的模式，而不是冗长的树形节点类型：

基本模式

• function -任何函数（声明、表达式、箭头、方法）
• class -类声明和表达式
• string -字符串和模板文字
• import/export -进出口报表
• call -函数调用
• loop -For、while、do-while循环

属性选择器

• [name="foo"] -具有特定名称的节点
• [async] -异步函数
• [text*="test"] -包含文本的节点

类似CSS的选择器

• class method -类内的方法
• function > return -直接在函数中返回语句
• :has() 和 :not() 伪选择器

例子

基本代码分析

// Parse and analyze a React component
await callTool("parse_code", { source: "./components/UserProfile.jsx" });

// Get all functions
const functions = await callTool("get_functions", { asyncOnly: true });

// Find JSX elements
const jsxElements = await callTool("find_all_pattern", { pattern: "jsx" });

代码重构

// Rename a function and remove unused imports
await callTool("transform_code", {
  operations: [
    { type: "rename", parameters: { oldName: "getUserData", newName: "fetchUserProfile" } },
    { type: "removeUnusedImports" }
  ]
});

模式匹配

// Find all async functions that call console.log
await callTool("find_all_pattern", { 
  pattern: "function[async]:has(call[text*='console.log'])" 
});

// Find classes with constructor methods
await callTool("find_all_pattern", { 
  pattern: "class:has(method[name='constructor'])" 
});

发展

# Install dependencies
npm install

# Build the project
npm run build

# Watch mode for development
npm run dev

# Test with MCP inspector
npm run inspector

错误处理

服务器提供详细的错误消息和建议：

• 找不到文件错误，文件路径无效
• 使用有用的上下文分析错误
• 模式匹配错误及建议
• 具有回滚功能的转换错误

许可证

麻省理工学院