DEV Community

Cover image for New Backend Integrations for the Firebase Studio App Prototyping Agent
Amanda Cavallaro
Amanda Cavallaro

Posted on

5 1 1 1 1

New Backend Integrations for the Firebase Studio App Prototyping Agent

#firebase #studio #cloud

Announcement

New backend integrations for the Firebase Studio App Prototyping agent were announced today at the Google I/O 2025 Developer Keynote.

Shall we try it out together? Go to the Firebase Studio, and use the App Prototyping agent.

The Use Case We Will Prototype: Improve Your Multifactor Auth With Vonage APIs and Firebase

I've one project I've created (without the Studio), titled Improve Your Multifactor Auth With Vonage APIs and Firebase, which uses Firebase Services to store functions with Cloud Functions, data in the Cloud Firestore database, and Firebase hosting.

While this project wasn't created using the Prototyping agent, I am keen to build something similar and try it out, in theory I should describe an application that needs database and authentication then it is all created using emulators, which is how I do during my testing anyway and then once we click to publish after we set up the Firebase project and project billing account information, Firebase provisions the Firestore, Firebase Auth and App Hosting.

So let's try it out!

Prototype the Agent with AI

I've prototyped the agent using AI, explaining its purpose in the text area.
Hello, Name<br> Welcome back<br> Prototype an app with AI<br>

Blueprint Generation

The blueprint then showed me the features, the style guidelines, and the Authentication and Cloud Firestore under a new section called “Stack”.

Phone Number Input — User interface for inputting phone number and requesting a verification code.<br> Send Verification Code — Utilize Vonage Verify 2 API to send a verification code to the user's phone number via SMS. This utilizes a private key from the environment.<br> Store Request ID — Save the request ID (returned by the Vonage API) in a Firestore database, indexed by phone number.<br> PIN and Password Input — User interface to input the received PIN and a new password.<br> PIN Verification and Password Update — Verify the entered PIN against the Vonage Verify 2 API. Upon successful verification, update the password in the Firestore database.<br> SIM Swap Detection — Check SIM swap status using the Vonage CAMARA API to check for risk. This is exposed as a backend tool.<br> Color<br> Layout<br> Clean layout with sufficient spacing to facilitate a pleasant user experience.<br> Typography<br> Clean, sans-serif font for readability and a modern feel.<br> Iconography<br> Use simple, line-based icons for a clean and modern look.<br> Animation<br> Use subtle transitions when changing from one state to another.<br> UI<br> TypeScript, NextJS, Tailwind CSS<br> Backend<br> Experimental<br> Cloud Firestore, Firebase Authentication<br> Preview backend runs in this workspace until published

I then clicked on the "Prototype this app" button at the bottom of the page.

Preview and Testing

It created a preview, assigned my app the name "SecurePass," which I had not initially given it, and generated a cool UI for me. It's super cool; it's added a login and register button to the navigation bar. It all uses the Firebase Emulator Suite.

It got back to me with the following message:

"OK, let's prototype this app!

The first iteration of your app prototype is ready! Try it out in the preview window and describe the changes you'd like to make below.

Want to make changes directly? Hit the </> button at the top to switch to the code editor, or click below."

UI Generated containing

As I attempted to interact with the UI, I encountered some dependency issues. I had the option to either edit the code myself or use Gemini to help resolve the issues. I then had to adjust the dependencies and any necessary environment variables.

Publish

When I was ready and happy with the code in the preview at the top right, I clicked on "Publish", which gave me a Firebase project ID, a billing account to choose from and a button to enable firebase services, then finally I could choose between publishing now or later - and there it was, hosted on the cloud, with auth and database enabled!

Final Remarks

This was cool and fast to create. It feels like I'm talking to Gemini, being integrated with Firebase, and everything is magical. It goes beyond using project IDX. Funny thing, I went on the project IDX website to copy and paste for this link, and I see it now turned into Firebase Studio. As they state: "As part of evolving IDX past its preview stages, we are happy to announce that IDX is joining the Firebase family! Firebase Studio will build upon what we've created with IDX by further blending AI-assistance to help you build the next generation of apps.

Your existing IDX workspaces, settings, sharing URLs, and more will continue to work in Firebase Studio. Let's get started!".

Ha, that makes total sense, and I love that it's connected now. Makes the developer's life easier; everything you need is in one tool. I can see myself using this more often. Do you have any specific use cases in mind for how you plan to use this?

Check out the
Top Firebase Studio updates from Google I/O 2025.

Top comments (0)