Imagiterate

AI-powered image iteration tool for Contentful

Generate image variations using AI directly within your Contentful workflow

---

🎨 Overview

Imagiterate is a Contentful app that enables content creators to generate AI-powered image variations directly within the Contentful editor. Using Replicate's AI models, users can iterate on images by simply describing the changes they want, making it easy to create multiple versions of assets without leaving Contentful.

Key Features

• ✨ AI-Powered Generation - Create image variations using natural language prompts
• 🎯 Integrated Workflow - Works seamlessly within Contentful's field editor
• 📸 Asset Management - Automatically saves generated images as Contentful assets
• 🔄 Iterative Process - Build on previous iterations to refine your images
• ⚡ Fast & Easy - Simple interface, no external tools needed
• 🔒 Secure - API keys stored securely as instance parameters

📸 Screenshots

See Imagiterate in action:

Field Editor

The Imagiterate field editor integrated into Contentful, showing a selected image with options to iterate or remove.

AI Generation Dialog

The AI-powered dialog where users can describe desired changes and generate image variations in real-time.

Generated Result

Preview of the AI-generated image variation based on the user's prompt.

Saving Generated Asset

The generated image is automatically saved as a new Contentful asset and appears in the field.

🚀 Quick Start

Prerequisites

• A Contentful account with an organization
• A Contentful Personal Access Token (Management API token)
  • Get one from: https://app.contentful.com/account/profile/cma_tokens
• A Replicate API key
  • Get one from: https://replicate.com/account/api-tokens
• Node.js 16+ and npm

Installation

1. Clone the repository

   git clone https://github.com/yourusername/imagiterate-contentful.git
   cd imagiterate-contentful

2. Install dependencies

   npm install

3. Create App Definition in Contentful

   npm run create-app-definition

   Save the App Definition ID that's returned.

4. Add App Locations

   npm run add-locations

   Select Media reference field type.

5. Build and Upload

   npm run build
   npm run upload

   Enter your App Definition ID when prompted.

6. Install in Your Space

   • Go to your Contentful space
   • Navigate to Apps → Find "Imagiterate"
   • Click Install → Select your space and environment

⚙️ Configuration

Setting Up Instance Parameters

1. After installing the app, go to Apps → Imagiterate → Configuration
2. Add the Replicate API Key:
   • Parameter key: replicateApiKey
   • Parameter value: Your Replicate API key from https://replicate.com/account/api-tokens
3. Save the configuration

Adding to Content Model

1. Go to Content Model → Your content type
2. Add or edit a field of type Media (Asset)
3. In field settings → Appearance
4. Under Editor interface, select Imagiterate
5. Save the content type

📖 Usage

Basic Workflow

1. Select or Upload an Image

   • In an entry, use the Imagiterate field
   • Click "Choose asset" to select from your media library
   • Or click "Upload asset" to upload a new image

2. Generate Variations

   • Click the "Iterate" button
   • Enter a prompt describing the changes you want (e.g., "make it more vibrant", "add a sunset background")
   • Click "Generate" and wait for the AI to create the variation
   • Preview the result in the dialog

3. Save or Continue Iterating

   • Click "Save" to save the generated image as a new asset
   • Or generate another variation by entering a new prompt

4. Remove Asset

   • Click "Remove" to clear the selected asset

Example Prompts

• "Make the colors more vibrant and saturated"
• "Add a sunset sky in the background"
• "Convert to black and white with high contrast"
• "Add a vintage film grain effect"
• "Make it look like a watercolor painting"

🛠️ Development

Local Development

# Start development server
npm start

# The app will run on http://localhost:3000
# Note: To test properly, configure the app in Contentful first

Building for Production

# Build the app
npm run build

# Upload to Contentful
npm run upload

Available Scripts

• npm start - Start development server (localhost:3000)
• npm run build - Build for production
• npm run create-app-definition - Create app definition in Contentful
• npm run add-locations - Configure app locations
• npm run upload - Upload built app to Contentful
• npm run upload-ci - Upload using environment variables (for CI/CD)

CI/CD Deployment

Set these environment variables:

CONTENTFUL_ORG_ID=your_org_id
CONTENTFUL_APP_DEF_ID=your_app_def_id
CONTENTFUL_ACCESS_TOKEN=your_access_token

Then run:

npm run build
npm run upload-ci

🐛 Troubleshooting

App Not Loading

• Ensure the app is installed in your space
• Verify the bundle is active in App Definition → Bundles
• Check that "Hosted by Contentful" is enabled (not pointing to localhost)

"App failed to load" Error

• Make sure you've uploaded the latest bundle: npm run build && npm run upload
• Verify the app is installed in your space
• Check browser console for specific errors

Generation Not Working

• Verify your Replicate API key is configured correctly
• Check that you have credits/quota available on Replicate
• Ensure an asset is selected before clicking "Iterate"
• Check browser console for API errors

Field Not Showing App

• Verify the app is added to the field's appearance settings
• Make sure the field type is Media (Asset)
• Check that the app is installed in your space

📝 Requirements

• Contentful: Organization account with app installation permissions
• Replicate: API key and account with available credits
• Node.js: 16+ for development
• Browser: Modern browser with JavaScript enabled

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with Contentful App Framework
• Powered by Replicate AI models
• UI components from Forma 36

👤 Author

Solspace

• GitHub: @solspace
• Email: kelsey@solspace.com

🔗 Links

• Contentful App Framework Documentation
• Replicate API Documentation
• Submit to Developer Showcase

---