🔒

Code Guardian Report

Enterprise-Grade AI-Powered Security Analysis Platform

0 installs

Trust: 39 — Low

Security

Ask AI about Code Guardian Report

I know everything about Code Guardian Report. Ask me about installation, configuration, usage, or troubleshooting.

0/500

Loading tools...

Reviews

Documentation

Code Guardian Report

Enterprise-Grade AI-Powered Security Analysis Platform

🚀 New to Code Guardian? Check out our Quick Start Guide to get running in under 2 minutes!

Overview
Key Features
Architecture
Technology Stack
Getting Started
- Prerequisites
- Installation
- Configuration
- Development
- Production Build
Usage Guide
- Code Analysis
- GitHub Integration
- Report Generation
- AI-Powered Features
- MCP Integration
Multi-Language Support
Security Analysis
- Vulnerability Detection
- Secret Scanning
- Dependency Analysis
- OWASP Compliance
API Reference
Deployment
- Vercel Deployment
- Docker Deployment
- Firebase Deployment
- Self-Hosted Deployment
Testing
CI/CD Pipeline
Performance Optimization
Progressive Web App
Security Best Practices
Troubleshooting
Contributing
License
Support
Acknowledgments
Appendices

Overview

Code Guardian Report is a next-generation, enterprise-grade security analysis platform that leverages artificial intelligence and advanced static code analysis to identify vulnerabilities, code quality issues, and security misconfigurations across multiple programming languages. Built with modern web technologies, it provides real-time, comprehensive security insights for development teams, security professionals, and DevSecOps engineers.

Code Guardian Home

Platform Screenshots

Mission Statement

Our mission is to democratize enterprise-grade security analysis by providing developers with powerful, accessible tools that integrate seamlessly into their workflows. We believe that security should be proactive, not reactive, and that every developer deserves access to professional-grade security analysis tools.

Core Objectives

Security First: Identify and remediate security vulnerabilities before they reach production
Developer Experience: Provide intuitive, actionable insights without overwhelming developers
Multi-Language Support: Support 15+ programming languages with language-specific security patterns
AI-Powered Intelligence: Leverage AI to provide context-aware fix suggestions and security recommendations
Enterprise-Ready: Built for scale with robust architecture, comprehensive testing, and production-grade deployment options

Use Cases

Development Teams: Integrate security analysis into daily development workflows
Security Teams: Conduct comprehensive security audits and compliance checks
DevSecOps Engineers: Automate security scanning in CI/CD pipelines
Code Reviewers: Enhance code review processes with automated security checks
Open Source Projects: Ensure security best practices in public repositories
Educational Institutions: Teach secure coding practices with real-world examples
Compliance Officers: Generate compliance reports for regulatory requirements

Platform Highlights

100% Client-Side Processing: Your code never leaves your browser - complete privacy guaranteed
Real-Time Analysis: Instant feedback as you upload or analyze code
Comprehensive Reports: Detailed PDF and JSON exports with actionable insights
GitHub Integration: Analyze repositories directly from GitHub with OAuth authentication
MCP Integration: Full Model Context Protocol support for IDE integration
Offline Capable: Full Progressive Web App support for offline analysis
Zero Configuration: Works out of the box with sensible defaults
Extensible: Custom rules engine for organization-specific security patterns

Key Features

1. Advanced Security Analysis

Security Analysis

Vulnerability Detection

OWASP Top 10 Coverage: Complete detection suite for all OWASP Top 10 vulnerabilities
CWE Mapping: Maps vulnerabilities to Common Weakness Enumeration (CWE) identifiers
Severity Classification: Categorizes issues as Critical, High, Medium, Low, or Info
Context-Aware Detection: Analyzes code flow and data dependencies
Framework-Specific Checks: Tailored security patterns for popular frameworks

Supported Vulnerability Types

SQL Injection (SQLi)
Cross-Site Scripting (XSS)
Cross-Site Request Forgery (CSRF)
Server-Side Request Forgery (SSRF)
Remote Code Execution (RCE)
Path Traversal
Insecure Deserialization
XML External Entity (XXE)
Security Misconfigurations
Broken Authentication
Sensitive Data Exposure
Broken Access Control
Using Components with Known Vulnerabilities
Insufficient Logging & Monitoring

2. Multi-Language Code Analysis

Supported Programming Languages (15+)

JavaScript/TypeScript: Advanced AST-based analysis with ESLint integration
Python: Full support for Python 2.x and 3.x with framework detection
Java: Enterprise Java and Android application analysis
C#/.NET: .NET Framework and .NET Core support
PHP: Laravel, Symfony, and WordPress security checks
Ruby: Rails-specific security patterns
Go: Goroutine safety and concurrency analysis
Rust: Memory safety and ownership analysis
C/C++: Memory corruption and buffer overflow detection
Kotlin: Android security best practices
Swift: iOS security patterns
Dart/Flutter: Mobile application security
Scala: Functional programming security patterns
HTML/CSS: Front-end security analysis
SQL: Database query security

Language Detection Features

Automatic Detection: Identifies languages from file extensions and content patterns
Confidence Scoring: Provides accuracy scores for language detection (up to 100%)
Multi-Layer Analysis: Uses extension matching, syntax patterns, keywords, and unique signatures
Framework Detection: Identifies frameworks like React, Vue, Angular, Django, Spring Boot, Laravel
Build Tool Detection: Recognizes Webpack, Vite, Maven, Gradle, Cargo, and more
Package Manager Detection: Identifies npm, Yarn, pip, Composer, Bundler, etc.

3. AI-Powered Intelligence

AI Features

Natural Language Descriptions

Plain English Explanations: Translates technical security issues into understandable language
Context-Aware: Provides explanations based on the specific code context
Multiple Detail Levels: Offers brief, standard, and detailed explanation modes

AI Fix Suggestions

Automated Remediation: Generates secure code replacements for vulnerabilities
Framework-Specific Fixes: Provides fixes tailored to detected frameworks
Best Practice Recommendations: Suggests industry-standard security patterns
Code Diff Generation: Shows before/after comparisons for proposed fixes

Intelligent Chatbot

Interactive Q&A: Ask questions about detected vulnerabilities
Code Explanation: Request explanations for specific code patterns
Security Guidance: Get advice on security best practices
Custom Queries: Perform natural language searches across analysis results

AI Model Support

OpenAI Integration: GPT-4, GPT-3.5-turbo support
Anthropic Claude: Claude 3 Opus, Sonnet, and Haiku
Google Gemini: Gemini Pro and Gemini Ultra
Local Models: Support for locally-hosted models via API
Model Discovery: Automatic detection and configuration of available models

4. Model Context Protocol (MCP) Integration

MCP Server Implementation

Code Guardian now includes a full-featured MCP server that enables seamless integration with AI-powered development environments and tools.

Available MCP Tools (19 Tools)

Scanner Agent

scan_file - Scan individual files for vulnerabilities
scan_codebase - Perform comprehensive security audits
detect_secrets - Find hardcoded credentials and API keys
scan_dependencies - Check for vulnerable dependencies

DataFlow Agent

analyze_data_flow - Track data movement and identify injection points

Metrics Agent

calculate_metrics - Generate security scores and metrics

ExploitSim Agent

build_exploit_graph - Visualize attack chains
simulate_exploit - Test exploit scenarios
get_attack_paths - Identify potential attack routes

PatchGen Agent

generate_patch - Create automated security fixes
preview_patch - Review changes before applying
apply_patch - Implement security patches

Validation Agent

validate_patch - Verify fix effectiveness
run_regression - Test for side effects
check_confidence - Assess patch quality

RiskOptimizer Agent

optimize_patches - Prioritize fixes by risk

Memory Agent

query_memory - Access previous analysis results

Pipeline Agent

full_security_pipeline - Complete end-to-end analysis
quick_scan - Fast security assessment

MCP Transport Support

STDIO Transport: For command-line integration
HTTP Transport: For web-based integrations
VS Code Integration: Works seamlessly with GitHub Copilot Chat

Usage Examples

# Build MCP server
npm run mcp:build

# Run via STDIO
npm run mcp:stdio

# Run via HTTP
npm run mcp:http

# Development mode
npm run mcp:dev

For detailed MCP usage instructions, see MCP_TOOLS_REFERENCE.md

5. GitHub Repository Analysis

GitHub Integration

Repository Integration

OAuth Authentication: Secure GitHub login with token management
Repository Listing: Browse all accessible repositories
Direct Analysis: Analyze repositories without manual download
Branch Selection: Choose specific branches for analysis
Private Repository Support: Full support for private repositories with proper permissions

Repository Features

Commit History Analysis: Track security issues across commits
Pull Request Scanning: Automated security checks for PRs
Issue Tracking Integration: Link vulnerabilities to GitHub issues
Repository Comparison: Compare security posture across repositories
Trend Analysis: Monitor security improvements over time

5. Comprehensive Reporting

Report Types

PDF Reports: Professional, formatted reports with charts and graphs
JSON Exports: Machine-readable data for automation and integration
HTML Reports: Interactive web-based reports
CSV Exports: Spreadsheet-compatible data exports
SARIF Format: Static Analysis Results Interchange Format for CI/CD integration

Report Contents

Executive Summary: High-level overview for management
Detailed Findings: Line-by-line vulnerability breakdown
Severity Distribution: Visual representation of issue severity
Trend Analysis: Historical security posture tracking
Compliance Mapping: OWASP, CWE, and regulatory framework mapping
Remediation Guidance: Step-by-step fix instructions
Code Snippets: Vulnerable code with highlighted issues
Metrics Dashboard: Security scores, quality metrics, and KPIs

6. Custom Rules Engine

Rule Configuration

Pattern Matching: Define custom regex patterns for vulnerability detection
Severity Assignment: Set custom severity levels for organization-specific risks
Language-Specific Rules: Create rules tailored to specific languages
Rule Import/Export: Share rule sets across teams and projects
Rule Templates: Pre-built templates for common security patterns

Rule Categories

Security Rules: Custom security vulnerability patterns
Compliance Rules: Organization-specific compliance requirements
Code Quality Rules: Style and quality standards
Performance Rules: Performance anti-patterns and bottlenecks
Custom Checks: Domain-specific validation rules

7. Real-Time Analytics Dashboard

Analytics Dashboard

Dashboard Components

Security Score: Overall security posture metric (0-100)
Quality Score: Code quality assessment
Maintainability Index: Long-term maintainability rating
Complexity Metrics: Cyclomatic complexity and code metrics
Vulnerability Trends: Time-series visualization of security issues
Language Distribution: Visual breakdown of codebase languages
Framework Detection: Identified frameworks and versions

Interactive Charts

Severity Distribution: Pie charts showing issue severity breakdown
Trend Analysis: Line charts tracking security improvements
File Complexity: Bar charts showing most complex files
Type Distribution: Issue categorization visualization
OWASP Mapping: Visual representation of OWASP coverage

8. Progressive Web App (PWA)

PWA Capabilities

Offline Analysis: Full functionality without internet connection
Install Prompts: One-click installation on desktop and mobile
Background Sync: Automatic synchronization when connection restored
Push Notifications: Real-time alerts for analysis completion
Service Worker: Advanced caching and offline support
App-Like Experience: Native app feel on web and mobile

Offline Features

Local Storage: IndexedDB for persistent data storage
Cache Strategy: Intelligent caching of static assets and analysis results
Sync Queue: Queues operations for execution when online
Conflict Resolution: Handles data conflicts gracefully

9. Performance Optimization

Performance Features

Code Splitting: Dynamic imports for faster initial load
Lazy Loading: On-demand component loading
Asset Optimization: Minified and compressed assets
CDN Delivery: Global content delivery for fast access
Image Optimization: Automatic image compression and format selection
Bundle Analysis: webpack-bundle-analyzer integration

Performance Metrics

First Contentful Paint (FCP): < 1.5s target
Largest Contentful Paint (LCP): < 2.5s target
Time to Interactive (TTI): < 3.8s target
Total Blocking Time (TBT): < 300ms target
Cumulative Layout Shift (CLS): < 0.1 target

10. Security and Privacy

Privacy Features

Client-Side Processing: All code analysis happens in the browser
No Data Transmission: Your code never leaves your device
Secure Storage: Encrypted local storage for sensitive data
Anonymous Analytics: Privacy-preserving usage analytics
GDPR Compliant: Full compliance with privacy regulations

Security Headers

Content Security Policy (CSP): Strict CSP to prevent XSS
X-Frame-Options: Prevents clickjacking attacks
X-Content-Type-Options: Prevents MIME sniffing
Strict-Transport-Security (HSTS): Forces HTTPS connections
Referrer-Policy: Controls referrer information
Permissions-Policy: Restricts browser feature access

Architecture

High-Level Architecture

Code Guardian Report follows a modern, modular architecture designed for scalability, maintainability, and performance.

┌─────────────────────────────────────────────────────────────────┐
│                        Client Browser                            │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │                   Next.js Application                      │  │
│  │  ┌─────────────┐  ┌─────────────┐  ┌──────────────────┐  │  │
│  │  │    Pages    │  │ Components  │  │    Services      │  │  │
│  │  │  (Routes)   │  │   (UI/UX)   │  │   (Business)     │  │  │
│  │  └─────────────┘  └─────────────┘  └──────────────────┘  │  │
│  │         │                 │                  │             │  │
│  │         └─────────────────┴──────────────────┘             │  │
│  │                          │                                 │  │
│  │  ┌───────────────────────▼─────────────────────────────┐  │  │
│  │  │           Core Analysis Engine                       │  │  │
│  │  │  ┌──────────┐ ┌──────────┐ ┌────────────────────┐  │  │  │
│  │  │  │   AST    │ │ Security │ │   Multi-Language   │  │  │  │
│  │  │  │ Analyzer │ │ Analyzer │ │      Parser        │  │  │  │
│  │  │  └──────────┘ └──────────┘ └────────────────────┘  │  │  │
│  │  └─────────────────────────────────────────────────────┘  │  │
│  │                          │                                 │  │
│  │  ┌───────────────────────▼─────────────────────────────┐  │  │
│  │  │              Storage Layer                           │  │  │
│  │  │   ┌──────────────┐        ┌──────────────────────┐  │  │  │
│  │  │   │  IndexedDB   │        │   LocalStorage       │  │  │  │
│  │  │   │  (Analysis)  │        │  (Preferences)       │  │  │  │
│  │  │   └──────────────┘        └──────────────────────┘  │  │  │
│  │  └─────────────────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘
                               │
                               ▼
┌─────────────────────────────────────────────────────────────────┐
│                      External Services                           │
│  ┌──────────────┐  ┌──────────────┐  ┌───────────────────────┐ │
│  │   GitHub     │  │   Firebase   │  │   AI Providers        │ │
│  │     API      │  │  (Optional)  │  │  (OpenAI, Claude)     │ │
│  └──────────────┘  └──────────────┘  └───────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘

Component Architecture

1. Presentation Layer

Pages: Next.js App Router pages for routing
Components: Reusable React components organized by domain
Layouts: Shared layout components for consistent UI
UI Library: Radix UI components with Tailwind CSS styling

2. Business Logic Layer

Services: Domain-specific business logic
- analysisIntegrationService: Coordinates analysis workflows
- enhancedAnalysisEngine: Core security analysis
- githubRepositoryService: GitHub integration
- aiService: AI-powered features
Hooks: Custom React hooks for state management
Context: React Context for global state

3. Data Layer

Analysis Storage: IndexedDB for analysis results
Firebase Storage (Optional): Cloud persistence
GitHub Storage: Repository-based storage
Offline Manager: Handles offline data synchronization

4. Analysis Engine Architecture

┌──────────────────────────────────────────────────────────────────┐
│                     Analysis Pipeline                             │
├──────────────────────────────────────────────────────────────────┤
│  1. File Upload/GitHub Fetch                                     │
│     └─> Validation → Preprocessing → Language Detection          │
├──────────────────────────────────────────────────────────────────┤
│  2. Multi-Language Parsing                                       │
│     ├─> JavaScript/TypeScript → Babel Parser → AST              │
│     ├─> Python → Acorn Parser → AST                             │
│     ├─> Java → Lezer Parser → AST                               │
│     └─> Other Languages → Pattern Matching                      │
├──────────────────────────────────────────────────────────────────┤
│  3. Security Analysis                                            │
│     ├─> Static Analysis Rules                                   │
│     ├─> Data Flow Analysis                                      │
│     ├─> Control Flow Analysis                                   │
│     ├─> Taint Analysis                                          │
│     └─> Pattern Matching                                        │
├──────────────────────────────────────────────────────────────────┤
│  4. Vulnerability Detection                                      │
│     ├─> OWASP Checks                                            │
│     ├─> CWE Mapping                                             │
│     ├─> Framework-Specific Rules                               │
│     └─> Custom Rules                                            │
├──────────────────────────────────────────────────────────────────┤
│  5. Secret Detection                                             │
│     ├─> API Key Patterns                                        │
│     ├─> Token Patterns                                          │
│     ├─> Password Patterns                                       │
│     └─> Certificate Patterns                                    │
├──────────────────────────────────────────────────────────────────┤
│  6. Dependency Analysis                                          │
│     ├─> Package.json/requirements.txt Parsing                   │
│     ├─> Version Checking                                        │
│     └─> Known Vulnerability Database Lookup                     │
├──────────────────────────────────────────────────────────────────┤
│  7. Metrics Calculation                                          │
│     ├─> Cyclomatic Complexity                                   │
│     ├─> Code Smells                                             │
│     ├─> Maintainability Index                                   │
│     └─> Security Score                                          │
├──────────────────────────────────────────────────────────────────┤
│  8. AI Enhancement (Optional)                                    │
│     ├─> Natural Language Descriptions                           │
│     ├─> Fix Suggestions                                         │
│     └─> Context Analysis                                        │
├──────────────────────────────────────────────────────────────────┤
│  9. Report Generation                                            │
│     ├─> PDF Export                                              │
│     ├─> JSON Export                                             │
│     ├─> HTML Report                                             │
│     └─> SARIF Export                                            │
└──────────────────────────────────────────────────────────────────┘

Directory Structure

code-guardian-report/
├── app/                          # Next.js App Router
│   ├── about/                    # About page
│   ├── api/                      # API routes
│   │   ├── analytics/            # Analytics endpoints
│   │   │   └── pwa/             # PWA analytics
│   │   ├── copilot/             # Copilot AI endpoints
│   │   │   ├── completions/     # AI completions
│   │   │   └── models/          # AI model discovery
│   │   ├── health/               # Health check
│   │   ├── log-error/            # Error logging
│   │   └── push/                 # Push notification endpoints
│   │       ├── schedule/         # Push scheduling
│   │       ├── send/             # Push sending
│   │       ├── subscribe/        # Push subscription
│   │       └── unsubscribe/      # Push unsubscription
│   ├── github-analysis/          # GitHub analysis page
│   ├── help/                     # Help documentation
│   ├── history/                  # Analysis history
│   ├── privacy/                  # Privacy policy
│   ├── pwa-settings/             # PWA settings
│   ├── terms/                    # Terms of service
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Home page
├── src/
│   ├── components/               # React components
│   │   ├── ai/                   # AI-related components
│   │   ├── analysis/             # Analysis components
│   │   ├── auth/                 # Authentication components
│   │   ├── common/               # Common/shared components
│   │   ├── dashboard/            # Dashboard components
│   │   ├── export/               # Export components
│   │   ├── firebase/             # Firebase components
│   │   ├── github/               # GitHub components
│   │   ├── language/             # Language detection components
│   │   ├── layout/               # Layout components
│   │   ├── monitoring/           # Monitoring components
│   │   ├── notifications/        # Notification components
│   │   ├── pwa/                  # PWA components
│   │   ├── results/              # Results display components
│   │   ├── rules/                # Custom rules components
│   │   ├── security/             # Security components
│   │   ├── ui/                   # UI primitives (Radix UI)
│   │   └── upload/               # File upload components
│   ├── config/                   # Configuration files
│   │   ├── constants.ts          # Application constants
│   │   ├── pwa.ts                # PWA configuration
│   ├── mcp/                      # Model Context Protocol
│   │   ├── memory/               # Memory store for MCP
│   │   ├── prompts/              # MCP prompts
│   │   ├── resources/            # MCP resources
│   │   ├── tools/                # MCP tools (19 tools)
│   │   ├── transports/           # MCP transport implementations
│   │   └── server.ts             # MCP server factory
│   │   └── security.ts           # Security configuration
│   ├── hooks/                    # Custom React hooks
│   │   ├── useAnalysis.ts        # Analysis hook
│   │   ├── useFileUpload.ts      # File upload hook
│   │   ├── useGitHubRepositories.ts
│   │   ├── usePWA.ts             # PWA hook
│   │   └── ...
│   ├── lib/                      # Library code
│   │   ├── auth-context.tsx      # Authentication context
│   │   ├── firebase.ts           # Firebase configuration
│   │   ├── firestore-utils.ts    # Firestore utilities
│   │   └── utils.ts              # Utility functions
│   ├── services/                 # Business logic services
│   │   ├── ai/                   # AI services
│   │   │   ├── aiService.ts      # Main AI service
│   │   │   ├── aiFixSuggestionsService.ts
│   │   │   ├── modelDiscoveryService.ts
│   │   │   └── naturalLanguageDescriptionService.ts
│   │   ├── analysis/             # Analysis services
│   │   │   ├── ASTAnalyzer.ts    # AST analysis
│   │   │   ├── DataFlowAnalyzer.ts
│   │   │   ├── MetricsCalculator.ts
│   │   │   ├── MultiLanguageParser.ts
│   │   │   ├── MultiLanguageSecurityAnalyzer.ts
│   │   │   └── SecurityAnalyzer.ts
│   │   ├── api/                  # API services
│   │   │   └── githubService.ts  # GitHub API
│   │   ├── detection/            # Detection services
│   │   │   ├── codeProvenanceService.ts
│   │   │   ├── frameworkDetectionEngine.ts
│   │   │   └── languageDetectionService.ts
│   │   ├── export/               # Export services
│   │   │   └── pdfExportService.ts
│   │   ├── monitoring/           # Monitoring services
│   │   │   └── WebhookManager.ts
│   │   ├── notifications/        # Notification services
│   │   │   └── NotificationManager.ts
│   │   ├── pwa/                  # PWA services
│   │   │   ├── backgroundSync.ts
│   │   │   ├── pushNotifications.ts
│   │   │   └── pwaAnalytics.ts
│   │   ├── rules/                # Rules engine
│   │   │   └── CustomRulesEngine.ts
│   │   ├── security/             # Security services
│   │   │   ├── dependencyVulnerabilityScanner.ts
│   │   │   ├── modernCodeScanningService.ts
│   │   │   ├── secretDetectionService.ts
│   │   │   ├── securityAnalysisEngine.ts
│   │   │   └── zipAnalysisService.ts
│   │   └── storage/              # Storage services
│   │       ├── analysisStorage.ts
│   │       ├── firebaseAnalysisStorage.ts
│   │       ├── GitHubAnalysisStorageService.ts
│   │       └── offlineManager.ts
│   ├── styles/                   # CSS styles
│   ├── tests/                    # Test files
│   ├── types/                    # TypeScript types
│   │   ├── analysis.ts           # Analysis types
│   │   ├── api.ts                # API types
│   │   ├── auth.ts               # Authentication types
│   │   └── common.ts             # Common types
│   ├── utils/                    # Utility functions
│   │   ├── errorHandler.ts       # Error handling
│   │   ├── fileValidation.ts     # File validation
│   │   ├── logger.ts             # Logging
│   │   └── security.ts           # Security utilities
│   └── views/                    # Page views
├── public/                       # Static assets
│   ├── icons/                    # Application icons
│   ├── manifest.json             # PWA manifest
│   ├── robots.txt                # SEO robots file
│   └── sitemap.xml               # SEO sitemap
├── functions/                    # Firebase Cloud Functions
│   └── src/
│       └── index.ts              # Functions entry point
├── .github/                      # GitHub configuration
│   └── workflows/                # GitHub Actions workflows
│       ├── ci.yml                # CI/CD pipeline
│       ├── codeql.yml            # CodeQL analysis
│       ├── security-audit.yml    # Security audits
│       └── ...
├── scripts/                      # Utility scripts
│   ├── e2e-zip-analysis.ts       # E2E tests
│   ├── run-all-tests.ts          # Test runner
│   └── update-contributors.js    # Contributors update
├── md/                           # Markdown documentation
│   ├── CONTRIBUTING.md           # Contribution guidelines
│   ├── CODE_OF_CONDUCT.md        # Code of conduct
│   └── changelogs.md             # Version changelogs
├── .env.example                  # Environment variables template
├── Dockerfile                    # Docker configuration
├── next.config.ts                # Next.js configuration
├── tsconfig.json                 # TypeScript configuration
├── tailwind.config.ts            # Tailwind CSS configuration
├── package.json                  # Node.js dependencies
├── vercel.json                   # Vercel deployment config
├── firebase.json                 # Firebase configuration
├── jest.config.js                # Jest test configuration
├── vitest.config.ts              # Vitest configuration
├── docs/DEPLOYMENT.md            # Deployment guide
├── SECURITY.md                   # Security policy
├── LICENSE                       # MIT License
└── README.md                     # This file

Technology Stack

Frontend Technologies

Core Framework

Next.js 16.2.4: React framework with App Router, Server Components, and API routes
React 19.2.4: Latest React with improved performance and concurrent features
TypeScript 6.0.3: Type-safe development with advanced type features

UI/UX Libraries

Tailwind CSS 4.2.2: Utility-first CSS framework for rapid UI development
Radix UI: Unstyled, accessible component primitives
- Dialog, Popover, Select, Tabs, Toast, Tooltip, and more
Framer Motion 12.38.0: Production-ready animation library
Lucide React 0.577.0: Beautiful, consistent icon set
Recharts 3.8.0: Composable charting library for data visualization
Lenis 1.3.20: Smooth scrolling library

