DEV Community: Natalia

A Model Catalog Is the Missing Product Contract in Multi-Model AI Apps

Natalia — Fri, 24 Jul 2026 04:14:46 +0000

The first AI model in a product rarely creates an architecture problem.

You build a form, call an API, and display a result.

The second model adds a dropdown and a few conditions. The third adds another input mode. Before long, the product supports text-to-image, image-to-image, text-to-video, image-to-video, reference-based generation, video editing, background removal, and upscaling.

At that point, calling the provider is no longer the hardest part.

The difficult questions are product questions:

Which modes does each model support?
Which controls should the form render?
How many reference assets can a user upload?
Does the model accept images, video, audio, or a combination?
Which parameter combinations are valid?
How does resolution, duration, or source media affect the credit cost?
Can the provider rename a model without breaking public URLs or stored tasks?

While building AI Image Editor, I found that a provider adapter only solves part of this problem. The application also needs a model catalog above the adapter: one product-owned contract describing what every model means inside the product.

Provider Adapters Answer the Wrong Question

A provider adapter is still useful. It can normalize operations such as:

interface GenerationProvider {
  submit(input: ProviderInput): Promise<ProviderJob>
  getStatus(jobId: string): Promise<ProviderResult>
}

The rest of the application does not need to care whether one provider calls an identifier taskId and another calls it predictionId.

But an adapter answers, "How do I call this service?"

It does not answer, "What should this product allow the user to do?"

One provider can expose many models with completely different product rules. One image model may accept 16 reference images, while another accepts four. One video model may accept video input, while another only accepts a starting image. Some models charge by resolution. Others charge by output duration or by both input and output media.

Those differences belong to the product layer.

Describe Capabilities as Data

A useful catalog entry can look like this:

type ModelCatalogEntry = {
  id: string
  kind: 'image' | 'video'
  slug: string
  modes: Array<{
    id: string
    supportsReferenceAssets: boolean
  }>
  fields: Array<{
    id: string
    options: Array<{ label: string; value: string }>
  }>
  defaults: Record<string, string>
  maxReferenceAssets: number
  sourceAssetAccept?: string
  creditCost: CreditCostTier[]
  providerRoutes: ProviderRoute[]
}

This object is not a copy of a provider response. It is the application's own definition of the model.

The internal id and public slug belong to the product. A provider-specific model name belongs inside providerRoutes. If an integration changes later, the application should not have to rewrite database history, public page URLs, and frontend state.

Product identity should be stable. Provider identity should be replaceable.

Generate the Form From Capabilities

Without a catalog, model forms often become a growing collection of conditions:

if (model === 'model-a') {
  showResolution()
}

if (model === 'model-b' || model === 'model-c') {
  allowReferenceImages()
}

This feels direct while the catalog is small. It becomes fragile when models are renamed, upgraded, or share only some capabilities.

A capability-driven form reads the entry instead:

modes renders text-to-image, image-to-image, or video-edit tabs
fields renders resolution, aspect ratio, duration, and audio controls
defaults initializes the form
maxReferenceAssets controls the uploader
sourceAssetAccept limits media types

Adding a model becomes primarily a data change, followed by contract tests, instead of a search for every component that knows the model name.

The frontend also stays deliberately boring. It renders product capabilities without learning provider terminology.

Enforce the Same Contract on the Server

Generating the UI from a catalog is not enough. If the server does not use the same rules, the catalog is display configuration rather than a contract.

After receiving a request, the server should check:

The model exists and matches the requested media kind.
The requested mode belongs to the model.
The selected mode accepts the supplied references.
The number and kinds of assets are allowed.
Dynamic fields contain only declared values.
Cross-field combinations are compatible.

The server cannot trust the rendered form. A request may come from a stale browser tab, an older deployment, or a client calling the endpoint directly.

The safer flow is:

request schema
    |
    v
model catalog normalization
    |
    v
credit calculation
    |
    v
persist normalized task

