Tree-Hugger-JS MCP Server

Tree-Hugger-JS MCP Server

Provides AI agents with powerful JavaScript/TypeScript code analysis and transformation capabilities using the tree-hugger-js library.

Category
Visit Server

Tools

parse_code

Parse JavaScript/TypeScript code from file or string and load it into the AST state. Must be called before using other analysis tools. Examples: • Parse a React component: parse_code('./src/UserProfile.jsx') • Parse code string: parse_code('function hello() { return "world"; }') • Parse with explicit language: parse_code('./config.js', language='javascript') • Analyze legacy code: parse_code('./old-script.js') then use other tools to understand structure • Code review prep: parse_code('./feature.ts') then get_functions() to review all functions

find_pattern

Find first node matching the specified pattern using tree-hugger-js intuitive syntax. Use for targeted searches when you need one specific match. Examples: • Find main function: find_pattern('function[name="main"]') • Find React component: find_pattern('function[name="UserProfile"]') • Find async functions: find_pattern('function[async]') • Find specific class: find_pattern('class[name="UserManager"]') • Find error handling: find_pattern('call[text*="catch"]') • Find JSX with props: find_pattern('jsx:has(jsx-attribute[name="className"])') • Debug specific calls: find_pattern('call[text*="console.log"]')

find_all_pattern

Find all nodes matching the specified pattern. Use for comprehensive analysis when you need all matches. Examples: • Audit all functions: find_all_pattern('function') • Find all TODO comments: find_all_pattern('comment[text*="TODO"]') • Security audit: find_all_pattern('call[text*="eval"]') • Performance review: find_all_pattern('call[text*="console.log"]') to find debug logs • API usage: find_all_pattern('call[text*="fetch"]') to find all API calls • React hooks: find_all_pattern('call[text*="use"]') for hooks usage • Error patterns: find_all_pattern('string[text*="error"]') for error messages • Database queries: find_all_pattern('string[text*="SELECT"]') for SQL • Event handlers: find_all_pattern('function[text*="onClick"]')

get_functions

Get all functions with metadata including name, type, location, and async status. Includes class methods, arrow functions, and declarations. Examples: • Code review: get_functions() to see all functions in a file • Find async operations: get_functions({asyncOnly: true}) • API analysis: get_functions() then look for functions with 'fetch' or 'api' in names • Test coverage: get_functions() to identify functions needing tests • Refactoring prep: get_functions({includeAnonymous: false}) to focus on named functions • Performance audit: get_functions() to find large/complex functions by line count

get_classes

Get all classes with comprehensive method and property analysis. Perfect for OOP code review. Examples: • Architecture review: get_classes() to understand class structure • API design: get_classes() to see public method interfaces • Inheritance analysis: get_classes() to identify class hierarchies • Method-only view: get_classes({includeProperties: false}) to focus on behavior • Property audit: get_classes({includeMethods: false}) to review state management • Testing prep: get_classes() to identify methods needing unit tests

get_imports

Get all import statements with detailed module and specifier information. Essential for dependency analysis. Examples: • Dependency audit: get_imports() to see all external dependencies • Bundle analysis: get_imports() to identify heavy imports • Security audit: get_imports() to check for suspicious packages • TypeScript analysis: get_imports({includeTypeImports: false}) to focus on runtime imports • Refactoring prep: get_imports() to understand module structure before changes • License compliance: get_imports() to generate dependency list

rename_identifier

Intelligently rename all occurrences of an identifier throughout the code. Avoids renaming in strings/comments. Examples: • Refactor function names: rename_identifier('fetchData', 'fetchUserData') • Improve variable names: rename_identifier('data', 'userData') • Update class names: rename_identifier('Manager', 'UserManager') • API consistency: rename_identifier('getUserInfo', 'fetchUserInfo') • Preview first: rename_identifier('oldName', 'newName', {preview: true}) • Legacy code update: rename_identifier('XMLHttpRequest', 'fetch')

remove_unused_imports

