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