🚀 code-explainer

AI-Powered React Code Analyzer — Complete Guide & Reference

Version: 1.1.2 | Package: code-explainer | CLI Tool for React .tsx Components

📦 NPM Package

npm install -g code-explainer

🧠 What is code-explainer?

code-explainer is an intelligent CLI tool that analyzes React .tsx components using:

• Static AST Analysis via ts-morph
• AI-Powered Explanations via NVIDIA API (Llama 3.1 70B)
• Multi-Level Dashboard Output tailored to your experience level

It acts as:

• 🎓 Junior Mentor: Focuses on learning, analogies, and step-by-step "Lesson" based fixes.
• 🧑‍💻 Senior Reviewer: A technical lead that provides code health scores and performance reviews.
• 🏗 Architect Auditor: A high-level system architect focused on patterns, scalability, and structural integrity.

📥 Installation

npm install -g code-explainer

Verify Version

ce --version

⚡ Quick Start

# Analyze with standard Senior mode (default)
ce test.tsx -e s

# Analyze with Junior learning mode
ce test.tsx -e j

# Analyze with Architect auditing mode
ce test.tsx -e ar

🎯 Explanation Modes

🎓 Junior Level (Learning Mode)

Best for: Students and junior engineers. Format: Tutorial-style "Lessons".

• Explains Why things matter using simple analogies.
• Shows your code vs. the fixed version.
• Provides a "Code Health Score" with encouraging feedback.

🧑‍💻 Senior Level (Review Mode - Default)

Best for: Daily development and code reviews. Format: Technical Status Dashboard.

• Scorecard: Performance, Type Safety, Best Practices, Bundle Size.
• Visuals: ██░░ ASCII progress bars.
• Counts: Quick view of Criticals, Warnings, and Good patterns.

🏗 Architect Level (Audit Mode)

Best for: System design and major refactors. Format: Professional Audit.

• Structural Pillars: Analyzes SRP, Scalability, and Data Flow.
• Strategic Path: Provides a prioritized "Next Strategic Steps" list.
• Integrity Score: Measures how well the component fits into a modular system.

🖥 CLI Commands & Flags

| Flag | Values | Default | Description | | ------------------ | --------------------------------- | -------------- | ---------------------------------------- | | -e, --explain | junior senior architect | senior | Set the AI explanation depth level | | -o, --output | terminal json markdown | terminal | Set the output format | | -s, --save | <filename> | — | Save the output to a file | | -v, --verbose | — | — | Show detailed processing logs |

🛠 Technical Architecture

1. AST Extraction: ts-morph parses your component to find hooks, state, effects, and API calls.
2. Metadata Injection: Structured component data is injected into specialized AI prompts.
3. AI Inference: NVIDIA's Llama 3.1 70B processes the code with extreme precision.
4. Visual Rendering: cli-table3 and chalk create a premium terminal dashboard experience.

⚙️ Configuration

Set your NVIDIA API key in a .env file or as an environment variable:

NVIDIA_API_KEY=your_api_key_here

📄 License

MIT © code-explainer

Built with ❤️ for React developers.
code-explainer — Understand your code. At your level.