✓ Reviewed August 2026
Part 3
Steps 7–11

The GitHub "Bridge"

Critical file configuration before you export to GitHub. Read every word of this section.

🚨
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.
1
Configure index.html CRITICAL #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.
2
Create manifest.json CRITICAL #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, look for the GitHub icon and click "Export to GitHub" (also shown as "Save to GitHub" in some layouts). If prompted, authorize Google AI Studio's GitHub app. 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.

🔐
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 RepositoryChecklist

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.
← Part 2Build in AI Studio