---
title: Generating Web Apps using AI with Firebase Studio
url: https://calvin.my/posts/generating-web-apps-using-ai-with-firebase-studio
published: 2025-04-12
updated: 2026-09-17
category: AI
tags:
- firebase studio
- Firebase
- Web
- vibe coding
summary: The post demonstrates using Firebase Studio to generate a web app from a natural-language prompt. The example app accepts a video, captures playback snapshots at 10-second intervals, labels the images sequentially, and packages them for download. After defining requirements and optional styling, Firebase Studio generates code and a preview in about two minutes. Testing with a 21-second video produced three images, which were successfully downloaded as a ZIP archive.
---

# Generating Web Apps using AI with Firebase Studio

## Pre-requisites

Sign in to [Firebase Studio](https://firebase.studio/)

* * *

## In Firebase Studio

1. You can import an existing project. Or you can start from scratch by entering what you want to build.

2. We start with the following requirements.

   ```markup
   Create an app that takes video file as input, and capture a snapshot of the playback every 10 seconds. 
   Images are stored into a new folder, with filename labelled using running number.
   ```

3. Firebase Studio proposes a list of features and styling for the App. You could modify on top of this.

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/15e38e99-f153-4ffb-b08b-03efc6a98fc8.png)

4. Click "Prototype this App" to generate the code. After 2 minutes, the code is ready.

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/240d6c5b-2218-4e3c-805b-0a26153f997b.png)

5. A preview of the app is also presented. We can see the color theme is similar to what was set earlier.

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/0de79425-4d30-447b-bc81-87cb100e58fc.png)

* * *

## Test Our App

1. First, we select a video from the local storage.

2. Click the "Capture Snapshots" button.

3. We can see 3 images are created.

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/995a61c2-1247-4dc7-aa94-4145afb5bcff.png)

4. This is correct because the original video length is 00:21

5. Next, we click on the download button, and a zip file containing these images is downloaded.

   ![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/e66d2ac3-5754-443d-a7af-1e8a2ab0718d.png)