From Prompt Box to Stateful AI Workflow: Building an AI Product Ad Studio

Knipper Mccarville — Tue, 28 Jul 2026 10:54:21 +0000

Most AI creative products start with the same interface: a large, empty prompt box. A stateful AI workflow needs more than that.

The prompt box is useful for experimentation. It is a weak foundation for a repeatable product.

While building Photo2Ads, an AI product-ad studio, I kept running into the same product and engineering problem: the model could generate an output quickly, but the application kept asking the user to reconstruct the project around it.

The product image, creative direction, model capabilities, mode-specific settings, and provenance of the result all needed to survive longer than one request.

This article covers the architecture decisions that moved the product from a prompt wrapper toward a stateful AI workflow:

Separate Image and Video draft state
localStorage for serializable settings
IndexedDB for real File objects
Declarative capability contracts for generation models
Provenance-aware examples that can seed the workbench
Progressive enhancement when browser storage is unavailable

1. Treat the prompt as an instruction, not the project

A prompt is only one part of a product-ad generation request.

The actual project also contains:

Product reference images
An optional person reference
Creative style
Aspect ratio and resolution
Image or video model
Video hook and setting
Duration and audio preference
The relationship between inputs and outputs

If the application stores only the prompt, switching modes or refreshing the page destroys most of the user's work.

The first important decision was to model Image and Video as separate drafts.

interface ProductAdSettingsDraft {
  image: {
    prompt: string;
    styleId?: string;
    model: ImageModel;
    aspectRatio: ImageAspectRatio;
    resolution: ImageResolution;
    imageCount: number;
  };
  video: {
    prompt: string;
    styleId?: string;
    hook: VideoHook;
    setting: VideoSetting;
    model: VideoModel;
    aspectRatio: VideoAspectRatio;
    resolution: VideoResolution;
    duration: number;
    audioEnabled: boolean;
  };
}

This looks obvious in retrospect, but it prevents a surprisingly common class of bugs.

When one state object is shared between two modes:

Editing a video prompt can overwrite the image prompt
A video-only hook leaks into image generation
Switching models can leave unsupported settings selected
Returning to a mode feels like starting over

The product is shared conceptually, but each mode needs its own working state.

In React, the active state can be selected without merging the underlying drafts:

const [imageProducts, setImageProducts] = useState<ProductReference[]>([]);
const [videoProducts, setVideoProducts] = useState<ProductReference[]>([]);

const productReferences =
  mediaMode === 'video' ? videoProducts : imageProducts;

The UI changes modes. The drafts remain intact.

2. Do not put `File` objects in `localStorage`

The settings draft is JSON-serializable, so localStorage is sufficient:

function writeSettingsDraft(value: ProductAdSettingsDraft) {
  try {
    localStorage.setItem(SETTINGS_KEY, JSON.stringify(value));
  } catch {
    // Storage may be disabled. The in-memory workflow still works.
  }
}

Product and person references are different.

An uploaded asset is not just metadata. The browser may need the actual File after a refresh so it can:

Render a new preview URL
Upload the reference when generation starts
Preserve the original filename and MIME type
Move between Image and Video without asking for the file again

Serializing a File to JSON loses the binary data. Persisting only a blob: URL also fails because object URLs belong to the current document lifecycle.

IndexedDB can store structured-clone-compatible values, including File and Blob objects.

A minimal object store is enough:

const DATABASE_NAME = 'photo2ads-product-ad-drafts';
const STORE_NAME = 'drafts';
const ASSETS_KEY = 'workbench-assets-v1';

function openDraftDatabase(): Promise<IDBDatabase> {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(DATABASE_NAME, 1);

    request.onupgradeneeded = () => {
      const db = request.result;
      if (!db.objectStoreNames.contains(STORE_NAME)) {
        db.createObjectStore(STORE_NAME);
      }
    };

    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

The asset draft keeps Image and Video references separate:

interface ProductAdAssetsDraft {
  imageProductReferences?: ProductReference[];
  videoProductReferences?: ProductReference[];
  imageAvatar?: AvatarReference;
  videoAvatar?: AvatarReference;
}

Writing it is a single IndexedDB transaction:

async function writeAssetsDraft(value: ProductAdAssetsDraft) {
  const db = await openDraftDatabase();

  await new Promise<void>((resolve, reject) => {
    const tx = db.transaction(STORE_NAME, 'readwrite');
    tx.objectStore(STORE_NAME).put(value, ASSETS_KEY);

    tx.oncomplete = () => {
      db.close();
      resolve();
    };

    tx.onerror = () => {
      db.close();
      reject(tx.error);
    };
  });
}

On hydration, a persisted File receives a new object URL:

function restoreReference(
  reference: ProductReference
): ProductReference | undefined {
  if (reference.file instanceof File) {
    return {
      ...reference,
      previewUrl: URL.createObjectURL(reference.file),
    };
  }

  return reference.fileId && !reference.previewUrl.startsWith('blob:')
    ? reference
    : undefined;
}

This is also why object URL cleanup matters:

function revokeObjectUrl(url?: string) {
  if (url?.startsWith('blob:')) {
    URL.revokeObjectURL(url);
  }
}

Without cleanup, repeatedly replacing reference images can leak memory during a long editing session.

3. Hydrate before you autosave

Autosaving a draft introduces a race condition.

If persistence effects run before the old draft has been hydrated, the initial empty React state can overwrite the stored draft.

The workbench uses an explicit hydration flag:

const [draftHydrated, setDraftHydrated] = useState(false);

useEffect(() => {
  let cancelled = false;

  async function hydrateDraft() {
    const settings = readSettingsDraft();
    const assets = await readAssetsDraft();

    if (cancelled) return;

    restoreSettings(settings);
    restoreAssets(assets);
    setDraftHydrated(true);
  }

  void hydrateDraft();

  return () => {
    cancelled = true;
  };
}, []);

Every persistence effect checks the flag:

useEffect(() => {
  if (!draftHydrated) return;

  const timeout = window.setTimeout(() => {
    writeSettingsDraft(buildCurrentSettings());
  }, 120);

  return () => window.clearTimeout(timeout);
}, [draftHydrated, imagePrompt, videoPrompt, model, videoModel]);

The short debounce avoids writing on every keystroke while keeping the draft responsive.

The rule is simple:

Never let default client state write to persistence before restoration has completed.

4. Model capabilities belong in data, not scattered conditionals

Video generation models do not support the same inputs.

They can differ by:

Duration
Resolution
Aspect ratio
Audio support
Number of reference images
Pricing tier and credit cost

If these rules are spread across UI components and API handlers, they drift.

A declarative model contract is easier to reason about:

interface VideoModelConfig {
  id: VideoModel;
  displayName: string;
  supportedDurations: number[];
  supportedResolutions: VideoResolution[];
  supportedAspectRatios: VideoAspectRatio[];
  supportsAudio: boolean;
  audioAlwaysOn?: boolean;
  maxReferenceImages: number;
}

The UI reads this contract to show valid options. The validation layer reads the same contract before a request is submitted.

function validateVideoInput(input: VideoInput, config: VideoModelConfig) {
  if (!config.supportedDurations.includes(input.duration)) {
    throw new Error(`${config.displayName} does not support that duration.`);
  }

  if (!config.supportedResolutions.includes(input.resolution)) {
    throw new Error(`${config.displayName} does not support that resolution.`);
  }

  if (input.audioEnabled && !config.supportsAudio) {
    throw new Error(`${config.displayName} does not support generated audio.`);
  }

  if (input.referenceImageCount > config.maxReferenceImages) {
    throw new Error(
      `${config.displayName} supports up to ` +
        `${config.maxReferenceImages} reference images.`
    );
  }
}

Reference limits become especially important when a person reference consumes one of the available slots.

const productReferenceLimit = Math.max(
  1,
  model.maxReferenceImages - (hasPersonReference ? 1 : 0)
);

The interface should communicate this before generation, not wait for a remote provider to reject the request.

5. Preserve provenance in examples

An AI showcase is usually treated as marketing content.

It becomes more useful when it is also a source of executable state.

The showcase data in Photo2Ads keeps the result connected to the prompt, creative style, and any references that genuinely belong to that case:

interface ShowcaseExample {
  slug: string;
  name: string;
  prompt: string;
  styleId: string;
  poster: string;
  video: string;
  productReference?: {
    id: string;
    name: string;
    imageUrl: string;
  };
  avatarReference?: {
    id: string;
    name: string;
    imageUrl: string;
  };
}

Clicking Recreate seeds the workbench instead of navigating to an empty generator:

function applyExample(example: ShowcaseExample) {
  workbench.seed({
    mediaMode: 'video',
    prompt: example.prompt,
    styleId: example.styleId,
    productReference: example.productReference ?? null,
    avatarReference: example.avatarReference ?? null,
  });
}

The null values are important.

If an example was created without a bound product or person reference, the application should not invent one just to make the handoff look complete.

That gives the user a more honest contract:

Existing inputs are transferred
Missing inputs remain missing
The exact prompt remains inspectable
The user can understand what must be replaced

This turns a gallery into a form of executable documentation.

6. Make persistence a progressive enhancement

Browser storage can fail.

Private browsing, storage policies, quota limits, and browser behavior can make localStorage or IndexedDB unavailable.

The generation flow should not become unusable because draft persistence failed.

In Photo2Ads, storage helpers catch failures and return undefined. The current in-memory session continues to work.

async function readAssetsDraft<T>(): Promise<T | undefined> {
  try {
    const db = await openDraftDatabase();
    return await readValue<T>(db, ASSETS_KEY);
  } catch {
    return undefined;
  }
}

This creates a useful hierarchy:

In-memory state is required for the current interaction.
Browser persistence improves continuity.
Remote storage begins only when the user submits a generation request.

The draft system should reduce lost work without becoming a prerequisite for using the tool.

7. Keep review inside the workflow

State and provenance are not only convenience features.

They also make AI output easier to review.

Product-ad models can:

Misread labels
Change packaging
Distort logos
Alter brand colors
Invent visual claims
Produce inconsistent products across video frames

Keeping references close to results gives the reviewer an immediate comparison. Keeping the prompt and settings attached makes unexpected behavior easier to diagnose.

Human review is not evidence that the workflow failed. It is a required stage of a system that creates advertising for real products.

What I would reuse in another generative product

These patterns are not specific to product ads.

If I were building another stateful AI tool, I would reuse the same principles:

Identify the durable object.

What should remain stable while prompts and outputs change?
Separate mode-specific state.

Do not let one workflow silently overwrite another.
Choose persistence by data type.

JSON fits localStorage; binary assets belong in IndexedDB or remote storage.
Hydrate before autosaving.

Prevent empty initial state from overwriting a real draft.
Describe model capabilities as data.

Let the UI and validator share the same contract.
Keep provenance attached to outputs.

A result without its inputs is difficult to reproduce or trust.
Fail softly when persistence is unavailable.

Continuity is an enhancement; the core interaction should still work.

The real product is the workflow

It is easy to judge an AI feature by generation latency or the visual quality of its best output.

Users experience everything around that model call:

Repeated setup
Mode switching
Reference limits
Lost uploads
Invalid combinations
Result review
Reproduction and handoff

A fast model does not automatically create a fast product.

The larger lesson from building Photo2Ads is that the prompt box should not be the center of the architecture. The durable object should be.

For product advertising, that object is the product.

You can explore the working implementation and real examples at photo2ads.com.

If you are building a generative tool, what information does your application keep forcing users to enter again?

How I Built a NASA-Style Name Generator with Next.js and Canvas API

Knipper Mccarville — Wed, 29 Apr 2026 01:40:31 +0000

Ever wondered what your name looks like from space? I built Your Name in Landsat — a web app that spells out any name or short phrase using real Landsat satellite imagery tiles shaped like alphabet letters.

The Idea

NASA's Landsat program has been capturing Earth observation data since 1972. Among the millions of satellite images, some natural and man-made features on Earth's surface happen to resemble letters of the alphabet. I thought it would be fun to collect these "letter tiles" and let people spell their names with them.

Tech Stack

Next.js 16 with App Router for server-side rendering and routing
React 19 for the interactive UI
TypeScript for type safety
Tailwind CSS 4 for responsive styling
Canvas API for compositing letter tiles into a single shareable image
Cloudflare Workers for edge deployment

How It Works

The user types a name or short phrase
The app maps each character to a pre-curated Landsat satellite image tile
Canvas API composites all tiles side by side into one panoramic image
The result can be downloaded or shared on social media

The letter tiles come from actual Landsat scenes — rivers that curve like an "S", urban grids that form an "H", coastlines shaped like a "C", and so on.

Key Technical Challenges

Image Loading and Canvas Compositing

Loading multiple high-resolution satellite tiles and stitching them together required careful management of async image loading. I used Promise.all to ensure all tiles are loaded before drawing:

const loadTile = (src) => new Promise((resolve, reject) => {
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.onload = () => resolve(img);
  img.onerror = reject;
  img.src = src;
});

const tiles = await Promise.all(
  letters.map(letter => loadTile(`/tiles/${letter}.webp`))
);

Responsive Layout

Each letter tile is square, but the total width depends on the name length. I had to dynamically calculate canvas dimensions and handle viewport constraints so the result looks good on both desktop and mobile.

Edge Deployment

Deploying on Cloudflare Workers meant optimizing for cold start times. Next.js 16's built-in edge runtime support made this straightforward — static assets are cached at the edge while dynamic routes run in Workers.

Try It Out

You can try the Landsat Name Generator yourself. Type your name and see what it looks like spelled with satellite imagery from space!

The project is open source and I'd love feedback from the community. Let me know what you think in the comments.

Built with Next.js, React, and real NASA Landsat satellite data.

DEV Community: Knipper Mccarville