AI App Works in Preview but Not Live

My AI built app works in preview but not live, why?

Straight answer

The usual reason is missing settings on the live host. Your preview has secret values, like database keys, that let the app work; when you deploy, those secrets do not come along automatically and must be added to the live host separately. The app looks identical but cannot connect to anything, so it breaks.

Information current as at 5 July 2026

Few things are more deflating than an app that runs perfectly in the preview and then shows a blank page or an error the moment it is live. It feels random. It is not. It is nearly always the same, fixable cause, and once you know the pattern you can solve it in minutes.

Plain English

Environment variable: A secret setting, like a database key, kept outside the code and set per environment.
Production: The live version of your app that real users reach, as opposed to a preview.
Console: A hidden log in the browser that shows the errors a broken page is throwing.
API key: A password-like string that lets your app use an outside service.

What is really happening

Your app depends on secrets: the key to its database, the key to any payment or email service, and so on. In the preview, those secrets are already filled in, so everything connects and works. When you deploy, the code travels to the live host but the secrets deliberately do not, because they are kept out of the code for safety. Unless you separately add them to the live host, the live app has the right instructions but none of the passwords, so it cannot reach its database or services and it breaks. The app is not different; its environment is.

Why secrets are kept separate on purpose

It would be easier if the secrets just travelled with the code, but that is exactly what you do not want, because code often ends up somewhere public, and a database key in public code is an open door. So the safe pattern is to keep secrets as environment variables, values you set on each host separately, never written into the code itself. That safety choice is the very reason a fresh deploy has no secrets and has to be told them. The inconvenience is the security working as intended.

No pressure

Show us what you built.

If you have made something and it needs to become real, send it over. We will tell you honestly what it needs to be live, safe and yours, whether that is a quick fix you can do or a proper build. No obligation.

How to find the specific culprit

Open the live, broken page, then open your browser's developer console, a hidden panel that shows errors, usually reachable by right-clicking and choosing Inspect, then Console. A broken app almost always prints a red error there, and it is often startlingly specific: a failed connection, an undefined key, a blocked request. That message names the missing piece. Cross-check it against your preview: whatever secret the preview has that the live host does not is your answer. This one habit, reading the console, turns guessing into diagnosing.

The fix, and how to avoid it next time

The fix is to add every secret from your preview to the live host's environment settings, then redeploy so the app picks them up. Go through them one by one; a single missing key is enough to break everything. To avoid the problem next time, keep a simple checklist of every secret your app needs and confirm all of them are set on the live host before you consider a deploy finished. Most "works in preview, not live" cases are one forgotten value, and a checklist retires the whole category of surprise.

Questions, answered

What is an environment variable, simply?

A secret setting your app needs to run, like a database password or an API key, stored outside the code and set separately on each host. Preview and live are different environments, so each needs its own copy of these values. Missing ones are the top cause of a live app breaking.

How do I see the actual error instead of just a blank page?

Open the browser developer console on the broken page, usually by right-clicking, choosing Inspect, and opening the Console tab. Broken apps print a specific red error there that names what failed. That message is the fastest route to the cause.

I added the settings and it still fails, now what?

Redeploy after adding them, because the app only picks up new settings on a fresh deploy. If it still fails, check the values are exactly right with no stray spaces, that you set them on the live environment not just preview, and read the console for the next error, which may be a different missing piece.

Could it be something other than settings?

Sometimes. Other causes include a build that references a file that did not deploy, or code that assumed it was running in the builder. But missing environment variables are so common that you should rule them out first, and the console error will usually tell you which kind of problem you have.