Automatically remove unused import statements to clean up code. Safely detects which imports are actually used. Examples: • Bundle size optimization: remove_unused_imports() to reduce bundle size • Code cleanup: remove_unused_imports() after refactoring • Linting compliance: remove_unused_imports() to fix ESLint warnings • Before deployment: remove_unused_imports({preview: true}) to see what will be removed • Legacy cleanup: remove_unused_imports() after removing old code • Development workflow: remove_unused_imports() during feature development

transform_code

Apply multiple transformations in a single operation. Most powerful tool for complex refactoring workflows. Examples: • API refactor: [{type: 'rename', parameters: {oldName: 'getData', newName: 'fetchData'}}, {type: 'removeUnusedImports'}] • Environment update: [{type: 'replaceIn', parameters: {nodeType: 'string', pattern: /localhost/g, replacement: 'api.production.com'}}, {type: 'removeUnusedImports'}] • Add logging: [{type: 'insertAfter', parameters: {pattern: 'function_declaration', text: 'console.log("Function called");'}}, {type: 'removeUnusedImports'}] • Bulk rename: [{type: 'rename', parameters: {oldName: 'user', newName: 'customer'}}, {type: 'rename', parameters: {oldName: 'id', newName: 'customerId'}}] • Legacy migration: [{type: 'replaceIn', parameters: {nodeType: 'call_expression', pattern: /XMLHttpRequest/g, replacement: 'fetch'}}, {type: 'removeUnusedImports'}]

get_node_at_position

Get detailed AST node information at a specific cursor position. Perfect for debugging and precise analysis. Examples: • Debug syntax errors: get_node_at_position(15, 23) to understand what's at error location • Understand code structure: get_node_at_position(line, col) to see AST node type at cursor • Refactoring assistance: get_node_at_position(line, col) to identify exact node before transformation • IDE integration: get_node_at_position(line, col) for hover information • Pattern development: get_node_at_position(line, col) to understand node structure for pattern writing

analyze_scopes

Analyze variable scopes, bindings, and potential naming conflicts. Advanced tool for code quality analysis. Examples: • Variable shadowing detection: analyze_scopes() to find naming conflicts • Closure analysis: analyze_scopes() to understand variable capture • Refactoring safety: analyze_scopes() before variable renames • Code review: analyze_scopes() to identify scope-related issues • Learning aid: analyze_scopes({includeBuiltins: true}) to see all identifiers • Dead code detection: analyze_scopes() to find unused variables

insert_code

Insert code before or after nodes with smart formatting. Professional-quality code insertion with proper indentation. Examples: • Add logging: insert_code('function_declaration', 'console.log("Function started");', 'after') • Add validation: insert_code('method_definition[name="save"]', 'if (!this.isValid()) return;', 'after') • Add comments: insert_code('class_declaration', '// Main user management class', 'before') • Add error handling: insert_code('function[async]', 'try {', 'after') + insert_code('function[async]', '} catch(e) { console.error(e); }', 'after') • Add metrics: insert_code('function[name*="api"]', 'performance.mark("api-start");', 'after') • Debug mode: insert_code('call[text*="fetch"]', 'console.log("API call:", url);', 'before')

README

Tree-Hugger-JS MCP Server

An MCP (Model Context Protocol) server that provides AI agents with powerful JavaScript/TypeScript code analysis and transformation capabilities using the tree-hugger-js library.

Features

🔍 Code Analysis

  • Parse JavaScript, TypeScript, JSX, and TSX files or code strings
  • Find patterns using intuitive syntax (e.g., function, class[name="MyClass"])
  • Extract functions, classes, imports with detailed metadata
  • Navigate AST nodes and analyze code structure
  • Get nodes at specific positions

🔧 Code Transformation

  • Rename identifiers throughout code
  • Remove unused imports
  • Chain multiple transformations
  • Insert code before/after patterns
  • Preview transformations before applying

📊 Code Intelligence

  • Scope analysis and variable binding
  • Pattern matching with CSS-like selectors
  • Support for async functions, classes, methods
  • TypeScript type import handling

