Introduction

What is YourAppName?

YourAppName is an AI SaaS development framework based on NextJS, with built-in rich components and AI SDKs to help you quickly complete AI SaaS project development.

Components

ImagePromptBox - AI Image Generation Input

A feature-rich AI image generation input component that supports text-to-image and image-to-image modes.

Basic Usage

import { ImagePromptBox } from '@/shared/blocks/generator/image-prompt-box';

export default function Page() {
  return (
    <ImagePromptBox
      showResults={true}
      onGenerated={(images) => console.log('Generated:', images)}
    />
  );
}

Props

Prop	Type	Default	Description
`maxSizeMB`	`number`	`5`	Max file size for reference images (MB)
`className`	`string`	-	Custom class name
`srOnlyTitle`	`string`	-	Screen reader title
`showResults`	`boolean`	`true`	Whether to show generated results
`onGenerated`	`(images: GeneratedImage[]) => void`	-	Callback when images are generated

Features

Paid Users vs Free Users

The component automatically adjusts features based on user's payment status (isPaidUser).

Paid User Criteria (any of the following):

Has an active subscription (status: ACTIVE or TRIALING)
Has purchased a credit pack (one-time payment with PAYMENT scene)

Feature	Free Users	Paid Users
Reference image limit	3 images	9 images
Aspect Ratio options	Only Auto is free	All available
Resolution options	Only Standard is free	All available
Skip Validation toggle	Visible	Hidden
"Need Custom Settings" button	Visible	Hidden
"Upgrade to upload more" prompt	Visible	Hidden

Supported Features

📝 Prompt Input: Supports up to 2000 characters
🖼️ Reference Images: Upload reference images for image-to-image generation
📐 Aspect Ratio: Auto, 1:1, 16:9, 9:16, 4:3, 3:4
🔍 Resolution: Standard, 1K, 2K, 4K
🔢 Quantity: 1-4 images
⏳ Progress: Real-time generation progress
💾 Download: Download generated images

// constants.ts
export const MAX_PROMPT_LENGTH = 2000;
export const MAX_REFERENCE_IMAGES_FREE = 3;
export const MAX_REFERENCE_IMAGES_PAID = 9;

Sub-components

DropdownSelector - Generic dropdown selector with customizable options and icons
ReferenceImagesDisplay - Reference images display component
GenerateButton - Generate button
GeneratedImagesGrid - Generated images grid display
ProgressIndicator - Progress indicator

Introduction

On this page