AI Meme Generator for SitecoreAI

A Next.js application built for the Sitecore Marketplace that uses Google's Gemini AI to generate custom memes. This app seamlessly integrates with Sitecore's Marketplace SDK, allowing users to create fun, personalized memes by combining popular meme templates with faces of Sitecore team members.

Table of Contents

• What This App Does
• Features
• Screenshots
• Prerequisites
• Setup
• Technology Stack
• How to Use
• How It Works
• Project Structure
• Environment Variables
• Adding More Content
• Troubleshooting
• Contributing
• API Usage and Limits
• Deployment
• License
• Author
• Acknowledgments
• Support

What This App Does

The AI Meme Generator is a creative tool designed for the Sitecore community that:

• Creates Custom Memes: Automatically replaces faces in popular meme templates with the faces of selected people
• Uses Advanced AI: Leverages Google's Gemini 2.5 Flash Image model for realistic face swapping while preserving the original meme's text, style, and composition
• Integrates with Sitecore Marketplace: Built using the Sitecore Marketplace SDK for seamless integration within the Sitecore ecosystem
• Provides Instant Results: Generates memes in seconds with immediate preview

Perfect for creating team humor, celebrating achievements, or adding personality to Sitecore community events!

Features

• Select from pre-loaded popular meme templates (Disaster Girl, Distracted Boyfriend, Success Kid)
• Choose from Sitecore team members' photos
• AI-powered face replacement that maintains natural lighting and expressions
• Preview selected images before generating
• Modern, responsive UI built with shadcn/ui components
• Full integration with Sitecore Marketplace SDK

Screenshots

Main Interface

Mobile View

Generating Meme

Generated Result

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js: Version 18.x or higher (Download Node.js)
• npm: Version 9.x or higher (comes with Node.js)
• Google Gemini API Key: Required for AI image generation (see setup below)

To check your Node.js and npm versions:

node --version
npm --version

Setup

1. Install Dependencies

npm install

2. Configure Google Gemini API Key

This app requires a Google Gemini API key to generate memes using AI.

Get Your API Key:

1. Visit Google AI Studio
2. Sign in with your Google account
3. Click "Get API Key" or "Create API Key"
4. Copy your API key

Set Up Environment Variables:

1. Create the environment file:

   # On macOS/Linux
   cp .env.example .env.local
   
   # On Windows (PowerShell)
   Copy-Item .env.example .env.local
   
   # Or create manually
   # Create a new file named .env.local in the project root

2. Add your API key to .env.local:

   GOOGLE_GENAI_API_KEY=your_actual_api_key_here

3. Verify the file:

   • ✅ File should be named exactly .env.local
   • ✅ Should be in the project root directory (same level as package.json)
   • ✅ Should contain your actual API key (not the placeholder text)
   • ✅ Should NOT be committed to git (already in .gitignore)

Security Notes:

• Never commit your .env.local file to version control
• Never share your API key publicly
• If you accidentally expose your key, revoke it immediately in Google AI Studio and generate a new one
• The .env.local file is already included in .gitignore to prevent accidental commits

3. Run the Development Server

npm run dev

4. Open the App

Navigate to http://localhost:3000 in your browser

Technology Stack

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe development
• Google Gemini AI - Gemini 2.5 Flash Image model for image generation and editing
• Sitecore Marketplace SDK - Integration with Sitecore XM Cloud marketplace
• shadcn/ui - Beautiful, accessible UI components
• Tailwind CSS - Utility-first CSS framework

How to Use

1. Select a meme template from the available options (left panel)
2. Choose a person whose face you want to use (right panel)
3. Click "Generate Meme" and wait for the AI to process
4. Preview your meme in the results section
5. Save your meme by right-clicking and selecting "Save image as..."

How It Works

The app uses Google's Gemini 2.5 Flash Image model to perform AI-powered image editing with intelligent face swapping:

1. Selection: User selects a meme template and a person from the gallery
2. Preview: Selected images are displayed for review
3. API Request: The frontend sends both image paths to the /api/generate-meme endpoint
4. Image Processing: The API reads the images from the public/ folder and encodes them to base64
5. AI Generation: Images are sent to Google's Gemini AI with a carefully crafted prompt that instructs the model to:
   • Replace the face in the meme with the selected person's face
   • Preserve the person's exact facial features, skin tone, hair, and unique characteristics
   • Keep all text, background, and other meme elements unchanged
   • Match lighting and angles naturally
