Putting agentic AI to work in Firebase Studio

Agents are the big story in AI now. Putting agentic AI to work in software engineering can be done in a variety of ways. Some agents work independently of the developer’s environment, working essentially like a remote developer. For example, Cognition AI’s Devin has its own workspace, complete with a shell, code editor, and web browser. Other agents work directly within the developer’s own environment, sharing the shell, editor, debugger, and other tools. Google’s Firebase Studio (formerly Project IDX) is an example of the latter, drawing on Google’s Gemini large language model to help the developer prototype and build applications in a shared environment.

[ Related: Agentic AI – Ongoing news and insights ]

An AI assistant is like power steering. The programmer, the driver, remains in control, and the tool magnifies that control. The developer types some code, and the assistant completes the function, speeding up the process. The next logical step is to empower the assistant to take action—to run tests, debug code, mock up a UI, or perform some other task on its own. 

In Firebase Studio, we get a seat in a hosted environment that lets us enter prompts that direct the agent to take meaningful action. We can tell Gemini to go do such and such, and it will try to enact our intent, making changes to files and running commands. This is the essential difference between an agent and an assistant that is limited to providing a response to prompts.

Let’s build a storefront

Gemini in Firebase includes an app prototyping agent that you can prompt to explore ideas for apps. In the prompt window, I’ll enter “Let’s build a storefront that sells outdoor gear.”

Matthew Tyson

And Gemini responds with a plan for prototyping the app. As you can see, Gemini’s plan includes a product catalog, a product filtering tool, and a shopping cart. The agent even suggests some style guidelines.

Matthew Tyson

Now, let’s click the “Prototype this App” button…

Matthew Tyson

Impressive. We already have a UI. The price range slider is a little funky, but it is functional. While it’s missing a knob, it does filter the set of visible products on the right. The category selector also works. The UI is also responsive, and the layout handles window resizes well. The product description and images are all AI generated, and the images are nonsensical, but it’s just test data anyway.

It’s just a beginning. We didn’t specify what tech stack to use. We don’t know anything about how the app is implemented, but the AI agent has taken our high-level prompt and taken action within the environment to cause work to be done.

The Firebase development environment

And that environment is interesting. Firebase Studio gives us the preview pane we are looking at and a managed cloud VM infrastructure with compute and other resources that let us both run the code and get our hands on the internals. Let’s take a look at the guts that the Gemini AI model has created for us.

We can either hit the “Edit the Code” button or use the input box to “Describe the changes you want to make.”

First, I tried entering the following prompt into the input box:

The price range slider is missing a knob on the right hand side of the slider, can you fix that? 

After a couple of minutes, the preview reloaded and indeed the slider was fixed.

Gemini also output the set of changed files, which was the.vscode/settings.json file and src/components/ui/slider.tsx. The latter file makes perfect sense. However, I’m not sure why Gemini would modify the former, so I clicked it. The.vscode/settings.json file opened in a middle pane, and included the following:

{
'IDX.aI.enableInlineCompletion': true,
'IDX.aI.enableCodebaseIndexing': true
}

Now I want to actually look at the code. Clicking on “Edit the Code” drops us into the IDE proper, a web-based incarnation of Visual Studio Code:

Matthew Tyson

This setup is similar in layout to Microsoft’s VS Code for the Web. However, in that case you attach the IDE to a VM, whereas here in Firebase Studio we have a managed internal environment.

Looking at the file browser, Firebase Studio has given us a Next.js app. That’s a sensible choice as a default. It gives us an all JavaScript/TypeScript stack that can handle both the front end and back end. It also means there is a simple, ordained deployment path that works well from a hosted environment like this, which is to say the creator of Next.js, Vercel, among others.

We should also note that the Firebase environment is well integrated with GitHub, so we can do all the things we need to do on that front. We could have launched this app from an existing GitHub repo, for instance.

Besides the typical components we’d expect in a Next.js app, there is a /.idx/dev.nix file. This is the environment file, describing what tools and packages are installed into the VM, using the Nix package manager. 

Chatting with Gemini in Firebase

On the right-hand pane of Firebase Studio, there are two tabs, one for a preview and one for Gemini. Opening Gemini gives us access to the AI chatbot. I thought I’d test it out by asking a general question:

Can you describe how this app works? Where is the data coming from?

Gemini does a good job of describing the overall structure and tech in use, but the bit I’m really interested in is this:

No External API: There are no clear indicators of external API calls in the file list. If there were, you might expect to see files related to data fetching libraries (like axios or fetch) or API-specific code.

No Database Files: Similarly, there are no files that strongly suggest a direct connection to a database within the client-side code.

This is a big chunk of architecture we’d need to deal with IRL. So, let’s see what Gemini thinks about a plan for adding that. I ask the AI:

If we wanted to make this data live, what steps would you suggest for the simplest path to using real data that can be CRUDed?

Gemini gives several reasonable suggestions like MongoDB and PostgreSQL. However, one jumps out:

Firebase: Using Firebase Firestore as your database and leveraging Firebase SDKs in your Next.js app can be a very simple approach, as it minimizes the need for a separate backend server and provides built-in authentication and security rules.

Firebase Firestore is Google’s hosted data API, and it’s not a bad choice. After all, we are using a Google cloud service already, and Firestore would give us an API-based data store that would handle any scale we needed. Here we see one reason Google would give us free access to Firebase Studio, namely the integration with other Google Cloud services. Google wants a symbiotic relationship between its cloud and developers, and developers benefit from the symbiosis as well.

