Tree-Hugger-JS

Servidor MCP Tree-Hugger-JS

Um servidor MCP (Model Context Protocol) que fornece aos agentes de IA poderosos recursos de análise e transformação de código JavaScript/TypeScript usando a biblioteca tree-hugger-js.

Recursos

🔍 Análise de Código

• Analisar arquivos ou strings de código JavaScript, TypeScript, JSX e TSX
• Encontrar padrões usando sintaxe intuitiva (ex.: function, class[name="MyClass"])
• Extrair funções, classes, imports com metadados detalhados
• Navegar pelos nós da AST e analisar a estrutura do código
• Obter nós em posições específicas

🔧 Transformação de Código

• Renomear identificadores em todo o código
• Remover imports não utilizados
• Encadear múltiplas transformações
• Inserir código antes/depois de padrões
• Visualizar transformações antes de aplicá-las

📊 Inteligência de Código

• Análise de escopo e vinculação de variáveis
• Correspondência de padrões com seletores semelhantes a CSS
• Suporte para funções assíncronas, classes, métodos
• Tratamento de imports de tipos TypeScript

Instalação e Uso

🚀 Início Rápido (Recomendado)

Experimente imediatamente com npx - sem necessidade de instalação:

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

📦 Instalação Global

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

# Then run anywhere
tree-hugger-js-mcp

🔧 Configuração de Desenvolvimento

# 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

Configuração do Cliente MCP

Uso com Claude Code

Adicione à configuração do seu cliente MCP:

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

Configurações 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"]
    }
  }
}

Ferramentas

Ferramentas de Análise de Código

parse_code

Analisar código JavaScript/TypeScript de arquivo ou string.

Parâmetros:

• source (string): Caminho do arquivo ou string de código para analisar
• isFilePath (booleano, opcional): Se a origem é um caminho de arquivo (detecção automática se não informado)
• language (string, opcional): Idioma a usar (javascript, typescript, jsx, tsx)

Exemplo:

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

Encontrar o primeiro nó que corresponde a um padrão.

Parâmetros:

• pattern (string): Padrão para correspondência usando a sintaxe tree-hugger-js

Exemplos:

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

Encontrar todos os nós que correspondem a um padrão.

Parâmetros:

• pattern (string): Padrão para correspondência
• limit (número, opcional): Máximo de correspondências a retornar

get_functions

Obter todas as funções com detalhes.

Parâmetros:

• includeAnonymous (booleano, opcional): Incluir funções anônimas (padrão: true)
• asyncOnly (booleano, opcional): Retornar apenas funções assíncronas (padrão: false)

get_classes

Obter todas as classes com métodos e propriedades.

Parâmetros:

• includeProperties (booleano, opcional): Incluir propriedades de classe (padrão: true)
• includeMethods (booleano, opcional): Incluir métodos de classe (padrão: true)

get_imports

Obter todas as declarações de import.

Parâmetros:

• includeTypeImports (booleano, opcional): Incluir imports somente de tipos TypeScript (padrão: true)

Ferramentas de Transformação de Código

rename_identifier

Renomear todas as ocorrências de um identificador.

Parâmetros:

• oldName (string): Nome atual do identificador
• newName (string): Novo nome do identificador
• preview (booleano, opcional): Retornar apenas visualização (padrão: false)

Exemplo:

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

remove_unused_imports

Remover declarações de import não utilizadas.

Parâmetros:

• preview (booleano, opcional): Retornar apenas visualização (padrão: false)

transform_code

Aplicar múltiplas transformações em sequência.

Parâmetros:

• operations (array): Matriz de operações de transformação
• preview (booleano, opcional): Retornar apenas visualização (padrão: false)

Exemplo:

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

Inserir código antes ou depois de nós que correspondem a um padrão.

Parâmetros:

• pattern (string): Padrão para correspondência dos pontos de inserção
• code (string): Código a inserir
• position (string): "before" ou "after"
• preview (booleano, opcional): Retornar apenas visualização (padrão: false)

Ferramentas de Navegação

get_node_at_position

Obter nó da AST em linha e coluna específicas.

Parâmetros:

• line (número): Número da linha (baseado em 1)
• column (número): Número da coluna (baseado em 0)

analyze_scopes

Analisar escopos de variáveis e vinculações.

Parâmetros:

• includeBuiltins (booleano, opcional): Incluir identificadores integrados (padrão: false)

Recursos

O servidor fornece três recursos para acessar o estado interno:

ast://current

Estado atual da AST analisada com metadados e estatísticas.

ast://analysis

Resultados da análise de código mais recente (funções, classes, imports).

ast://transforms

Histórico de transformações de código e operações disponíveis.

Sintaxe de Padrões

Tree-hugger-js usa padrões intuitivos em vez de tipos de nós tree-sitter verbosos:

Padrões Básicos

• function - Qualquer função (declaração, expressão, arrow, método)
• class - Declarações e expressões de classe
• string - Literais de string e template
• import/export - Declarações de import/export
• call - Chamadas de função
• loop - Laços for, while, do-while

Seletores de Atributo

• [name="foo"] - Nós com nome específico
• [async] - Funções assíncronas
• [text*="test"] - Nós contendo texto

Seletores Semelhantes a CSS

• class method - Métodos dentro de classes
• function > return - Declarações de retorno diretamente em funções
• :has() e :not() pseudo-seletores

Exemplos

Análise Básica de Código

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

Refatoração de Código

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

Correspondência de Padrões

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

Desenvolvimento

# Install dependencies
npm install

# Build the project
npm run build

# Watch mode for development
npm run dev

# Test with MCP inspector
npm run inspector

Tratamento de Erros

O servidor fornece mensagens de erro detalhadas e sugestões:

• Erros de arquivo não encontrado para caminhos de arquivo inválidos
• Erros de análise com contexto útil
• Erros de correspondência de padrões com sugestões
• Erros de transformação com capacidade de reversão

Licença

MIT