🚀 code-explainer

AI-Powered React Code Analyzer — Complete Guide & Reference

Version: 2.0.0 | Package: code-explainer | CLI Tool for React Components

📦 NPM Package

npm install -g code-explainer

🧠 What is code-explainer?

code-explainer is an intelligent CLI tool that analyzes React components (.tsx, .ts, .jsx, .js) using:

• Static AST Analysis via ts-morph
• AI-Powered Explanations via OpenAI SDK (NVIDIA Llama 3.1 70B endpoint)
• 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 a single file with Senior mode
ce test.tsx -e s

# Analyze a directory of components
ce src/components/

# Watch for changes and re-analyze automatically
ce test.tsx --watch

🎯 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.

🧑‍💻 Senior Level (Review Mode - Default)

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

• Scorecard: Performance, Type Safety, Best Practices, Bundle Size.
• 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.
• Integrity Score: Measures how well the component fits into a modular system.

🖥 CLI Commands & Flags

| Flag | Values | Default | Description | | ------------------ | --------------------------------- | -------------- | ---------------------------------------- | | -e, --explain | j s ar | s | Set the AI explanation depth level | | -o, --output | terminal json markdown html | terminal | Set the output format | | -s, --save | <filename> | — | Save the output to a file | | -w, --watch | — | — | Watch for changes and re-analyze | | --no-cache | — | — | Bypass the AI response cache | | --clear-cache | — | — | Clear the AI response cache | | -c, --config | <path> | — | Use a specific config file | | -v, --verbose | — | — | Show detailed processing logs |

⚙️ Configuration

You can configure code-explainer via a .code-explainerrc.json file in your project root:

{
  "defaultLevel": "senior",
  "defaultOutput": "terminal",
  "cacheEnabled": true,
  "ignorePatterns": ["node_modules", "dist"]
}

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.