Fumbling with Firebase Firestore

Now I want to see what Gemini can really do. I enter:

OK, go ahead and implement integration with Firestore, create whatever Next.js services are necessary, wire them together with the new data store, populate it with some test data, and make the UI work using that new backend.

Gemini responds:

This is a significant request that involves multiple steps across different parts of the application (backend services, database integration, and frontend UI). To ensure I can implement this… I’m sorry, but I can’t help you with this.

Me:

I knew it! OK, can you help me start the process? Maybe, start by provisioning Firestore and adding a connector to it?

To which Gemini replies that it can help me out, but it needs several bits of information:

Firebase Project: Do you already have a Firebase project set up for this application? If so, I’ll need the project ID. If not, you’ll need to create one in the Firebase console.

Firebase Initialization: How is Firebase initialized in your Next.js app? Do you have a dedicated file for Firebase configuration?

Authentication: Will you be using Firebase Authentication? This is important for setting up secure access to Firestore.

Which is precisely the kind of actual software developer work I was hoping to offload to the AI. Especially the authentication parts. I hate that part. I hate going to another window and setting up an account and getting an ID for the user and the project and managing the keys and certs and whatever else I need to cut and paste into the app or save in a key store somewhere or otherwise manage responsibly. 

It appears I’m at a dead end here, but let me see. Let’s try this directly:

Can you please stand up a Firestore instance for me, and deal with whatever auth considerations are necessary?

Not surprisingly, that doesn’t work. So I try:

OK, OK. How about we set up a local MongoDB instance instead?

To which Gemini replies by giving me the steps necessary. But I don’t want steps, I want action. I want agency. So I say:

I mean, can you go ahead and install all the necessary tools, install the MongoDB server, create a test user and database in there?

And Gemini tells me, among other things, that:

I’m unable to directly execute commands on your local machine to install software or manage system services like a database server. My capabilities are limited to interacting with your project files and running commands within the provided terminal environment, but I cannot perform system-level installations or configurations.

Which is not a limitation I was aware of. Probably if I had RTFM at first, I would, but I didn’t, because I have AI. It’s a hallmark of our new era that we can ask our tools about their capabilities and get a reasoned response.

Working up an admin page

I back off from setting up the Firestore back end and ask:

Not to worry. Let’s do something simpler. Can you create an admin page that lets me add new items to our existing data? I mean, just leave everything else as is. Just a simple back office page, don’t worry about auth yet.

Gemini suggests a plan including several new files and asks:

Let’s start by creating the new page file. What would you like to name the file for the admin page? For example, we could name it admin/page.tsx.

And I reply:

Sure, just go ahead and make whatever changes you think are necessary, I’ll check it out when you are done.

Gemini displays a dialog in which the new file changes are defined and gives me buttons to “Create File” or “Review Changes.” Clicking “Review Changes” brings up a diff file for the proposed page.tsx. It looks reasonable, so I hit “Create File.” Gemini whirs and presents a similar dialog for a new src/app/api/products/route.ts file, which makes perfect sense—that will handle the Next.js route on the back end. 

Now Gemini says:

You can now navigate to the /admin route in your browser to access the admin page and add new products.

I point out that we need a link to the admin page, and Gemini agrees. After another change confirmation (for a src/components/layout/header.tsx file) and a page reload, I see the Admin link. Clicking it opens a simple input form:

Matthew Tyson

I input some test data and hit “Add Product.” Gemini insists on an image URL, so I put in “foo” and now it accepts the submit. 

Filling in some gaps

I notice there is no product type there, so I’m not sure how I can filter for this new item, to see if it really showed up. Also, the new admin page doesn’t have a link back to the home page, so it’s a back arrow for me. Still, Gemini successfully performed a lot of the grunt work in setting this page up.

Back on the main page, I don’t see my Warg Boots listed. It’s the same list of products as before. So I ask Gemini to show me the contents of the products.tsx file, and it shows me:

export const products = [
{
'name': 'Warg Boots',
'description': 'Keeps the dire wolf's paws warm and clean.',
'price': 1000,
'imageUrl': 'foo',
'id': '1746565585872'
}
];

Which is troubling. It’s cool that Gemini has access to the contents. But this entry should have been added to the list, not replaced it. I return to the main page and hit reload:

Matthew Tyson

Which is an error. It looks like we broke the app. The POST handler appears to have rewritten the product list, instead of updating it, and somewhere something more basic has gone wrong to where the page won’t load. 

Things have gone awry, but that’s normal. It is still software development, after all.

Offload the grunt work

Obviously, we are a long way off from a non-programmer frolicking around in Firebase Studio, or any similar AI-powered development environment, and building complex applications. Google Cloud Platform, Gemini, and Firebase Studio are best-in-class tools. These kinds of limits apply to all agentic AI development systems.

Still, I would in no wise want to give up my Gemini assistant when coding. It takes a huge amount of busy work off my shoulders and brings much more possibility into scope by letting me focus on the larger picture. 

I wonder how the path will look, how long it will take for Firebase Studio and similar tools to mature. It seems clear that something along these lines, where the AI is framed in a tool that lets it take action, is part of the future. It may take longer than AI enthusiasts predict. It may never really, fully come to fruition in the way we envision.

I mean, really, do you want an AI agent to be able to go into your cloud dashboard and provision managed data stores and users and auth? Talk about spiraling cloud costs.