Sreeraj Sreenivasan

Posted on Jun 28

Building and Publishing a Complete Full-Stack Web and Native Android App on Google AI Studio

#googleaistudio #webdev #android #ai

No SDK to install. No local environment to configure. Just a prompt — and a production app.

If you've been waiting for the moment when "describe what you want" actually results in a real, deployable app — that moment is now. Google AI Studio's Build mode lets you go from a plain English prompt to a full-stack web app and a native Android app, all inside your browser, with one-click deployment to Google Cloud.

This tutorial walks you through the entire journey: from your first prompt to a live web app and a published Android app on the Google Play Store's Internal Test Track. We'll build a simple Task Manager with AI suggestions — a practical app that's complex enough to show what the platform can really do, but beginner-friendly enough to follow without prior experience.

What is Google AI Studio Build Mode?

Google AI Studio is Google's platform for building with the Gemini API. The Build mode — powered by the Antigravity Agent under the hood — is where you create full apps through natural language prompting.

Here's what it gives you out of the box:

For web apps:

A React frontend (client-side)
A Node.js server runtime (secure API calls, database connections, npm packages)
Firebase integration (Firestore database + Authentication) on demand
One-click deploy to Google Cloud Run

For Android apps:

Production-quality Kotlin code with Jetpack Compose
An in-browser Android emulator to preview your app
ADB support to install directly on a physical device
Direct-to-Play Store publishing via your Google Play Developer account

Bonus for beginners: Your first two app deployments to Google Cloud are completely free — no credit card required.

What We're Building

App idea: A Task Manager where users can log in, add tasks, and get AI-powered suggestions on how to prioritise or complete them.

Why this is a great starter project:

It needs user authentication (real-world requirement)
It needs a database (tasks need to persist)
It has a clear UI (list, add, delete)
The AI layer adds genuine value (priority suggestions via Gemini)

Prerequisites

Before you start, you'll need:

A Google account (free)
A browser (Chrome recommended)
For Android publishing: a Google Play Developer account ($25 one-time fee)

That's it. No Node.js install, no Android Studio, no local setup.

Part 1: Building the Web App

Step 1 — Open Google AI Studio Build Mode

Go to aistudio.google.com
Sign in with your Google account
Click Build in the left sidebar
You'll see the Build mode interface with a prompt box at the centre

Step 2 — Write Your First Prompt

In the prompt box, type a clear description of your app. Be specific — the more detail you give, the better the output.

Try this prompt:

Build a full-stack task manager web app. Users should be able to sign up 
and log in with Google. Once logged in, they can add tasks with a title 
and description, mark tasks as complete, and delete them. Each task should 
have an "AI Suggest" button that calls the Gemini API to return a 
short suggestion on how to approach or prioritise that task. Store tasks 
in a database per user. Use a clean, minimal design with a white and 
green colour scheme.

Tip: You can also click the "I'm Feeling Lucky" button if you want Gemini to generate a project idea for you — great for when you want to experiment without a plan.

Hit Enter (or click the send button). The Antigravity Agent will now:

Generate an app blueprint (name, features, style)
Show you the plan before writing any code
Ask for your approval before proceeding

Step 3 — Review the Blueprint

AI Studio will present a blueprint before generating code. It typically includes:

App name (e.g. "TaskFlow AI")
Features list (authentication, CRUD tasks, AI suggestions)
Style guidelines (colours, fonts, layout)

Review it. If anything looks off — say the colour scheme or app name — click Customize and edit it directly. This is your last easy chance to steer the output before code generation begins.

When you're happy, click Generate.

Step 4 — Watch the Agent Build

The agent will now write your full-stack app across multiple files simultaneously. You'll see:

The Preview pane on the right updating as the app takes shape
The Code tab (click it) showing the generated React and Node.js files
The agent managing file dependencies and propagating changes across the stack automatically

This takes 1–3 minutes. Don't close the tab.

Step 5 — Enable Firebase (Database + Auth)

Once the initial app is generated, the agent will detect that your app needs user data storage and authentication. A prompt will appear:

"Your app needs a database and user login. Enable Firebase?"

Click Enable Firebase. The agent will automatically:

Create a Firebase project
Provision a Firestore database
Enable Google Authentication
Connect your app's codebase to Firebase
Generate a sign-in page with Google Sign-In

You don't write a single line of Firebase configuration code. It's all handled.

Step 6 — Preview and Iterate

Use the Preview pane to test your app live. Try:

Signing in with your Google account
Adding a task
Clicking "AI Suggest" on a task
Marking a task as complete
Deleting a task

If something doesn't work or look right, just type a follow-up prompt in the chat:

The "AI Suggest" button text is too small on mobile. Make it larger and 
add a loading spinner while the AI response is generating.

The agent updates only the affected files and re-renders the preview. This iterative loop — prompt, preview, refine — is how you build with AI Studio.

Pro tip: You can also use the edit tool in the preview window to draw or annotate directly on the app and tell the agent what to change visually.

Step 7 — Deploy the Web App

When you're happy with the app, click Deploy.

AI Studio will:

Package your React frontend and Node.js backend
Deploy to Google Cloud Run (fully managed, auto-scaling)
Give you a live public URL in under a minute

Your first two deployments are completely free. You'll get a URL like:
https://taskflow-ai-xxxx.run.app

Share it. It's live.

Part 2: Building the Native Android App

Now let's turn the same idea into a native Android app — without installing Android Studio.

Step 1 — Start an Android Build

In Google AI Studio Build mode, look for the "Build an Android app" option (available as of Google I/O 2026). Select it.

