Show HN: Tree-hugger-JS: CSS selectors for JavaScript AST analysis and MCP
4 chw9e 0 6/20/2025, 11:11:48 PM
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.
No comments yet