Adding AI Features to a Web App Without Making It Fragile

#ai #webdev #javascript #architecture

AI features are easy to demo and hard to run in production. Models time out, return malformed output, cost money on every call and sometimes answer with total confidence and no accuracy. Here is how to build them so the rest of your app stays dependable.

1. Keep model calls on the server

Never call a model from the browser. Keep keys, prompts and provider logic behind your own API so you can add auth, rate limits, logging and provider changes without touching the client.

2. Constrain the output

Ask for structured output and validate it before using it. A response that doesn't match the schema should be treated as a failure, not passed to the UI.

import { z } from "zod";

const Reply = z.object({
  answer: z.string(),
  confidence: z.enum(["low", "medium", "high"]),
});

export async function ask(question: string) {
  try {
    const raw = await callModel(question);
    const parsed = Reply.safeParse(JSON.parse(raw));
    if (parsed.success && parsed.data.confidence !== "low") {
      return { ...parsed.data, escalate: false };
    }
  } catch {}
  return {
    answer: "I'm not sure about that. Let me pass you to a person.",
    confidence: "low",
    escalate: true,
  };
}

callModel stands for a thin wrapper around your provider's SDK.

3. Ground answers in your own data

For anything factual, retrieve the relevant content from your own documents or database and pass it to the model, with instructions to answer only from it. If nothing relevant is found, say so instead of guessing.

4. Plan for failure

Set timeouts on every call
Retry once with backoff, then fall back
Provide a non-AI path: a form, a search box or a human handover
Never block the main user flow on a model response if it can load afterwards

5. Control cost and load

Cache repeated questions and expensive results
Rate limit per user
Cap input and output length
Use a smaller model for simple tasks

6. Log everything you can

Store the input, retrieved context, output and validation result for each call. Without that you can't debug a bad answer or measure improvement.

7. Test with real examples

Keep a set of real questions with expected outcomes and run it whenever you change a prompt, model or retrieval step. A prompt tweak that fixes one case often breaks another.

8. Treat personal data carefully

Decide what is sent to the provider, what is stored and for how long, and how a user's data is deleted. In the UK, UK GDPR applies as soon as personal data is involved.

Summary

Treat the model as an unreliable but useful dependency: validate what comes out, have a fallback, watch the cost and keep a record of what it did.

If you would rather have this built than build it yourself, ZevIQ AI is a UK-based team that develops custom AI-powered web and app projects.

DEV Community