Run Your Google AI Studio App Locally (Before You Deploy)
Exported an app from Google AI Studio and got a blank page? Here is why index.html will not open on its own, and two ways to run the app on your computer — one with no install at all.
The quick answer
You exported your app from AI Studio, unzipped it, double-clicked index.html — and got a blank page. That is expected. An AI Studio app is a Vite project, and it has to be built or served before a browser can run it. You have two ways to see it on your computer: build and preview it in your browser with no install, or run a dev server with Node.js. Both are below.
Why double-clicking index.html shows a blank page
The index.html that AI Studio ships is a template. It points at a TypeScript + JSX entry file (something like /src/index.tsx), and browsers cannot execute TypeScript or JSX directly. When you open the file straight from disk — a file:// URL — nothing compiles those sources, so you get an empty page and a console full of module errors. Nothing is broken; the project just has not been built yet.
Option 1: Preview in your browser (no install)
If you do not have Node.js, or you just do not want to touch a terminal, React2Static builds the project in your browser and lets you preview the result:
The build runs locally with WebContainers, so your code never leaves your machine. This is the same output you would deploy — if it works in the preview, it will work on a host.
Option 2: Run it with Node.js
If you have Node 18 or newer installed, open a terminal in the unzipped project folder and run:
npm install
npm run devVite prints a local address (usually http://localhost:5173). Open it and the app runs with hot reload, so edits show up instantly. Use this if you plan to keep changing the code.
If npm run dev reports that the script is missing, open package.json and look at the "scripts" section — some exports name it start or preview instead.
Giving it the Gemini API key
Many AI Studio apps call the Gemini API and read the key from an environment variable while running locally. Look for a .env.example file in the project, or search the code for the exact variable name it expects — it is commonly something like GEMINI_API_KEY (note that Vite only exposes variables prefixed with VITE_ to the browser). Create a .env.local file in the project root with that variable:
GEMINI_API_KEY=your_key_hereRestart the dev server after adding it. Keep this file out of version control, and treat the key as local-only — a key placed in front-end code ends up readable by anyone once you deploy, which is a separate problem covered in the deploy guide.
Still a blank screen? Quick checks
Once it works locally, how do I deploy it?
Build it into static files and drop them on a free host — no server needed. Full steps in Deploy a Google AI Studio app for free (no Cloud Run needed).
FAQ
How do I run a Google AI Studio app on my computer?
Either build and preview it in the browser with React2Static (no install), or, with Node.js 18+ installed, run npm install and npm run dev in the project folder and open the localhost URL it prints.
Why does index.html open to a blank page?
Because the project is a Vite app built from TypeScript and JSX, which browsers cannot run directly from a file. It has to be compiled first by a build tool or a dev server.
Do I need to install Node.js to run an AI Studio app?
No. If you do not want to install anything, React2Static builds and previews the app entirely in your browser. Node.js is only needed if you want a local dev server with hot reload.
Where do I put the Gemini API key when running locally?
In a .env.local file in the project root, using the variable name the code expects (often GEMINI_API_KEY). Restart the dev server after adding it, and never commit that file.