Installation & Usage

🚀 Quick Start (Recommended)

Try immediately with npx - no installation required:

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

📦 Global Installation

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

# Then run anywhere
tree-hugger-js-mcp

🔧 Development Setup

# 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 Client Configuration

Using with Claude Code

Add to your MCP client configuration:

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

Alternative Configurations

{
  "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"]
    }
  }
}

Tools

Code Analysis Tools

parse_code

Parse JavaScript/TypeScript code from file or string.

Parameters:

  • source (string): File path or code string to parse
  • isFilePath (boolean, optional): Whether source is a file path (auto-detected if not provided)
  • language (string, optional): Language to use (javascript, typescript, jsx, tsx)

Example:

// 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

Find first node matching a pattern.

Parameters:

  • pattern (string): Pattern to match using tree-hugger-js syntax

Examples:

// 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

Find all nodes matching a pattern.

Parameters:

  • pattern (string): Pattern to match
  • limit (number, optional): Maximum matches to return

get_functions

Get all functions with details.

Parameters:

  • includeAnonymous (boolean, optional): Include anonymous functions (default: true)
  • asyncOnly (boolean, optional): Only return async functions (default: false)

get_classes

Get all classes with methods and properties.

Parameters:

  • includeProperties (boolean, optional): Include class properties (default: true)
  • includeMethods (boolean, optional): Include class methods (default: true)

get_imports

Get all import statements.

Parameters:

  • includeTypeImports (boolean, optional): Include TypeScript type-only imports (default: true)

Code Transformation Tools

rename_identifier

Rename all occurrences of an identifier.

Parameters:

  • oldName (string): Current identifier name
  • newName (string): New identifier name
  • preview (boolean, optional): Return preview only (default: false)

Example:

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

remove_unused_imports

Remove unused import statements.

Parameters:

  • preview (boolean, optional): Return preview only (default: false)

transform_code

Apply multiple transformations in sequence.

Parameters:

  • operations (array): Array of transformation operations
  • preview (boolean, optional): Return preview only (default: false)

Example:

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

Insert code before or after nodes matching a pattern.

Parameters:

  • pattern (string): Pattern to match for insertion points
  • code (string): Code to insert
  • position (string): "before" or "after"
  • preview (boolean, optional): Return preview only (default: false)

Navigation Tools

get_node_at_position

Get AST node at specific line and column.

Parameters:

  • line (number): Line number (1-based)
  • column (number): Column number (0-based)

analyze_scopes

Analyze variable scopes and bindings.

Parameters:

  • includeBuiltins (boolean, optional): Include built-in identifiers (default: false)

Resources

The server provides three resources for accessing internal state:

ast://current

Current parsed AST state with metadata and statistics.

ast://analysis

Results from the most recent code analysis (functions, classes, imports).

ast://transforms

History of code transformations and available operations.

Pattern Syntax

Tree-hugger-js uses intuitive patterns instead of verbose tree-sitter node types:

Basic Patterns

  • function - Any function (declaration, expression, arrow, method)
  • class - Class declarations and expressions
  • string - String and template literals
  • import/export - Import/export statements
  • call - Function calls
  • loop - For, while, do-while loops

Attribute Selectors

  • [name="foo"] - Nodes with specific name
  • [async] - Async functions
  • [text*="test"] - Nodes containing text

CSS-like Selectors

  • class method - Methods inside classes
  • function > return - Return statements directly in functions
  • :has() and :not() pseudo-selectors

Examples

Basic Code Analysis

// 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" });

Code Refactoring

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

Pattern Matching

// 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'])" 
});

Development

# Install dependencies
npm install

# Build the project
npm run build

# Watch mode for development
npm run dev

# Test with MCP inspector
npm run inspector

Error Handling

The server provides detailed error messages and suggestions:

  • File not found errors for invalid file paths
  • Parse errors with helpful context
  • Pattern matching errors with suggestions
  • Transformation errors with rollback capability

License

MIT

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured