frontend-ai-review

Frontend AI Review 🤖

AI-powered code review tool for frontend developers

✨ Features

🚀 Quick Start

Installation

# Install globally with npm
npm install -g frontend-ai-review

# Or use npx
npx frontend-ai-review /path/to/project

Local Usage

# Clone the project
git clone https://github.com/Yulingsong/frontend-ai-review.git
cd frontend-ai-review

# Install dependencies
npm install

# Build
npm run build

# Run
node dist/index.js /path/to/project

📖 CLI Options

📄 Configuration File

Create .fairrc.json in your project root:

{
  "severity": "warning",
  "output": "text",
  "exclude": [
    "node_modules/**",
    "dist/**",
    "build/**",
    ".next/**"
  ],
  "category": [
    "react",
    "vue",
    "typescript",
    "security"
  ],
  "ai": false,
  "aiModel": "gpt-4o-mini",
  "aiProvider": "openai"
}

🤖 AI Analysis

Supports multiple AI providers:

# OpenAI (default)
export OPENAI_API_KEY=sk-your-key
fair /path/to/project --ai

# Anthropic Claude
export ANTHROPIC_API_KEY=sk-ant-your-key
fair /path/to/project --ai --ai-provider anthropic

# Google Gemini
export GEMINI_API_KEY=your-gemini-key
fair /path/to/project --ai --ai-provider gemini

# Azure OpenAI
export AZURE_OPENAI_API_KEY=your-key
fair /path/to/project --ai --ai-provider azure --azure-endpoint https://your-resource.openai.azure.com

# Cohere
export COHERE_API_KEY=your-key
fair /path/to/project --ai --ai-provider cohere

# Mistral
export MISTRAL_API_KEY=your-key
fair /path/to/project --ai --ai-provider mistral

# Alibaba Qwen
export QWEN_API_KEY=your-key
fair /path/to/project --ai --ai-provider qwen

🔧 Auto-Fix

Automatically fix fixable issues:

fair /path/to/project --fix

Supported Rules

⚡ Performance

# Parallel analysis - recommended for large projects
fair /path/to/project --parallel

# Incremental caching - skip unchanged files
fair /path/to/project --cache

# Git-based incremental analysis
fair /path/to/project --git --staged
fair /path/to/project --git --branch main
fair /path/to/project --git --since HEAD~3

🚀 CI/CD Integration

GitHub Actions

name: Frontend AI Code Review
on: [push, pull_request]
jobs:
  code-review:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - name: Run Code Review
        run: npx fair . -s warning -o github
        env:
          OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}

GitLab CI

See .gitlab-ci/.gitlab-ci.yml

Jenkins

See .jenkins/Jenkinsfile

📊 Output Example

🤖 Frontend AI Review v2.2.0
──────────────────────────────────────────────────
Framework: react
Severity: suggestion
Rules: 47 enabled

Found 25 files to analyze

📁 src/App.tsx
────────────────────────────────────────────────────────────
🟡 react/exhaustive-deps line 23
   useEffect dependency array may be incomplete

🔴 security/hardcoded-credentials line 5
   Hardcoded credentials detected

🔵 perf/console-log line 10 💡 Fixable: Delete this line

📊 Summary
────────────────────────────────────────────────────────────
Files: 25 | Analyzed: 25 | Issues: 8
   Errors: 2
   Warnings: 8
   Suggestions: 5

📈 By Category
   security: 2
   react: 3
   best-practice: 3

📦 Built-in Rules (47+)

🔴 React (10)

💚 Vue (6)

💙 TypeScript (6)

🔒 Security (8)

⚡ Performance (7)

📝 Best Practice (10)

🛠️ Development

# Clone
git clone https://github.com/Yulingsong/frontend-ai-review.git
cd frontend-ai-review

# Install
npm install

# Dev mode
npm run dev

# Build
npm run build

# Test
npm run test

🤝 Contributing

Issues and Pull Requests are welcome!

📝 License

MIT License

🏆 Credits

• Babel - JavaScript compiler
• Picocolors - Terminal colors
• Glob - File matching