State Management & Data Flow

React Context API: Global state management
Custom Hooks: Reusable stateful logic
Local Storage: Client-side persistence
IndexedDB: Large-scale client-side database

Backend Technologies

Runtime & Server

Node.js 22.x: JavaScript runtime with latest features
Next.js API Routes: Serverless API endpoints
Firebase Cloud Functions: Serverless backend (optional)

Authentication & Authorization

Firebase Authentication: Secure user authentication
GitHub OAuth: GitHub integration authentication
JWT: Token-based authentication

Database & Storage

Client-Side Storage

IndexedDB: Primary storage for analysis results
LocalStorage: User preferences and settings
SessionStorage: Temporary session data

Cloud Storage (Optional)

Firebase Firestore: NoSQL cloud database
Firebase Storage: File storage service
GitHub API: Repository data storage

Code Analysis Technologies

Parsers & AST

@babel/parser 7.28.6: JavaScript/TypeScript parsing
@babel/traverse 7.28.6: AST traversal
@babel/types 7.28.6: AST manipulation
Acorn 8.15.0: Fast JavaScript parser
Esprima 4.0.1: ECMAScript parser
ESQuery 1.7.0: CSS-like query language for AST
@lezer/python 1.1.18: Python language parser
@lezer/java 1.1.3: Java language parser
@lezer/cpp 1.1.5: C++ language parser
web-tree-sitter 0.26.3: Multi-language parser

Analysis Tools

Custom Security Analyzer: Proprietary vulnerability detection
AST Analyzer: Abstract syntax tree analysis
Data Flow Analyzer: Data flow tracking
Metrics Calculator: Code quality metrics

MCP Integration

Model Context Protocol

@modelcontextprotocol/sdk 1.27.1: Official MCP SDK for tool and resource integration
MCP Server: Full-featured MCP server with 19 security analysis tools
STDIO Transport: Command-line integration support
HTTP Transport: Web-based integration support
Memory Store: Persistent analysis result storage

MCP Tools

Scanner Agent: File and codebase scanning, secret detection, dependency analysis
DataFlow Agent: Data flow tracking and injection point identification
Metrics Agent: Security scoring and metrics calculation
ExploitSim Agent: Exploit graph building, simulation, and attack path analysis
PatchGen Agent: Automated patch generation and application
Validation Agent: Patch validation, regression testing, and confidence checking
RiskOptimizer Agent: Risk-based patch prioritization
Memory Agent: Historical analysis result queries
Pipeline Agent: Full security pipeline and quick scan workflows

Progressive Web App

PWA Technologies

Serwist 9.5.7: Service worker library for Next.js
@serwist/next 9.5.7: Next.js integration
Web App Manifest: PWA configuration
Service Workers: Offline functionality and caching
Push API: Browser push notifications
Background Sync: Offline operation queuing
Web Push 3.6.7: Push notification protocol implementation

Build & Development Tools

Build Tools

Next.js Compiler: Fast Rust-based compiler
Turbopack: Ultra-fast bundler (optional)
PostCSS 8.5.12: CSS transformations
Tailwind CSS Compiler: JIT CSS generation

Code Quality

ESLint 9.39.2: JavaScript/TypeScript linting
@typescript-eslint: TypeScript-specific rules
Prettier 3.8.1: Code formatting
Stylelint 17.0.0: CSS linting
lint-staged 16.2.7: Pre-commit linting

Testing

Vitest 4.0.18: Fast unit test framework
Jest 30.2.0: JavaScript testing framework
@testing-library/react 16.3.2: React component testing
@testing-library/jest-dom 6.9.1: Custom Jest matchers
happy-dom 20.3.9: Lightweight DOM implementation

DevOps & Deployment

CI/CD

GitHub Actions: Automated workflows
Vercel: Deployment platform
Docker: Containerization
Firebase Hosting: Static site hosting

Monitoring & Analytics

@vercel/analytics 1.6.1: Performance analytics
@vercel/speed-insights 1.3.1: Real-user monitoring
web-vitals 5.1.0: Core Web Vitals measurement
Custom Analytics: Application-specific metrics

Security Technologies

Security Libraries

Custom Secret Detection: Proprietary pattern matching
Dependency Scanner: Vulnerability detection
OWASP Rule Engine: OWASP Top 10 checks
CWE Mapper: Common Weakness Enumeration

Security Headers

Content Security Policy (CSP)
HTTP Strict Transport Security (HSTS)
X-Frame-Options
X-Content-Type-Options
X-XSS-Protection
Referrer-Policy
Permissions-Policy

AI & Machine Learning

AI Providers

OpenAI API: GPT-4, GPT-3.5-turbo
Anthropic API: Claude 3 models
Google AI: Gemini models
Custom Models: Local model support

AI Features

Natural language processing
Code understanding and explanation
Automated fix generation
Context-aware recommendations

File Processing

File Handling

JSZip 3.10.1: ZIP file processing
File API: Browser file handling
Drag & Drop API: File upload UX
Streams API: Large file processing

Export & Reporting

jsPDF 4.0.0: PDF generation
html2canvas 1.4.1: HTML to canvas conversion
JSON: Structured data export
SARIF: Static analysis format

Development Environment

Package Management

npm 9.0.0+: Node package manager
package-lock.json: Dependency locking

Version Control

Git: Source control
GitHub: Repository hosting
Husky 9.1.7: Git hooks

Code Editors

VS Code (recommended)
WebStorm
Cursor
Any text editor with TypeScript support

Getting Started

🚀 Quick Start (3 Steps)

Want to try Code Guardian immediately? Follow these three simple steps:

# 1. Clone the repository
git clone https://github.com/Xenonesis/code-guardian-report.git
cd code-guardian-report

# 2. Install dependencies
npm install

# 3. Start the development server
npm run dev

That's it! 🎉 Open http://localhost:3000 in your browser.

Note: The application works out-of-the-box with NO environment configuration required. All features work locally with mock services for development. See Optional Configuration below to enable advanced features like GitHub integration, AI analysis, and Firebase sync.

Prerequisites

Before you begin, ensure you have the following installed on your system:

Required Software

Node.js: Version 22.x (LTS recommended)
- Download from: https://nodejs.org/
- Verify installation: node --version
npm: Version 9.0.0 or higher (comes with Node.js)
- Verify installation: npm --version
Git: Latest version
- Download from: https://git-scm.com/
- Verify installation: git --version

System Requirements

Operating System: Windows 10+, macOS 10.15+, or Linux
RAM: Minimum 4GB (8GB recommended)
Disk Space: Minimum 500MB free space
Browser: Chrome 90+, Firefox 88+, Safari 14+, or Edge 90+

