Image playground

The Image Generation demo application allows users to create visuals from text prompts using multiple image models. It provides a clean interface for prompt entry, model selection, aspect ratio control, and browsing generation history.

Features

Explore the capabilities of the AI-powered image generation tool:

Setup

To implement image generation in your application, you'll need to configure the necessary backend services.

You'll also need API keys for the models you want to enable. Follow the provider documentation linked below for setup details.

AI models

The Image Generation app uses the AI SDK to support several image-capable models. In the current codebase, these come from OpenAI, Google, and Replicate:

For detailed implementation guidance, refer to the AI SDK documentation covering the generateImage function and supported providers.

Data persistence

Details about image generation requests and the resulting images are stored to maintain user history.

Database

Learn more about database services in TurboStarter AI.

Data is organized within a dedicated PostgreSQL schema named image:

• generation: captures detailed information about each generation request, including the prompt, selected model, aspectRatio, requested image count, userId, and precise timestamps.
• image: stores metadata for each generated image, linked to its parent generation record via generationId and maintaining the url reference to the stored image file.

Storage

Learn more about cloud storage services in TurboStarter AI.

Generated image files are uploaded to cloud storage (S3-compatible). The public asset URL is then stored in the image table for later retrieval.

Structure

The Image Generation feature is organized across the monorepo for clear separation between shared AI logic, API routes, and platform-specific UI.

Core

The shared image generation logic lives in @workspace/ai-image, implemented in packages/ai/image/src:

• Validation schemas for prompts and generation options
• Model definitions and provider strategy wiring
• DB helpers for generations and images
• Upload flow for persisting generated assets to storage

API

The packages/api package wires image generation through packages/api/src/modules/ai/image.ts.

That module is responsible for validating generation input, applying shared middleware like authentication, rate limiting, and credits, and then delegating to @workspace/ai-image, which creates generation records, calls the model provider, uploads assets to storage, and returns the results back through the API layer.

Web

The Next.js application (apps/web) delivers an intuitive user interface:

• src/app/[locale]/(apps)/image/**: route entry points for the image app, history page, and generation detail pages
• src/modules/image/**: feature modules for the composer, history, generation detail views, and image gallery UI

Mobile

The Expo/React Native application (apps/mobile) provides a native mobile experience:

• src/app/(apps)/image/**: route entry points for the mobile image app
• src/modules/image/**: mobile-native modules for generation, history, and viewing results
• API integration: uses the same shared Hono client as the web app for consistent backend communication

This architecture ensures perfect consistency across platforms while enabling tailored UI implementations optimized for each environment.