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

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

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