Installation

Step 1: Clone the Repository

# Clone via HTTPS
git clone https://github.com/Xenonesis/code-guardian-report.git

# Or clone via SSH
git clone git@github.com:Xenonesis/code-guardian-report.git

# Navigate to project directory
cd code-guardian-report

Step 2: Install Dependencies

# Install all dependencies
npm install

# Or use clean install for reproducible builds (recommended for CI/CD)
npm ci

This will install all required dependencies including:

Next.js and React
TypeScript and type definitions
UI libraries (Tailwind CSS, Radix UI, Framer Motion)
Analysis libraries (Babel, parsers)
Development tools (ESLint, Prettier, testing frameworks)

Expected output:

added ~1250 packages in 2-3m
(Actual package count and time may vary)

Step 3: Start Development Server

# Start the development server
npm run dev

Expected output:

▲ Next.js 16.1.5
- Local:        http://localhost:3000
- Ready in 3.2s

🎉 Success! The application is now running at http://localhost:3000

You can now:

Upload code files for analysis (drag & drop or file picker)
Analyze entire ZIP archives
View detailed security reports
Export results as PDF or JSON

Optional Configuration

The application works perfectly without any environment variables for local development. However, you can enable advanced features by configuring the following:

🔧 Environment Variables (All Optional)

All environment variables are optional. The app uses intelligent fallbacks and mock services in development mode.

Option 1: Start with Minimal Config

Create a .env.local file (optional, but useful for customization):

# Copy the example file
cp .env.example .env.local

Option 2: Use Default Behavior

Simply run npm run dev without any .env.local file. The app will:

Use mock Firebase services (no cloud features needed)
Run all code analysis locally in your browser
Work completely offline as a Progressive Web App

🌐 GitHub Integration (Optional)

When to configure: If you want to analyze GitHub repositories directly without cloning them.

Steps:

Go to GitHub Settings → Developer settings → OAuth Apps
Click "New OAuth App"
Configure:
- Application name: Code Guardian Local Dev
- Homepage URL: http://localhost:3000
- Authorization callback URL: http://localhost:3000/api/auth/github/callback
Copy the Client ID and Client Secret
Add to .env.local:

NEXT_PUBLIC_GITHUB_CLIENT_ID=your_github_client_id_here
GITHUB_CLIENT_SECRET=your_github_client_secret_here
NEXT_PUBLIC_GITHUB_REDIRECT_URI=http://localhost:3000/api/auth/github/callback

🤖 AI-Powered Features (Optional)

When to configure: If you want AI-generated fix suggestions and natural language explanations.

Choose one or more AI providers:

# OpenAI (GPT-4, GPT-3.5)
OPENAI_API_KEY=sk-...your_key_here

# Anthropic Claude (Claude 3 Opus, Sonnet)
ANTHROPIC_API_KEY=sk-ant-...your_key_here

# Google Gemini (Gemini Pro)
GEMINI_API_KEY=AI...your_key_here

Get API keys:

OpenAI: https://platform.openai.com/api-keys
Anthropic: https://console.anthropic.com/
Google Gemini: https://makersuite.google.com/app/apikey

☁️ Firebase Configuration (Optional)

When to configure: If you want cloud storage, authentication, and cross-device sync.

Steps:

Create a Firebase project at https://console.firebase.google.com/
Go to Project Settings → General → Your apps
Click "Add app" → Web (</>) icon
Copy the configuration values
Add to .env.local:

NEXT_PUBLIC_FIREBASE_API_KEY=AIza...your_key_here
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abc123

Enable Firebase services (optional):

# Install Firebase CLI
npm install -g firebase-tools

# Login and initialize
firebase login
firebase init

# Select features you want:
# ☑ Firestore (cloud database)
# ☑ Storage (file storage)
# ☑ Hosting (deployment)

🔌 MCP Integration (Optional)

When to configure: If you want to use the Model Context Protocol (MCP) server for IDE integration and AI-powered development environments.

MCP Server Setup:

# Build the MCP server
npm run mcp:build

# Run via STDIO (for VS Code integration)
npm run mcp:stdio

# Run via HTTP (for web-based integrations)
npm run mcp:http

# Development mode with hot reload
npm run mcp:dev

# Inspect MCP server
npm run mcp:inspect

VS Code Integration:

Install GitHub Copilot Chat extension
Configure MCP server in VS Code settings:

{
  "mcp.servers": {
    "code-guardian": {
      "command": "node",
      "args": ["dist/mcp/mcp/transports/stdio.js"],
      "cwd": "/path/to/code-guardian-report"
    }
  }
}

For detailed MCP usage instructions, see MCP_TOOLS_REFERENCE.md.

📊 Analytics (Optional)

When to configure: If you want to track usage analytics.

# Google Analytics
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

# Vercel Analytics (automatically enabled on Vercel deployments)
NEXT_PUBLIC_ANALYTICS_ENABLED=true

Complete `.env.local` Example

See the included .env.example file for a comprehensive list of all 140+ configurable options with detailed comments. Copy and customize as needed:

cp .env.example .env.local
# Edit .env.local with your preferred text editor

Development

Running the Development Server

# Standard development server (recommended)
npm run dev

# Faster development with Turbopack (experimental)
npm run dev:turbo

Access the application:

