GitHub Bridge — AI Studio → Android Guide

Used AI Studio's built-in Publish shortcut from Part 2 instead? You can skip straight to Part 5 — Install on Android with that URL. Come back here whenever you want unlimited projects, a custom domain, or a repo you can edit by hand.

Most Important Section — Read CarefullyBefore you click "Export to GitHub," two essential files must be correct in AI Studio's Code tab. Skipping this step can leave your deployed app showing a blank page or failing to install on Android.

Configure index.html

Critical file 1

Open index.html in the AI Studio Code tab. Add these two lines if they're not already present — do NOT delete anything existing.

Inside <head>, before </head>:

html

<link rel="manifest" href="/manifest.json">

Inside <body>, after <div id="root"></div>:

html

<script type="module" src="/index.tsx"></script>

Without the script tag → blank page. Without the manifest link → app not installable on Android.

Create manifest.json

Critical file 2

Create a new file in the root folder named manifest.json. Paste and customize:

manifest.json

{
  "short_name": "YourApp",       // shown under icon
  "name": "Your Full App Name",
  "start_url": "/",
  "display": "standalone",       // native app look
  "theme_color": "#020617",
  "background_color": "#020617",
  "icons": [{
    "src": "/icon-512.png",
    "type": "image/png",
    "sizes": "512x512"
  }]
}

Keep short_name under 12 characters. Change theme_color to match your app, and upload a real icon file to the repo rather than linking an external image — Android caches PWA icons at install time, and a broken external link means a broken icon forever.

10
Export Your App to GitHub

In AI Studio's Code/Preview pane, look for the GitHub icon (cat silhouette) in the header bar and click it — this opens the Push to GitHub panel (you may also see it called "Sync with GitHub"). The first time, authorize Google AI Studio's GitHub app when prompted. Set a repository name (lowercase + hyphens, e.g. my-ai-app), set visibility to Public, and confirm.

You'll see a confirmation once the initial commit lands in your new repository. After this first push, AI Studio keeps a sync link to that same repo, so later updates in Part 6 push to it directly rather than creating a new one each time — worth double-checking, since some users have reported the sync occasionally lagging behind; if a later push doesn't show up on GitHub, re-open the GitHub panel and push again.

Your API key does not travel with the export. For security, AI Studio does not copy your GEMINI_API_KEY secret into the GitHub repo. You'll add it manually as an environment variable in Vercel in the next part — that's expected, not a bug.
11
Verify Your GitHub Repository
Checklist

Go to github.com and open your new repository. Confirm these files exist:

your-app-repo/ │ ├── index.html ← MUST have script tag + manifest link ├── manifest.json ← MUST exist with name, colors, icon ├── index.tsx or main.tsx — React entry point ├── package.json Node.js dependencies ├── vite.config.ts Build config ├── src/ Source code └── public/ Static assets

If index.html or manifest.json are missing or incorrect, edit them directly on GitHub (pencil icon on the file page) before deploying to Vercel.