The worker then receives normalized product input rather than raw form state.

Pricing Belongs in the Contract Too

A flat "10 credits per generation" rule rarely survives a multi-model product.

Image cost may depend on resolution. Video cost may depend on duration, quality, audio, and whether the user supplied video input. Provider pricing also changes over time.

Catalog pricing can be expressed as versioned matching rules:

type CreditCostTier = {
  credits: number
  effectiveAt: string
  resolution?: string
  duration?: string
  withAudio?: boolean
  withVideoInput?: boolean
}

The resolver first chooses the latest price version effective at the task creation time. It then selects the most specific tier matching the normalized input.

Two details matter here.

First, calculate and persist the cost before the task enters the generation pipeline. A price update while the task is waiting should not change what the user already confirmed.

Second, the UI estimate and server charge should use the same resolver. A price displayed on a button and a different price recorded in billing is a fast way to lose trust.

Test Catalog Semantics, Not Only Types

TypeScript can validate the shape of an entry. It cannot prove that the entry makes sense.

A correctly typed configuration can still contain:

a default value missing from its options
a duplicate public slug
an uncovered resolution-duration price combination
a reference-enabled mode with a zero reference limit
a provider route pointing at the wrong media kind
a new price version that unintentionally changes historical calculations

The catalog deserves focused tests:

every default is an allowed option
every public slug is unique
every supported mode normalizes successfully
every price combination resolves deterministically
every provider route matches the model kind

These tests also make reviews clearer. A model integration becomes a visible declaration of capabilities instead of a trail of special cases across unrelated files.

Do Not Turn Everything Into JSON

A catalog does not mean every difference must be forced into static configuration.

Some models have real cross-field constraints. Some video prices depend on the measured duration of uploaded source assets. Those rules are easier to express as explicit pure functions called through the catalog's public API.

A practical boundary is:

capabilities, options, defaults, and routes are data
normalization, cross-field validation, and dynamic cost are pure functions
request translation and response parsing stay in provider adapters
retries and final settlement stay in the job workflow

The goal is not to eliminate code. It is to give every difference one authoritative home.

The Payoff Is Predictability

The complexity of a multi-model AI product does not come from the number of API clients. It comes from the number of capability combinations crossing the same product flow.

Provider adapters hide integration differences. A model catalog gives the rest of the application one consistent interpretation of those differences.

Once the catalog becomes a real product contract, adding a model stops meaning "add another exception everywhere." It becomes "declare a new set of capabilities inside a boundary we already understand."

That predictability is more valuable than saving a few minutes on the next integration.

Notes on Configuring TanStack Start for Cloudflare Workers

Natalia — Thu, 04 Jun 2026 08:11:55 +0000

I like frameworks that make the boring parts stay boring.

For an AI image website like Flux 2, the frontend is only one slice of the work. There are landing pages, account flows, uploads, generation history, admin screens, and a lot of small server-side decisions around performance and reliability. That is why TanStack Start on Cloudflare Workers is interesting: Vite-based development, full-stack routing, server functions, static assets, and an edge runtime can all fit into one deployment story.

The part I care about most is not the headline feature list. It is the config.

If the config is clear, the team knows what gets deployed, where it runs, and which runtime assumptions the app is making. If the config is messy, every release feels a little suspicious.

This is the short version of how I would approach a TanStack Start + Cloudflare setup.

Start with the Cloudflare target in mind

TanStack Start can run on different hosting targets, but Cloudflare Workers has a specific shape. The official Cloudflare TanStack Start guide shows two useful paths:

create a new app already configured for Cloudflare
adapt an existing TanStack Start app by adding Wrangler and the Cloudflare Vite plugin

For a new project, I would rather start with the Cloudflare path than retrofit it later:

pnpm create cloudflare@latest my-app --framework=tanstack-start

For an existing project, the main idea is simple: TanStack Start still uses Vite, but the Cloudflare plugin needs to participate in the server-side build.

