Component Hierarchy Visualizer

Trace a React component's position in the Next.js component tree and display it as an easy-to-read ASCII tree diagram from the Page root down to the target component.

Required MCP Tools

• Serena: find_file, find_symbol, find_referencing_symbols, get_symbols_overview, search_for_pattern, list_dir
• Sequential Thinking: sequentialthinking — for organizing the recursive trace logic
• Context7 (optional): resolve-library-id, query-docs — for referencing Next.js routing docs when needed

Workflow

Step 1: Detect Router Type

Determine whether the project uses App Router, Pages Router, or both.