← All @molecule/* packages · App templates
@molecule/app-ai-image-generatorCore interface · ai-image-generator · App (browser) · v1.0.1 · Apache-2.0
AI image generation core interface — prompt-to-image via your backend with progress/image/done events, history, and abort.
npm install @molecule/app-ai-image-generator@molecule/app-ai-image-generator is the ai-image-generator core interface on the app (browser) side: the API your app calls, with no vendor inside.
Choose the implementation by bonding one of its 1 provider: @molecule/app-ai-image-generator-default.
import { requireProvider, setProvider } from '@molecule/app-ai-image-generator'
import { createProvider } from '@molecule/app-ai-image-generator-default'
setProvider(createProvider()) // at startup
const generator = requireProvider()
const images = await generator.generate(
{ prompt: 'A watercolor fox', size: '1024x1024', count: 1 },
{ endpoint: '/api/images/generate' },
(event) => {
if (event.type === 'progress') setProgress(event.percent)
if (event.type === 'error') showError(event.message)
},
)Providers (1): @molecule/app-ai-image-generator-default
Works with: @molecule/app-bond
Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit
src/index.tsJSDoc, not this file.
AI image generation core interface for molecule.dev.
Defines the AIImageGeneratorProvider contract for prompt-to-image features:
generate(request, config, onEvent) streams progress/image/done/error events
and resolves with the generated images; loadHistory / deleteImage manage
previously generated images; abort() cancels an in-flight generation.
import { requireProvider, setProvider } from '@molecule/app-ai-image-generator'
import { createProvider } from '@molecule/app-ai-image-generator-default'
setProvider(createProvider()) // at startup
const generator = requireProvider()
const images = await generator.generate(
{ prompt: 'A watercolor fox', size: '1024x1024', count: 1 },
{ endpoint: '/api/images/generate' },
(event) => {
if (event.type === 'progress') setProgress(event.percent)
if (event.type === 'error') showError(event.message)
},
)
core
npm install @molecule/app-ai-image-generator @molecule/app-bond
AIImageGeneratorProviderProvider interface for AI image generation.
Implement this in a bond package to provide a concrete image generation backend.
interface AIImageGeneratorProvider {
/** Unique name identifying this provider implementation. */
readonly name: string
/**
* Generates images from a text prompt.
*
* @param request - The generation parameters (prompt, size, count, etc.).
* @param config - API endpoint and model configuration.
* @param onEvent - Callback invoked for progress, image, done, and error events.
* @returns The array of generated images on success.
*/
generate(
request: ImageGenerationRequest,
config: ImageGenerationConfig,
onEvent: ImageGenerationEventHandler,
): Promise<GeneratedImage[]>
/**
* Aborts the current in-flight generation request, if any.
*/
abort(): void
/**
* Loads previously generated images from the server.
*
* @param config - API endpoint configuration.
* @returns An array of previously generated images, newest first.
*/
loadHistory(config: ImageGenerationConfig): Promise<GeneratedImage[]>
/**
* Deletes a previously generated image.
*
* @param id - The image ID to delete.
* @param config - API endpoint configuration.
*/
deleteImage(id: string, config: ImageGenerationConfig): Promise<void>
}
GeneratedImageA single generated image result.
interface GeneratedImage {
/** Unique image identifier. */
id: string
/** URL to the generated image (may be temporary). */
url: string
/** The prompt that was used to generate this image. */
prompt: string
/** The revised/expanded prompt the model actually used, if different. */
revisedPrompt?: string
/** Image width in pixels. */
width: number
/** Image height in pixels. */
height: number
/** Creation timestamp (ms since epoch). */
createdAt: number
}
ImageGenerationConfigConfiguration for image generation API requests.
interface ImageGenerationConfig {
/** API endpoint path (e.g. `'/api/images/generate'`). */
endpoint: string
/** Default model to use for generation. */
model?: string
}
ImageGenerationRequestRequest parameters for generating images.
interface ImageGenerationRequest {
/** Text description of the desired image. */
prompt: string
/** Text description of elements to exclude from the image. */
negativePrompt?: string
/** Image dimensions as a preset string. */
size?: ImageSize
/** Number of images to generate (1–10). */
count?: number
/** Output image format. */
format?: ImageFormat
/** Quality preset. */
quality?: ImageQuality
/** Optional model identifier override. */
model?: string
/** Optional style preset (e.g. `'vivid'`, `'natural'`). */
style?: string
}
ImageFormatOutput image format.
type ImageFormat = 'png' | 'jpeg' | 'webp'
ImageGenerationEventEvents emitted during image generation.
started — generation request accepted by the server.progress — intermediate progress update (percent complete).image — a single generated image is ready.done — all images have been generated.error — generation failed.type ImageGenerationEvent =
| { type: 'started' }
| { type: 'progress'; percent: number; message?: string }
| { type: 'image'; image: GeneratedImage }
| { type: 'done'; images: GeneratedImage[] }
| { type: 'error'; message: string }
ImageGenerationEventHandlerCallback invoked for each event during image generation.
type ImageGenerationEventHandler = (event: ImageGenerationEvent) => void
ImageQualityImage generation quality preset.
type ImageQuality = 'standard' | 'hd'
ImageSizeStandard image size presets supported by most generation APIs.
type ImageSize = '256x256' | '512x512' | '1024x1024' | '1024x1792' | '1792x1024'
getProvider()Returns the bonded image generator provider, or null if none is set.
function getProvider(): AIImageGeneratorProvider | null
Returns: The active provider or null.
hasProvider()Checks whether an image generator provider has been bonded.
function hasProvider(): boolean
Returns: true if a provider is configured.
requireProvider()Returns the bonded image generator provider or throws if none is configured.
function requireProvider(): AIImageGeneratorProvider
Returns: The active provider.
setProvider(provider)Registers the active image generator provider.
function setProvider(provider: AIImageGeneratorProvider): void
provider — The provider implementation to bond.| Provider | Package |
|---|---|
| Ai Image Generator | @molecule/app-ai-image-generator-default |
Peer dependencies:
@molecule/app-bond ^1.0.1@molecule/app-bond
Wire it with THIS package's setProvider() or
bond('ai-image-generator', …). setProvider() delegates into the shared
@molecule/app-bond registry, so both write the same slot;
requireProvider() throws until one has run.
Generation goes through YOUR backend (config.endpoint), which calls
the image model server-side (see @molecule/api-ai-image-generation) — the
vendor key never reaches the browser.
GeneratedImage.url may be TEMPORARY (signed/expiring upstream URLs).
If the app keeps a gallery, have the server download and persist the bytes
(e.g. via the uploads package) and store YOUR url — storing the returned
url alone ships dead links.
count is bounded 1–10; generation is slow — drive the UI from the
progress / image events rather than blocking on the promise alone.
Integration checklist — drive the real UI (live preview, no mocks), adapt each item to this app's actual screens/flows, and check every box off one by one. A box you can't check is an integration bug to fix — not a skip:
GeneratedImage(s) as real pixels on screen: the image / done events
deliver objects whose url loads to a visible picture, not a broken or
placeholder tile.started / progress (progress.percent) events — and clears
when done fires and generate() resolves; it never spins forever.error event's message
(provider failure, or a moderation-rejected prompt) renders as a message
in the UI, never a silent no-op or a stuck spinner.count > 1 (bounded 1–10), ALL requested images
render — the done event's images array length matches what was asked,
not just the first one.size preset (e.g. '1024x1024' vs '1792x1024') is
honored in the output: the rendered image's width / height match the
requested dimensions rather than a default square.GeneratedImage data
(id, url); because url may be temporary, an image kept in a gallery
still loads after a full reload — proving the app persisted the bytes, not
a dead upstream link.loadHistory / the
gallery returns only that user's own images, and a moderation-rejected
prompt shows the rejection rather than a blank tile.