You'll now be in Android build mode, which generates Kotlin + Jetpack Compose code instead of React + Node.js.

Step 2 — Prompt for the Android App

Use a prompt tailored for mobile:

Build a native Android task manager app using Kotlin and Jetpack Compose. 
Users can add tasks with a title and a priority level (High, Medium, Low). 
Tasks are shown in a list sorted by priority. Each task has a swipe-to-delete 
action. Include a floating action button to add new tasks. Use Material 3 
design with a green primary colour. Keep the UI clean and minimal.

The agent will generate production-quality Kotlin code using the latest Jetpack Compose patterns.

Step 3 — Preview in the Browser Emulator

Once the code is generated, AI Studio launches an in-browser Android emulator. You can:

Tap through the app
Add tasks
Test swipe-to-delete
See how Material 3 components render on a real Android screen size

No Android Studio. No emulator download. It runs right in your browser.

If something needs changing, prompt it:

The floating action button is overlapping the last item in the task list 
on smaller screens. Add bottom padding to the list so the last item is 
always visible above the FAB.

Step 4 — Install on a Physical Device (Optional)

Want to feel it on a real phone? AI Studio supports ADB (Android Debug Bridge):

Enable Developer Options on your Android device (Settings → About Phone → tap Build Number 7 times)
Enable USB Debugging
Connect your phone via USB
In AI Studio, click Install via ADB

Your app will install on your device in seconds.

Step 5 — Publish to Google Play

This is where it gets impressive. AI Studio can publish directly to Google Play's Internal Test Track — a private distribution channel you share with up to 100 testers.

What you need first:

A Google Play Developer account ($25 one-time fee)
An app created in the Google Play Console (just the name and package ID)

Steps in AI Studio:

Click Publish to Play Store
Connect your Google Play Developer account
Select your app in the Play Console
AI Studio generates a signed APK/AAB and uploads it to your Internal Test Track

Done. Your testers get a notification to install the app via the Play Store.

Understanding What Just Happened

Let's take a moment to appreciate what the platform handled for you:

What you did	What normally takes
Described the app in plain English	Writing technical specifications
Clicked "Enable Firebase"	Hours of backend configuration
Typed follow-up prompts	Manual code edits across multiple files
Clicked "Deploy"	DevOps, CI/CD pipeline setup
Clicked "Publish to Play Store"	App signing, AAB generation, Play Console upload

None of this required you to know React, Node.js, Kotlin, Jetpack Compose, Firebase SDK configuration, or Google Cloud deployment pipelines. The Antigravity Agent managed it all.

What the Generated Code Looks Like

Just because AI Studio writes the code doesn't mean you can't see it. Click the Code tab at any time to inspect:

Web app — example Node.js server snippet (AI-generated):

// server/index.js
import express from 'express';
import { GoogleGenerativeAI } from '@google/generative-ai';

const app = express();
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

app.post('/api/suggest', async (req, res) => {
  const { taskTitle, taskDescription } = req.body;
  const model = genAI.getGenerativeModel({ model: 'gemini-2.0-flash' });

  const prompt = `Give a short, practical suggestion (2-3 sentences) on how 
  to approach this task: "${taskTitle}". Context: ${taskDescription}`;

  const result = await model.generateContent(prompt);
  res.json({ suggestion: result.response.text() });
});

Notice the API key is on the server side — never exposed to the client. AI Studio enforces this security pattern by default.

Tips for Getting Better Results

Be specific in your initial prompt. Vague prompts produce generic apps. Include colour schemes, user flows, and specific features you want.

Use the blueprint review. Don't skip the blueprint step. It's your clearest checkpoint before code generation.

Iterate in small steps. Don't try to change 10 things in one prompt. Make one change, preview it, then make the next.

Read the generated code. Even as a beginner, skimming the output teaches you real patterns — React components, API routes, Kotlin composables. It's a free coding education alongside every build.

Export to Antigravity for complex projects. If your app grows beyond what AI Studio's browser interface handles comfortably, click Export to Antigravity. Your entire project state — files, conversation history, secrets — transfers seamlessly.

Limitations to Know

Web apps default to React + Node.js. If you need a different stack, Antigravity gives you more flexibility.
Android apps don't yet support Firebase Auth within AI Studio's Android build mode (as of June 2026). You'll need Antigravity or Android Studio for auth-integrated Android apps.
Free deployment quota. Two free Cloud Run deployments. After that, Cloud Run's free tier applies (generous for low-traffic apps, but monitor usage).
Firebase Studio is sunsetting. If you've previously used Firebase Studio, note that new workspace creation was disabled on June 22, 2026. Migrate existing projects to Google AI Studio or Antigravity.

What's Next

You've built and deployed a full-stack web app and a native Android app — entirely from your browser, entirely through prompting. Here's where to go from here:

Add Google Workspace integration — AI Studio now supports Sheets, Drive, and Docs as data sources directly in your apps.
Explore the Gemini API — swap gemini-2.0-flash for gemini-2.5-pro in your server code for more capable AI responses.
Export to Antigravity — for team collaboration, custom deployment targets, or deeper code control.
Upgrade your Android app — use Android Studio's migration agent to move your AI Studio-generated Kotlin app into a full professional Android project.

The gap between "I have an app idea" and "my app is live" used to be measured in weeks. With Google AI Studio in 2026, it's measured in hours — or less.

Start building at aistudio.google.com. Your first two deployments are free.

Have questions or got stuck on a step? Drop a comment below — happy to help.

Tags: googleaistudio, beginners, webdev, android, ai

DEV Community