The Vite config is the first file I check

The Vite config tells me whether the project is actually being built for the runtime I expect.

A Cloudflare-oriented setup usually looks like this:

import { cloudflare } from "@cloudflare/vite-plugin";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    cloudflare({ viteEnvironment: { name: "ssr" } }),
    tanstackStart(),
    react(),
  ],
});

The important part is not memorizing every line. The important part is that the SSR environment is intentionally wired through Cloudflare. That keeps the server side of the app close to the Worker runtime instead of accidentally drifting toward a generic Node.js assumption.

That matters when the app grows. Server functions, route loaders, auth checks, media metadata, and dashboard requests are all easier to reason about when the runtime is explicit.

Wrangler config should be small at first

The next file I look at is wrangler.jsonc.

I prefer starting small:

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "example-tanstack-start",
  "compatibility_date": "2026-06-04",
  "compatibility_flags": ["nodejs_compat"],
  "main": "@tanstack/react-start/server-entry",
  "observability": {
    "enabled": true
  }
}

This does a few useful things.

main points Wrangler at the TanStack Start server entry. compatibility_date makes the Workers runtime version explicit. nodejs_compat gives the app a more practical compatibility baseline for packages that expect some Node APIs. observability makes the first round of debugging less blind.

I do not like stuffing this file with every future binding on day one. The config should grow when the product needs it.

Add scripts that explain the workflow

The package.json scripts should make the common path obvious:

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "pnpm build && wrangler deploy",
    "cf-typegen": "wrangler types"
  }
}

I like this because it separates concerns:

dev is for local development
build proves the app can compile
preview lets me inspect the built result
deploy keeps the build step attached to release
cf-typegen keeps Worker bindings typed

The last one is easy to skip, but it is useful once bindings enter the project. A typed env is much better than guessing whether a binding name is available in a server function.

Treat bindings as product decisions

For a real AI image product, Cloudflare bindings can become important quickly.

You might use R2 for generated media, D1 for lightweight relational data, KV for low-risk cache data, Queues for background jobs, or a service binding for splitting a larger backend into smaller Workers.

But I try not to add bindings just because the platform supports them. I add them when a workflow needs a clear ownership boundary.

For example, an upload or generated asset flow may justify an R2 binding. A scheduled cleanup job may justify a custom entrypoint. A separate auth or billing service may justify a service binding. The config should tell that story plainly.

Inside TanStack Start server code, Cloudflare bindings are accessed through the Worker environment. That is a good fit for server functions because browser code does not need to know about storage buckets, queues, or internal services.

Be careful with prerendering

TanStack Start can prerender routes, and Cloudflare can serve static assets efficiently. That is useful for pages that do not depend on per-user state.

I would consider prerendering for:

marketing pages
documentation-style pages
static comparison pages
content that changes on a predictable schedule

I would not use it blindly for account pages, generation history, payment status, or anything that depends on a signed-in user.

The trap is not prerendering itself. The trap is forgetting when data is read. Build-time data and request-time data are different. Once that distinction is clear, prerendering becomes a useful tool instead of a source of confusing stale pages.

Keep environments boring

I want staging and production to be boringly explicit.

That usually means separate Worker names and routes, with the same general structure:

{
  "env": {
    "staging": {
      "name": "example-tanstack-start-staging"
    },
    "production": {
      "name": "example-tanstack-start-production"
    }
  }
}

Then commands become hard to misread:

pnpm build
wrangler deploy --env staging --dry-run
wrangler deploy --env staging
wrangler tail --env staging

wrangler deploy --env production --dry-run
wrangler deploy --env production
wrangler tail --env production

The tail step is not glamorous, but it is one of the fastest ways to notice obvious runtime mistakes after a release.

The config is part of the product

For a TanStack Start app on Cloudflare, I think of configuration as product infrastructure, not boilerplate.

The Vite config says how the app is built. The Wrangler config says how it runs. The scripts say how developers interact with it. Bindings say which Cloudflare resources the app depends on. Environment sections say where a release is going.

That is why I prefer a small, readable setup over a clever one.

For an AI image website, the product can be complex enough already. The deployment path should be easy to inspect: TanStack Start for the app shape, Cloudflare Workers for the runtime, Wrangler for the release workflow, and only the bindings the product actually needs.

Why AI Image Generation Should Be Async

Natalia — Fri, 29 May 2026 04:33:18 +0000

AI image generation can look like a simple request-response feature.

A user enters a prompt, clicks generate, and waits for an image.

For a prototype, that can work. For a production product, it usually becomes fragile.

Image generation may take several seconds or minutes. A provider may return a job ID first and the final result later. Some results arrive through webhooks. Others need polling. Requests can fail, time out, or finish after the user has already left the page.

That is why AI image generation is usually better designed as an asynchronous workflow.

This is the approach I use while building Image 2, a multi-model AI image generation and editing platform.

The Simple Version

The most direct implementation looks like this:

User -> API route -> AI provider -> result -> user

This is easy to understand, but it has several problems:

the HTTP request may time out
retries can create duplicate jobs
the frontend depends on provider latency
billing or credit logic becomes harder to protect
generated media may live on temporary provider URLs
failures are difficult to repair after the request ends

This pattern is fine for demos. It is not ideal once real users, payments, storage, and retries are involved.

A Better Shape

A more reliable version separates the user request from the generation work:

User request
  |
  v
Create generation record
  |
  v
Push message to queue
  |
  v
Background worker submits job
  |
  v
Webhook or polling gets result
  |
  v
Store asset and update status

The user-facing request returns quickly after creating the task. The UI can then show a status such as queued, processing, completed, or failed.

The slow work happens in the background.

Why Async Helps

Async generation gives the system more room to recover.

If the provider is slow, the task can remain in processing.

If the provider fails, the system can mark the task as failed and roll back credits.

If a webhook is missed, a scheduled job can poll the provider later.

If both a webhook and a polling job see the same final result, the system can ignore duplicate settlement.

That last point matters. In production, the same generation result may be observed more than once. Final states such as completed and failed should be idempotent.

A Small State Model

You do not need a complicated state machine to start. A simple model is often enough:

created -> queued -> processing -> completed
                         |
                         -> failed

Each state should mean something clear:

created: the request was accepted
queued: background work has been scheduled
processing: the provider job has started
completed: the final asset is available
failed: the task cannot complete

The important rule is that terminal states should be protected. Once a task is completed or failed, retries and duplicate callbacks should not apply the same result again.

Store the Result Yourself

Many AI providers return a URL for the generated image. That URL may be temporary or provider-controlled.

For a real product, it is often safer to copy the result into your own storage:

Provider result URL -> app storage -> stable asset URL

On Cloudflare, that might mean storing the final image in R2 and serving it from your own CDN domain.

This makes future product behavior easier:

user ownership checks
downloads
cleanup
moderation
stable previews
billing history

The AI provider creates the image. Your application should own the product workflow around that image.

Where Multi-Model Apps Get More Complex

Async workflows become even more useful when an app supports more than one model or generation style.

A text-to-image model, an image editing model, and a reference-image workflow may all behave differently. Some may return results quickly. Others may need a provider-side job ID. Some may support high-resolution output. Some may have different input limits.

A product like Image 2 can expose those workflows through a simpler user interface while keeping provider-specific details in the backend. For example, separate pages such as the GPT Images 2.0 image generator or the Nano Banana 2 AI image generator can still share the same general task lifecycle.

That is the main benefit of designing around the workflow instead of designing around one provider API.

Final Thought

AI image generation is not just a model call. It is a product workflow.

For experiments, a synchronous API route is enough. For production, async architecture gives you a cleaner way to handle slow jobs, duplicate callbacks, retries, storage, moderation, and credit accounting.

The model creates the image. The workflow makes the product reliable.