Show HN: Tree-hugger-JS: CSS selectors for JavaScript AST analysis and MCP

I built a library that lets you find code patterns using familiar CSS-like selectors, then connected it to Claude via MCP so AI assistants can understand and refactor codebases.

The Approach

// Find code patterns with intuitive selectors: const asyncFunctions = tree.findAll('function[async]'); const todoComments = tree.findAll('comment[text="TODO"]'); const reactHooks = tree.hooks(); // Built-in React support

// Chain smart transformations: tree.transform() .rename('oldFunction', 'newFunction') .removeUnusedImports() .toString();

Key Features

- CSS-like selectors: function[async], class:has(method), call[text*="fetch"] - Semantic aliases: function matches declarations, expressions, arrows, and methods - Smart transformations: Rename identifiers, remove unused imports, insert code - Built-in queries: functions, classes, imports, React hooks, JSX components - TypeScript support: Full parameter extraction with types - Scope analysis: Track variable bindings and references

-- MCP -- I built an MCP server that exposes these capabilities to AI assistants. You can tell Claude:

"Find all functions that use console.log and show me their parameters"

And Claude can: 1. Parse your codebase 2. Use find_all_pattern('function:has(call[text="console.log"])') 3. Extract parameter information with types 4. Give you detailed analysis

Technical Details

- Built on tree-sitter for correctness and performance - 13 MCP tools for comprehensive code analysis - Supports JavaScript, TypeScript, JSX, TSX - Pattern parser converts CSS selectors to AST predicates - Stateful MCP server maintains analysis context

Links: - Library: https://github.com/qckfx/tree-hugger-js - MCP Server: https://github.com/qckfx/tree-hugger-js-mcp - NPM: npm install tree-hugger-js - Claude Code: claude mcp add tree-hugger-js-mcp npx tree-hugger-js-mcp

Would love feedback from the community, especially on the MCP.