jsx-extract-ast

AST-aware JSX component extraction tool for large file refactoring.

Problem

Claude Code's Edit tool requires loading entire files into context and uses string matching, which:

• Consumes 30K+ tokens for 1500-line files
• Can't reliably find matching JSX tags
• Causes Vercel build errors from mismatched tags
• Is 100x slower than AST-based extraction

Solution

jsx-extract uses Tree-sitter to parse JSX semantically:

• Fast: No context window bloat, processes files in ~100ms
• Accurate: Finds matching tags via AST, not line counting
• Safe: Validates structure before modifying
• Integrated: Works as CLI tool or MCP server for Claude Code

Installation

npm install --save-dev jsx-extract-ast

CLI Usage

# Extract component by conditional selector
npx jsx-extract component src/app/page.tsx "ClaudeSetupBlock" \
  --selector "showClaudeSetup" \
  --output src/components/ClaudeSetupBlock.tsx

# Find matching closing tag
npx jsx-extract find-tag src/app/page.tsx --line 771

# Validate JSX structure
npx jsx-extract validate src/app/page.tsx

MCP Server (Claude Code Integration)

Register the server:

claude mcp add jsx-extract npx jsx-extract-ast mcp

Available tools:

• mcp__jsx-extract__extract_component - Extract JSX block to new file
• mcp__jsx-extract__find_matching_tag - Find closing tag for selection
• mcp__jsx-extract__validate_jsx - Verify structure before editing

Auto-approve in ~/.config/claude-code/settings.json:

{
  "autoApproveTools": [
    "mcp__jsx-extract__extract_component",
    "mcp__jsx-extract__find_matching_tag",
    "mcp__jsx-extract__validate_jsx"
  ]
}

Example

Before (Claude Code Read/Edit approach):

Read(setup/page.tsx) // 30K tokens
Edit(...) // Another 30K tokens
Total: 60K tokens, 5+ seconds

After (jsx-extract):

mcp__jsx-extract__extract_component({
  file: "setup/page.tsx",
  componentName: "ClaudeSetupBlock",
  selector: "showClaudeSetup"
})
Total: ~100 tokens, <1 second

Parallel Extraction Pattern (10-20x faster)

For large pages (1000+ lines) with multiple components to extract, use Claude Flow MCP to spawn parallel extraction agents:

// Single message with all 7 extractions running in parallel
Task("Extract PricingTiers", "Extract from lines 753-825...", "general-purpose")
Task("Extract SignupForm", "Extract from lines 851-1052...", "general-purpose")
Task("Extract ROICalculators", "Extract from lines 1055-1218...", "general-purpose")
Task("Extract HeroSection", "Extract from lines 623-673...", "general-purpose")
Task("Extract FAQ", "Extract from lines 1312-1365...", "general-purpose")
Task("Extract FinalCTA", "Extract from lines 1368-1395...", "general-purpose")
Task("Extract OneCommandSetup", "Extract from lines 676-747...", "general-purpose")

Real-world result: Refactored 1,408-line CRM page to 8 modular components in ~45 seconds

• Sequential: Would take 5-8 minutes with Read/Edit approach
• Parallel with jsx-extract: 45 seconds with 7 concurrent agents
• Token savings: 90%+ reduction (7 agents share the work, no context bloat)

Each agent independently reads the file, extracts its component, and updates the main page - no conflicts, no context limits.

How It Works

1. Parse: Tree-sitter builds AST of your JSX file
2. Query: Find component by semantic selector (e.g., conditional name)
3. Extract: Copy entire block from opening to closing tag
4. Validate: Ensure no orphaned tags or broken nesting
5. Replace: Insert import + component reference in original file

Versioning

Follows semver:

• 0.x.x - Pre-release, breaking changes possible
• 1.0.0 - Stable API
• 1.x.x - New features, backward compatible
• 2.0.0 - Breaking changes

License

MIT