Local: http://localhost:3000
Network: Will be displayed in terminal (e.g., http://192.168.1.100:3000)

Development Features

Hot Module Replacement (HMR): Instant updates without page reload
Fast Refresh: Preserves component state during edits
TypeScript Type Checking: Real-time type error detection in terminal
ESLint Integration: Code quality warnings and errors
Error Overlay: Detailed error messages in browser
Source Maps: Debug original TypeScript code in browser DevTools

Development Workflow

Make changes to any file in src/, app/, or components/
Save the file - changes appear instantly in browser
Check terminal for any TypeScript or linting errors
Test in browser - use DevTools for debugging
Run tests with npm run test:watch in a separate terminal

Available Scripts

# Development
npm run dev              # Start development server
npm run dev:turbo        # Start with Turbopack (faster)

# Building
npm run build            # Production build
npm run build:prod       # Build with all checks
npm run build:analyze    # Build with bundle analysis

# Quality Checks
npm run lint             # Run ESLint
npm run lint:fix         # Fix ESLint issues
npm run lint:css         # Run Stylelint
npm run lint:css:fix     # Fix Stylelint issues
npm run format           # Format code with Prettier
npm run type-check       # TypeScript type checking
npm run type-check:watch # Watch mode type checking

# Testing
npm run test             # Run tests
npm run test:watch       # Watch mode
npm run test:coverage    # Generate coverage report
npm run test:ui          # Interactive test UI

# CI/CD
npm run ci:validate      # Run all validation checks
npm run ci:build         # CI build with validation

# Deployment
npm run start            # Start production server
npm run deploy:vercel    # Deploy to Vercel
npm run deploy:preview   # Deploy preview to Vercel

# Docker
npm run docker:build     # Build Docker image
npm run docker:run       # Run Docker container

# Utilities
npm run clean            # Clean build artifacts
npm run clean:all        # Clean all generated files
npm run health-check     # Check application health
npm run update-contributors  # Update contributors list

Production Build

Build for Production

# Full production build with all checks
npm run build:prod

This command will:

Clean previous builds
Run linting checks
Perform type checking
Run tests
Build optimized production bundle
Generate static assets

Build Output

The production build creates:

.next/: Next.js build output
.next/static/: Static assets (JS, CSS, images)
.next/server/: Server-side code
public/: Public static files

Analyze Bundle Size

# Build and analyze bundle
npm run build:analyze

This opens an interactive bundle analyzer showing:

Bundle sizes by route
Package sizes
Duplicate dependencies
Optimization opportunities

Start Production Server

# Start production server
npm run start

# Or with custom port
PORT=3001 npm run start

Troubleshooting

Common Setup Issues

1. `npm install` fails with permission errors

Problem: Permission denied when installing packages

Solution:

# On Linux/Mac - DO NOT use sudo with npm
# Instead, fix npm permissions:
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH

# Add to your shell profile (~/.bashrc or ~/.zshrc):
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

# On Windows - Run terminal as Administrator or check folder permissions

2. Port 3000 already in use

Problem: Error: listen EADDRINUSE: address already in use :::3000

Solution:

# Option 1: Kill process using port 3000
# On Mac/Linux:
lsof -ti:3000 | xargs kill -9

# On Windows:
netstat -ano | findstr :3000
taskkill /PID <PID> /F

# Option 2: Use a different port
PORT=3001 npm run dev

3. Module not found errors after `git pull`

Problem: Module not found: Can't resolve 'package-name'

Solution:

# Clean install dependencies
rm -rf node_modules package-lock.json
npm install

4. TypeScript errors during development

Problem: Type errors in terminal or IDE

Solution:

# Run type check to see all errors
npm run type-check

# Restart TypeScript server in VS Code
# Press: Cmd/Ctrl + Shift + P
# Type: "TypeScript: Restart TS Server"

5. App shows blank page or crashes on load

Problem: White screen or error boundary in browser

Solution:

# 1. Check browser console for errors (F12)
# 2. Clear Next.js cache
npm run clean

# 3. Rebuild
npm run dev

# 4. Check if you have the correct Node.js version
node --version  # Should be 22.x

# 5. Try in a different browser

6. Firebase/GitHub features not working

Problem: Firebase or GitHub integration shows errors

Solution:

# For Firebase - Check if all variables are set in .env.local
# The app works without Firebase - it uses mock services in development

# For GitHub - Verify OAuth credentials
# Check that callback URL matches: http://localhost:3000/api/auth/github/callback

# Both features are OPTIONAL - the core app works without them

7. Build fails with "out of memory" error

Problem: FATAL ERROR: Reached heap limit Allocation failed

Solution:

# Increase Node.js memory limit
export NODE_OPTIONS="--max-old-space-size=4096"
npm run build

# Or add to package.json scripts:
# "build": "NODE_OPTIONS='--max-old-space-size=4096' next build"

8. ESLint or Prettier conflicts

Problem: Formatting or linting errors

Solution:

# Auto-fix most issues
npm run lint:fix
npm run format

# If conflicts persist, check IDE settings
# VS Code: Ensure ESLint and Prettier extensions are installed

Getting Help

If you encounter issues not covered here:

Check existing issues: https://github.com/Xenonesis/code-guardian-report/issues
Search discussions: https://github.com/Xenonesis/code-guardian-report/discussions
Open a new issue: Use our issue templates with:
- Your Node.js version (node --version)
- Your npm version (npm --version)
- Operating system
- Complete error message
- Steps to reproduce
Read the docs: Check the complete documentation

Verification Checklist

Use this checklist to verify your setup is working correctly:

Node.js 22.x is installed (node --version)
npm 9+ is installed (npm --version)
Dependencies installed successfully (npm install completed without errors)
Development server starts (npm run dev shows "Ready")
App loads at http://localhost:3000 (home page displays)
Can upload a file for analysis (drag & drop or file picker works)
Analysis completes and shows results
No errors in browser console (F12)
No errors in terminal where npm run dev is running

✅ All checked? You're ready to start using Code Guardian!

Usage Guide

Analysis Process

Code Analysis

Upload Methods

Method 1: File Upload (ZIP)

Prepare Your Code:
- Create a ZIP archive of your project
- Recommended structure: Include source code directories only
- Maximum file size: 100MB
- Maximum files: 1000
Upload Process:
- Navigate to the home page
- Click on "Upload ZIP File" tab
- Drag and drop your ZIP file or click to browse
- Wait for automatic extraction and analysis
Supported Formats:
- .zip archives
- Nested directories supported
- All text-based source files

Method 2: GitHub Repository

Connect GitHub Account:
- Click "GitHub Analysis" in navigation
- Click "Connect GitHub"
- Authorize Code Guardian Report
- Grant repository access permissions
Select Repository:
- Browse your repositories
- Select the repository to analyze
- Choose branch (default: main)
- Click "Analyze Repository"
Repository Requirements:
- Public or private repositories (with proper permissions)
- Any programming language
- Any size (analysis runs client-side)

Analysis Process

The analysis pipeline follows these steps:

File Extraction: Unzip and validate files
Language Detection: Identify programming languages
Framework Detection: Detect frameworks and libraries
Parsing: Generate Abstract Syntax Trees (AST)
Security Analysis: Run vulnerability detection rules
Secret Scanning: Search for exposed credentials
Dependency Analysis: Check for vulnerable dependencies
Metrics Calculation: Compute code quality metrics
Report Generation: Create comprehensive reports

Real-Time Feedback

During analysis, you'll see:

Progress bar showing completion percentage
Current file being analyzed
Number of issues found (updated in real-time)
Estimated time remaining

GitHub Integration

GitHub Features

Setting Up GitHub Integration

Create OAuth App:

GitHub Settings → Developer settings → OAuth Apps → New OAuth App

Configuration:
- Application name: Your app name
- Homepage URL: https://your-domain.com
- Callback URL: https://your-domain.com/api/auth/github/callback

Add Credentials:

NEXT_PUBLIC_GITHUB_CLIENT_ID=your_client_id
GITHUB_CLIENT_SECRET=your_client_secret

Using GitHub Features

Repository Analysis

// Programmatic usage example
import { GitHubRepositoryService } from "@/services/githubRepositoryService";

const service = new GitHubRepositoryService(accessToken);

// List repositories
const repos = await service.listRepositories();

// Analyze repository
const result = await service.analyzeRepository({
  owner: "username",
  repo: "repository",
  branch: "main",
});

Batch Analysis

Analyze multiple repositories:

Select multiple repositories from the list
Click "Analyze Selected"
View comparative results

Repository Comparison

Compare security posture across repositories:

Navigate to "Repository Comparison" tab
Select repositories to compare
View side-by-side metrics
Export comparison report

Report Generation

PDF Reports

Generate PDF Report

Complete code analysis
Click "Export" button
Select "PDF Report"
Choose report template:
- Executive Summary: High-level overview
- Detailed Analysis: Complete findings
- Compliance Report: Regulatory compliance focus
- Technical Report: Deep technical details

PDF Contents

The PDF report includes:

Cover page with project information
Executive summary with key metrics
Vulnerability breakdown by severity
Detailed findings with code snippets
Remediation recommendations
Trend analysis charts
OWASP mapping
CWE references
Compliance checklist

Customization

Customize PDF reports:

import { PDFExportService } from "@/services/export/pdfExportService";

const pdfService = new PDFExportService();

const options = {
  includeExecutiveSummary: true,
  includeCodeSnippets: true,
  includeCharts: true,
  includeRecommendations: true,
  template: "detailed",
  orientation: "portrait",
  pageSize: "A4",
};

await pdfService.generateReport(analysisResults, options);

JSON Exports

Export analysis data in JSON format for:

API integration
Custom reporting tools
Data warehousing
CI/CD pipelines

{
  "id": "analysis-uuid",
  "timestamp": "2025-01-31T00:00:00.000Z",
  "metadata": {
    "projectName": "My Project",
    "version": "1.0.0",
    "analysisType": "full"
  },
  "summary": {
    "totalFiles": 250,
    "totalLines": 50000,
    "totalIssues": 45,
    "criticalIssues": 5,
    "highIssues": 12,
    "mediumIssues": 20,
    "lowIssues": 8,
    "securityScore": 78,
    "qualityScore": 85
  },
  "languages": [
    {
      "name": "TypeScript",
      "percentage": 65,
      "files": 150,
      "lines": 32500
    }
  ],
  "issues": [
    {
      "id": "issue-1",
      "type": "vulnerability",
      "severity": "critical",
      "title": "SQL Injection vulnerability",
      "description": "...",
      "file": "src/api/users.ts",
      "line": 45,
      "column": 12,
      "cwe": "CWE-89",
      "owasp": "A03:2021-Injection",
      "recommendation": "..."
    }
  ]
}

SARIF Export

Export in SARIF format for CI/CD integration:

GitHub Code Scanning integration
GitLab Security Dashboard
Azure DevOps
Jenkins plugins

{
  "$schema": "https://json.schemastore.org/sarif-2.1.0.json",
  "version": "2.1.0",
  "runs": [
    {
      "tool": {
        "driver": {
          "name": "Code Guardian Report",
          "version": "11.0.0",
          "informationUri": "https://github.com/Xenonesis/code-guardian-report"
        }
      },
      "results": []
    }
  ]
}

AI-Powered Features

Natural Language Descriptions

Transform technical security findings into plain English:

Before (Technical):

CWE-79: Improper Neutralization of Input During Web Page Generation

After (Natural Language):

Your application is vulnerable to Cross-Site Scripting (XSS) attacks.
This means an attacker could inject malicious JavaScript code that runs
in users' browsers, potentially stealing their data or performing
actions on their behalf.

AI Fix Suggestions

Get automated remediation code:

Original Vulnerable Code:

const query = `SELECT * FROM users WHERE id = ${userId}`;
db.execute(query);

AI-Suggested Fix:

const query = "SELECT * FROM users WHERE id = ?";
db.execute(query, [userId]);

// Or using ORM (recommended):
const user = await User.findById(userId);

Explanation: The AI provides:

Secure code replacement
Multiple fix options
Framework-specific solutions
Best practice recommendations
Security considerations

Chatbot Interaction

Interact with the AI assistant:

Example Conversations:

User: Why is this XSS vulnerability marked as critical?

AI: This XSS vulnerability is marked as critical because:
1. It occurs in user-facing functionality
2. User input is directly rendered without sanitization
3. It could lead to session hijacking
4. Admin users are affected, increasing impact
5. It's exploitable without authentication

Recommended priority: Immediate fix required.

User: How do I fix the CSRF vulnerability in my Express app?

AI: To fix CSRF in Express.js:

1. Install csurf middleware:
   npm install csurf

2. Add to your app:
   const csrf = require('csurf');
   app.use(csrf({ cookie: true }));

3. Add CSRF token to forms:
   <input type="hidden" name="_csrf" value="<%= csrfToken %>">

4. Include token in AJAX requests:
   headers: { 'CSRF-Token': token }

Would you like me to show you a complete example?

Configuring AI Features

AI Configuration

Configure AI providers in your environment:

# OpenAI Configuration
OPENAI_API_KEY=sk-...
OPENAI_MODEL=gpt-4
OPENAI_MAX_TOKENS=2000

# Anthropic Configuration
ANTHROPIC_API_KEY=sk-ant-...
ANTHROPIC_MODEL=claude-3-opus-20240229

# Google AI Configuration
GOOGLE_AI_API_KEY=...
GOOGLE_AI_MODEL=gemini-pro

# AI Feature Toggles
NEXT_PUBLIC_ENABLE_AI_DESCRIPTIONS=true
NEXT_PUBLIC_ENABLE_AI_FIXES=true
NEXT_PUBLIC_ENABLE_AI_CHATBOT=true

Multi-Language Support

Supported Languages

Code Guardian supports comprehensive analysis for 15+ programming languages:

1. JavaScript/ECMAScript

Supported Versions: ES5, ES6+, ES2015-ES2024
Frameworks Detected: React, Vue, Angular, Svelte, Node.js, Express, Next.js
File Extensions: .js, .mjs, .cjs, .jsx

Security Checks:

XSS vulnerabilities
Prototype pollution
eval() usage
Insecure randomness
Hardcoded credentials
SQL injection (in database queries)
Command injection
Path traversal
SSRF vulnerabilities
Insecure dependencies