Tree-Hugger-JS

Analiza y transforma código JavaScript/TypeScript utilizando la librería tree-hugger-js.

GitHub
2
Prueba este MCPPatrocinado

Documentación

Servidor MCP Tree-Hugger-JS

Un servidor MCP (Protocolo de Contexto de Modelo) que proporciona a los agentes de IA potentes capacidades de análisis y transformación de código JavaScript/TypeScript utilizando la librería tree-hugger-js.

Tree-Hugger-JS Server MCP server

Características

🔍 Análisis de Código

  • Analiza archivos o cadenas de código JavaScript, TypeScript, JSX y TSX
  • Encuentra patrones usando sintaxis intuitiva (p. ej., function, class[name="MyClass"])
  • Extrae funciones, clases, importaciones con metadatos detallados
  • Navega por nodos AST y analiza la estructura del código
  • Obtén nodos en posiciones específicas

🔧 Transformación de Código

  • Renombra identificadores en todo el código
  • Elimina importaciones no utilizadas
  • Encadena múltiples transformaciones
  • Inserta código antes/después de patrones
  • Previsualiza transformaciones antes de aplicarlas

📊 Inteligencia de Código

  • Análisis de alcance y vinculación de variables
  • Coincidencia de patrones con selectores similares a CSS
  • Soporte para funciones asíncronas, clases, métodos
  • Manejo de importaciones de tipos TypeScript

Instalación y Uso

🚀 Inicio Rápido (Recomendado)

Prueba inmediatamente con npx - no se requiere instalación:

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

📦 Instalación Global

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

# Then run anywhere
tree-hugger-js-mcp

🔧 Configuración de Desarrollo

# 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

Configuración del Cliente MCP

Uso con Claude Code

Añade a tu configuración del cliente MCP:

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

Configuraciones Alternativas

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

Herramientas

Herramientas de Análisis de Código

parse_code

Analiza código JavaScript/TypeScript desde archivo o cadena.

Parámetros:

  • source (cadena): Ruta de archivo o cadena de código a analizar
  • isFilePath (booleano, opcional): Si la fuente es una ruta de archivo (se detecta automáticamente si no se proporciona)
  • language (cadena, opcional): Idioma a utilizar (javascript, typescript, jsx, tsx)

Ejemplo:

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

Encuentra el primer nodo que coincida con un patrón.

Parámetros:

  • pattern (cadena): Patrón a coincidir usando la sintaxis de tree-hugger-js

Ejemplos:

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

Encuentra todos los nodos que coincidan con un patrón.

Parámetros:

  • pattern (cadena): Patrón a coincidir
  • limit (número, opcional): Máximo de coincidencias a devolver

get_functions

Obtén todas las funciones con detalles.

Parámetros:

  • includeAnonymous (booleano, opcional): Incluir funciones anónimas (predeterminado: true)
  • asyncOnly (booleano, opcional): Solo devolver funciones asíncronas (predeterminado: false)

get_classes

Obtén todas las clases con métodos y propiedades.

Parámetros:

  • includeProperties (booleano, opcional): Incluir propiedades de clase (predeterminado: true)
  • includeMethods (booleano, opcional): Incluir métodos de clase (predeterminado: true)

get_imports

Obtén todas las declaraciones de importación.

Parámetros:

  • includeTypeImports (booleano, opcional): Incluir importaciones de solo tipos de TypeScript (predeterminado: true)

Herramientas de Transformación de Código

rename_identifier

Renombra todas las apariciones de un identificador.

Parámetros:

  • oldName (cadena): Nombre del identificador actual
  • newName (cadena): Nuevo nombre del identificador
  • preview (booleano, opcional): Devolver solo vista previa (predeterminado: false)

Ejemplo:

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

remove_unused_imports

Elimina declaraciones de importación no utilizadas.

Parámetros:

  • preview (booleano, opcional): Devolver solo vista previa (predeterminado: false)

transform_code

Aplica múltiples transformaciones en secuencia.

Parámetros:

  • operations (matriz): Matriz de operaciones de transformación
  • preview (booleano, opcional): Devolver solo vista previa (predeterminado: false)

Ejemplo:

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

Inserta código antes o después de nodos que coincidan con un patrón.

Parámetros:

  • pattern (cadena): Patrón a coincidir para puntos de inserción
  • code (cadena): Código a insertar
  • position (cadena): "before" o "after"
  • preview (booleano, opcional): Devolver solo vista previa (predeterminado: false)

Herramientas de Navegación

get_node_at_position

Obtén el nodo AST en una línea y columna específicas.

Parámetros:

  • line (número): Número de línea (basado en 1)
  • column (número): Número de columna (basado en 0)

analyze_scopes

Analiza alcances y vinculaciones de variables.

Parámetros:

  • includeBuiltins (booleano, opcional): Incluir identificadores integrados (predeterminado: false)

Recursos

El servidor proporciona tres recursos para acceder al estado interno:

ast://current

Estado AST analizado actual con metadatos y estadísticas.

ast://analysis

Resultados del análisis de código más reciente (funciones, clases, importaciones).

ast://transforms

Historial de transformaciones de código y operaciones disponibles.

Sintaxis de Patrones

Tree-hugger-js utiliza patrones intuitivos en lugar de tipos de nodo tree-sitter verbosos:

Patrones Básicos

  • function - Cualquier función (declaración, expresión, flecha, método)
  • class - Declaraciones y expresiones de clase
  • string - Literales de cadena y plantilla
  • import/export - Declaraciones de importación/exportación
  • call - Llamadas a funciones
  • loop - Bucles for, while, do-while

Selectores de Atributos

  • [name="foo"] - Nodos con nombre específico
  • [async] - Funciones asíncronas
  • [text*="test"] - Nodos que contienen texto

Selectores Similares a CSS

  • class method - Métodos dentro de clases
  • function > return - Declaraciones de retorno directamente en funciones
  • :has() y :not() pseudo-selectores

Ejemplos

Análisis de Código Básico

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

Refactorización de Código

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

Coincidencia de Patrones

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

Desarrollo

# Install dependencies
npm install

# Build the project
npm run build

# Watch mode for development
npm run dev

# Test with MCP inspector
npm run inspector

Manejo de Errores

El servidor proporciona mensajes de error detallados y sugerencias:

  • Errores de archivo no encontrado para rutas de archivo inválidas
  • Errores de análisis con contexto útil
  • Errores de coincidencia de patrones con sugerencias
  • Errores de transformación con capacidad de reversión

Licencia

MIT