GOOGLE
AI STUDIO
→ ANDROID
A complete step-by-step guide to creating professional AI-powered Android apps using Google AI Studio, GitHub, and Vercel — no prior coding experience required.
A production-ready AI app — live on the web, installable on Android
- Fully functional AI-powered app (game, learning tool, chatbot, etc.)
- Professional deployment on Vercel with automatic HTTPS
- Installable Android PWA — no Play Store required
- Update system: change once in AI Studio, auto-deploys everywhere
Account Setup
Create these three accounts in order. Each one unlocks the next part of the pipeline.
Go to gmail.com → Create account → For my personal use. Fill in your real name, choose a username carefully (this becomes your email address), and set a strong password (uppercase + lowercase + numbers + symbols). Add a recovery phone number and complete SMS verification.
Go to github.com → Sign up. You CAN use your Gmail address, but you MUST create a separate password — different from your Gmail password. Choose a professional public username.
Complete the captcha, verify your email by clicking the link GitHub sends, and choose the Free plan.
Go to vercel.com → Sign Up → Select "Continue with GitHub" (do NOT use email or other social login). Log in with your GitHub credentials, click Authorize Vercel, choose the personal/hobby plan, and complete onboarding.
Build Your App in AI Studio
Describe your idea, let Gemini build it, test it thoroughly — then prepare it for deployment.
Go to aistudio.google.com and sign in with your Gmail account. Look for Build, Create, or New in the left sidebar or main area.
Type what you want your app to do, or browse the sample template gallery. Example prompts:
"Create a trivia game about world geography with multiple difficulty levels, score tracking, and fun facts after each answer.""Build a language learning assistant that helps users practice Spanish vocabulary and conversational phrases with interactive exercises."AI Studio will generate your app in 30–60 seconds.
Use AI Studio's preview/test mode. Check: Does the AI respond appropriately? Are there errors? Does it handle unusual inputs gracefully? Refine instructions and adjust settings until you're completely satisfied.
The GitHub "Bridge"
Critical file configuration before you save to GitHub. Read every word of this section.
Open index.html in the AI Studio code editor. Add exactly two lines — do NOT delete anything existing.
Line 1 — inside <head>, before </head>:
<link rel="manifest" href="/manifest.json">Line 2 — inside <body>, after <div id="root"></div>:
<script type="module" src="/index.tsx"></script>Create a new file in the root folder named manifest.json. Paste and customize:
{
"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": "https://cdn-icons-png.flaticon.com/512/1160/1160358.png",
"type": "image/png",
"sizes": "512x512"
}]
}Keep short_name under 12 characters. Change theme_color to match your app.
In AI Studio, look for the GitHub icon and click "Save to GitHub" / "Export to GitHub". If prompted, authorize Google AI Studio in your GitHub settings. Set a repository name (lowercase + hyphens, e.g. my-ai-app), set visibility to Public, and click Save.
You'll see a confirmation: "All committed" or "Successfully saved to GitHub."
Go to github.com and open your new repository. Confirm these files exist:
index.html or manifest.json are missing or incorrect, edit them directly on GitHub before deploying to Vercel.Deploy to Vercel
Get your API key, import the project, add environment variables, and go live.
Return to aistudio.google.com. Look for "Get API Key" (top-right or main dashboard) → click "Create API key". Copy the resulting key — it starts with AIzaSy...
Go to vercel.com → Add New… → Project. Vercel shows your GitHub repos — click Import next to your new repo. If it doesn't appear, click "Adjust GitHub App Permissions" and grant repository access.
The three green dots = Production + Preview + Development. Leave all checked for each variable.
Scroll to the bottom of the Vercel configuration page and click the big Deploy button. The build takes 1–3 minutes. Watch the status:
On success, you'll see confetti 🎉 and your live URL: your-project-name.vercel.app
Install on Android
Transform your web app into a native-feeling Android experience with PWA technology.
short_name). Tap it — the app opens in standalone mode with no browser UI.Update Workflow
Understanding this SOP will save you hours of frustration every time you push changes.
index.html — removing the critical <script> tag. This causes a blank page. The SOP below prevents this.Make Changes in AI Studio
Update your app's features, AI behaviour, or interface. Test thoroughly in AI Studio's preview mode before doing anything else.
Re-check Critical Files in AI Studio — BEFORE Saving
Verify index.html still has the script tag. If missing, add it back now:
<script type="module" src="/index.tsx"></script>Also verify manifest.json is still present and correct.
Save to GitHub
Click "Save to GitHub" in AI Studio. Wait for the confirmation message before proceeding.
Verify on GitHub (If Unsure)
Open your repo and check index.html. If the script tag is missing, edit the file directly on GitHub, add it back, and commit with: Restore script tag after AI Studio update
Wait for Auto-Deploy (1–2 min)
Vercel detects the commit and automatically rebuilds. Monitor progress in your Vercel dashboard. Your installed Android app will reflect the update after a refresh or restart.
Advanced: Git CLI Workflow
# Clone your repo locally
git clone https://github.com/your-username/your-repo.git
cd your-repo
# After AI Studio pushes an update
git pull origin main
# Check and fix index.html if needed, then:
git add index.html
git commit -m "Restore script tag after AI Studio update"
git push origin mainTroubleshooting
Diagnose and fix the most common deployment issues.
- App works in AI Studio but shows blank page on Vercel
- Browser console: "Failed to load resource" errors
- Go to GitHub → open
index.html→ check that<script type="module" src="/index.tsx"></script>is inside<body> - If missing, edit on GitHub, add it back, and commit
- Verify
index.tsxormain.tsxexists in the repo root - Check Vercel build logs for specific errors
- App loads but AI features don't work
- Error messages about API key in browser console
- Vercel → Your Project → Settings → Environment Variables
- Verify all 4 variables:
API_KEY,VITE_API_KEY,GEMINI_API_KEY,GOOGLE_GENERATIVE_AI_API_KEY - Regenerate API key in AI Studio if needed, update all 4 variables
- Redeploy: Vercel → Deployments → ⋯ → Redeploy
"Cannot find module 'vite'"→ ensure package.json includes all dependencies"Build command failed"→ build command must benpm run build"Memory limit exceeded"→ simplify app or remove large dependencies
- Click the failed deployment in Vercel and read the error log carefully
- Fix the specific error in your GitHub repository and commit — Vercel auto-redeploys
- No "Install app" prompt appears in Chrome
- "Add to Home Screen" is grayed out
- Verify
manifest.jsonexists in the root of your GitHub repo - Confirm
index.htmlhas<link rel="manifest" href="/manifest.json"> - Use Chrome specifically (not other browsers)
- Check Chrome DevTools → Application → Manifest tab for errors
- Vercel URL must use HTTPS (it does by default)
- Force refresh: open app → pull down to refresh, or close and reopen
- Clear app cache: Android Settings → Apps → Your App → Storage → Clear Cache
- Reinstall: uninstall, visit Vercel URL in Chrome, reinstall fresh copy
- Go to github.com/settings/installations
- Find "Vercel" → Configure → grant access to your repositories → Save
- Return to Vercel and try importing again
Best Practices & Pro Tips
Free Tier Limits
| Service | Free Tier Includes |
|---|---|
| Google AI Studio | Free API access for development and testing — see ai.google.dev/pricing for current limits. No billing setup needed for basic use. |
| Vercel | 100 GB bandwidth/month · Unlimited deployments · Automatic HTTPS · Serverless functions |
| GitHub | Unlimited public repositories · 2,000 Actions minutes/month · Private repos with limits |
Glossary & Appendix
YOU DID IT.
You now have a production-ready AI application live on the internet and installable on Android. Here's everything you've accomplished: