AIImageGenerator.Optimizely 1.0.2

AI Image Generator for Optimizely Commerce 14

A powerful extension that brings AI-powered image generation directly into your Optimizely Commerce 14 product editing experience.

Features

• ✨ AI-Powered Image Generation - Generate professional product images using AI, based in you current product image, product name and description
• 🚀 Easy Installation - Simple NuGet package installation
• 📱 Modern UI - Beautiful, responsive interface integrated into Commerce edit mode

Requirements

• Optimizely Commerce 14.x
• Optimizely CMS 12.x
• .NET 6.0 or higher
• Active AI Image Generation API subscription

Installation

Step 1: Install NuGet Package

dotnet add package AIImageGenerator.Optimizely

Or via Package Manager Console:

Install-Package AIImageGenerator.Optimizely

Step 2: Configure API Key

Add the following configuration to your appsettings.json:

{
  "AIImageGenerator": {
    "ApiKey": "your-api-key-here"
  }
}

Step 3: Add Property to Product Content Type

Add the following property to your ProductContent model:

using System.ComponentModel.DataAnnotations;
using EPiServer.Core;

namespace YourProject.Models.Catalog
{
    public class YourProductContent : ProductContent
    {
        [Display(
            Name = "AI Generated Image",
            Description = "Generate AI-powered product images",
            GroupName = SystemTabNames.Content,
            Order = 100)]
        [UIHint("AIImageGenerator")]
        public virtual string AIGeneratedImage { get; set; }
    }
}

Step 4: Build and Run

1. Build your solution
2. Clear browser cache
3. Navigate to Commerce → Catalogs → [Your Product]
4. The AI Image Generator widget will appear in your product edit view

Usage

1. Open a Product - Navigate to any product in Commerce Manager
2. Locate the AI Image Generator - Find the "AI Generated Image" property
3. Click "Generate Image" - Wait for the AI to create your image
4. Review & Save - Preview the generated image and save your product

Customization

Change the Widget Appearance

Modify the styles in ClientResources/Scripts/AIImageGeneratorWidget.js (lines with .ai- CSS classes).

Add Additional Fields

Extend the ImageGenerationRequest model in Models/ImageGenerationRequest.cs.

Troubleshooting

Widget Not Appearing

1. Clear browser cache and do a hard refresh (Ctrl+F5)
2. Check module.config is properly loaded
3. Verify UIHint is correctly set to "AIImageGenerator"
4. Check browser console for JavaScript errors

API Key Errors

1. Verify appsettings.json contains the correct API key
2. Check configuration path: AIImageGenerator:ApiKey
3. Restart application after changing appsettings.json

Image Not Generating

1. Check browser network tab for failed requests
2. Review application logs for detailed error messages
3. Verify product has a primary image (required for generation)
4. Test API endpoint directly with Postman/cURL

Authorization Issues

The extension requires one of these roles:

• WebEditors
• WebAdmins
• Administrators

Ensure the current user has appropriate permissions.

Support

For support, please contact:

• Email: support@genieai.com
• Documentation: https://www.genieai.com/ai-image-generator

License

Commercial License - © 2025 GenieAI. All rights reserved.

Changelog

Version 1.0.0

• Initial release
• AI image generation integration
• Lifestyle image blending
• Custom prompt support
• Secure API key management