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)

npm install -g aem-component-generator

Local Installation

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

Prerequisites

1. Google Gemini API Key - Get one from Google AI Studio
2. Node.js 16+
3. AEM Project - Works with AEM Maven Archetype projects

Quick Start

1. Set your Gemini API Key:

   # Windows PowerShell
   $env:GEMINI_API_KEY="your-api-key-here"
      
   # macOS/Linux
   export GEMINI_API_KEY="your-api-key-here"

2. Generate a component:

   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

# 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

# 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