6. Response: The generated image is returned and displayed in the UI

Project Structure

marketplace-hackerspace-meme-generator/
|-- app/
|   |-- api/
|   |   `-- generate-meme/
|   |       `-- route.ts          # API endpoint for Gemini AI
|   |-- globals.css               # Global styles and theme variables
|   |-- layout.tsx                # Root layout with metadata
|   `-- page.tsx                  # Main application page
|-- components/
|   |-- meme-generator.tsx        # Main meme generator UI component
|   |-- providers/
|   |   `-- marketplace.tsx       # Sitecore Marketplace SDK provider
|   `-- ui/                       # shadcn/ui components (Button, Card, etc.)
|-- lib/
|   `-- utils.ts                  # Utility functions (cn helper)
|-- public/
|   |-- memes/                    # Meme template images
|   `-- people/                   # Photos of team members
|-- .env.local                    # Environment variables (create this!)
|-- .env.example                  # Example environment variables template
|-- .gitignore                    # Git ignore rules
|-- package.json                  # Dependencies and scripts
|-- tsconfig.json                 # TypeScript configuration
`-- README.md                     # This file

Environment Variables

The following environment variables are required:

• GOOGLE_GENAI_API_KEY - Your Google Gemini API key for AI image generation

Adding More Content

Adding New Meme Templates

1. Place new meme images in the public/memes/ folder
2. Update the memeFiles array in components/meme-generator.tsx

Adding New People

1. Place new photos in the public/people/ folder
2. Update the peopleFiles array in components/meme-generator.tsx

Troubleshooting

API Key Issues

Problem: "GOOGLE_GENAI_API_KEY not configured" error

Solutions:

• Verify .env.local file exists in the project root
• Check that the file contains GOOGLE_GENAI_API_KEY=your_actual_key
• Restart the development server after creating/modifying .env.local
• Ensure there are no spaces around the = sign
• Verify your API key is valid in Google AI Studio

Generation Failures

Problem: Meme generation fails or produces unexpected results

Solutions:

• Ensure both a meme and person are selected
• Check your internet connection (API requires network access)
• Verify your Google Gemini API key has not exceeded rate limits
• Try a different meme/person combination
• Check the browser console for detailed error messages

Development Server Issues

Problem: Cannot start the development server

Solutions:

# Clear Next.js cache
rm -rf .next

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

# Try running again
npm run dev

Image Not Displaying

Problem: Selected images or generated memes don't display

Solutions:

• Verify image files exist in public/memes/ and public/people/ folders
• Check browser console for 404 errors
• Ensure file paths in the code match actual file names (case-sensitive)
• Clear browser cache and hard reload (Ctrl+Shift+R or Cmd+Shift+R)

Contributing

Contributions are welcome! Here's how you can help:

• Update documentation if needed
• Keep commits atomic and well-described

API Usage and Limits

This application uses the Google Gemini API which has usage limits:

• Free tier: 15 requests per minute (RPM)
• Rate limiting: API calls may be throttled if limits are exceeded
• Quota: Check your quota in Google AI Studio

For production use, consider:

• Implementing rate limiting on the client side
• Adding request caching
• Upgrading to a paid tier for higher limits
• Adding error handling for quota exceeded scenarios

Deployment

Deploy to Vercel

The easiest way to deploy this Next.js app:

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add environment variable: GOOGLE_GENAI_API_KEY=your_key
4. Deploy!

Deploy to Other Platforms

This app can be deployed to any platform that supports Next.js:

• Netlify: Use the Next.js runtime
• AWS Amplify: Configure build settings for Next.js
• Azure Static Web Apps: Use the Next.js custom handler
• Self-hosted: Run npm run build and npm start

Important: Always set the GOOGLE_GENAI_API_KEY environment variable in your deployment platform.

License

MIT License - see the LICENSE file for details

Author

Robbert Hock
AI Solutions Architect at uxbee | 16× Sitecore MVP (2010–2025) 🥇 | Digital Experience & AI Innovation

• LinkedIn: linkedin.com/in/robberthock
• GitHub: github.com/rhockUxbee

Acknowledgments

• Built for the Sitecore community
• Powered by Google's Gemini AI
• UI components from shadcn/ui
• Sitecore Marketplace SDK integration

Support

If you encounter any issues or have questions:

1. Check the Troubleshooting section
2. Search existing GitHub Issues
3. Create a new issue with detailed information about your problem

---

Made with ❤️ for the Sitecore community