aem-component-generator/README.md

AI-powered AEM component generator that creates React components, Sling models, dialogs, and comprehensive test suites using Google Gemini AI

# AEM Component Generator

🚀 **AI-powered AEM component generator** that creates complete Adobe Experience Manager components with React/TypeScript frontend, Java Sling models, AEM dialogs, and comprehensive test suites using Google Gemini AI.

## Features

✨ **Complete Component Generation:**
- React/TypeScript components with SCSS styling
- Java Sling Models with proper annotations
- AEM Touch UI dialogs
- HTL (HTML Template Language) templates

🧪 **Comprehensive Testing:**
- Frontend unit tests (Jest + React Testing Library)
- Storybook stories for interactive documentation
- Backend unit tests (JUnit 5 + Mockito)
- Integration tests with AEM Testing Client

🤖 **AI-Powered:**
- Uses Google Gemini AI to intelligently parse component requirements
- Generates appropriate field types and validation
- Creates realistic test data and scenarios

## Installation

### Global Installation (Recommended)

```bash
npm install -g aem-component-generator
```

### Local Installation

```bash
npm install aem-component-generator
npx aem-component-generator "your component description"
```

## Prerequisites

1. **Google Gemini API Key** - Get one from [Google AI Studio](https://makersuite.google.com/app/apikey)
2. **Node.js 16+**
3. **AEM Project** - Works with AEM Maven Archetype projects

## Quick Start

1. **Set your Gemini API Key:**
   ```bash
   # Windows PowerShell
   $env:GEMINI_API_KEY="your-api-key-here"
   
   # macOS/Linux
   export GEMINI_API_KEY="your-api-key-here"
   ```

2. **Generate a component:**
   ```bash
   aem-gen "Hero Banner with title, subtitle, background image, and CTA button"
   ```

3. **View generated files:**
   ```
   ui.frontend/src/main/webpack/components/heroBanner/
   ui.apps/src/main/content/jcr_root/apps/myproject/components/heroBanner/
   core/src/main/java/com/myproject/core/models/
   # ... plus comprehensive test files
   ```

## Examples

### Simple Components
```bash
# Product card
aem-gen "Product Card with image, title, price, and description"

# Contact form
aem-gen "Contact Form with name, email, phone, and message fields"
```

### Complex Components
```bash
# News article with rich content
aem-gen "News Article with title, author, publish date, content, featured image, and tags"

# User profile with avatar
aem-gen "User Profile Card with avatar, name, email, role, bio, and social links"
```

## Generated Structure

The generator creates a complete AEM component following Maven archetype standards:

```
your-aem-project/
├── ui.frontend/src/
│   ├── main/webpack/components/{componentName}/
│   │   ├── {ComponentName}.tsx     # React component
│   │   └── {ComponentName}.scss    # Styles
│   └── test/components/{componentName}/
│       ├── {ComponentName}.test.tsx    # Unit tests
│       └── {ComponentName}.stories.tsx # Storybook stories
├── ui.apps/src/main/content/jcr_root/apps/myproject/components/{componentName}/
│   ├── _cq_dialog/.content.xml     # AEM dialog
│   └── {componentName}.html        # HTL template
├── core/src/
│   ├── main/java/{package}/{ComponentName}.java    # Sling model
│   └── test/java/{package}/{ComponentName}Test.java # Unit tests
└── it.tests/src/main/java/{package}/it/{ComponentName}IT.java # Integration tests
```

## Troubleshooting

### Common Issues

**API Key Not Set**
```
Error: GEMINI_API_KEY environment variable is not set.
```
Solution: Set your Gemini API key as shown in Quick Start.

**Network/SSL Issues**
```
TypeError: fetch failed
```
Solution: For corporate networks, set `NODE_TLS_REJECT_UNAUTHORIZED=0`

**API Rate Limiting**
```
The model is overloaded. Please try again later.
```
Solution: Wait a moment and retry, or try during off-peak hours.

## License

MIT