AI-powered JavaScript Development

Hi, all. Thank you for coming. Welcome. I'm James. This is Alex. And we are developer relations engineers at Google. We are huge fans of building cool things with code, like many of you. We're always on the lookout for tools that let us spend less time fighting with configuration and more time actually building. And that's exactly why we are here today. We want to make it easy for you and your team to embrace the state of the art AI, no matter where you are. We offer AI tools and extensions across a variety of surfaces, and we make them available across web, through both and mobile experiences, and even the terminal.

We will start by creating a new app using a back of the napkin sketch in AI Studio. We could also use Firebase Studio or Gemini CLI for this. But I particularly enjoy the sleek interface of AI Studio for prototyping quick ideas. Then we will look at rules, which are also known as prompt context. Alongside extension and MPC servers, they allow us to truly configure the way an AI behaves so that we make it personalized for our own needs. We have multiple surfaces that support this, but I will use Gemini CLI since it is my favorite, and I run it almost everywhere, even including on my Raspberry Pi at home.

Today, our focus will be on just figuring out what a rules file looks like. But don't forget to look up into the popular community-contributed extensions like Firebase that you can install and use. And finally, we will examine the steps necessary to integrate state-of-the-art AI into your front-end app, leveraging our unique Firebase AI logic SDK and AppCheck integration, keeping everything running fast and secure. Okay, let's see how quickly we can get started from an idea to a working prototype. This is a sketch. It was hand-drawn and Gemini-enhanced. I had to enhance it with Gemini because the napkin was incredibly bright, and I saw this awesome screen, so I didn't want to blind anybody in the audience. So let's see what we can do with this sketch. So today, we'll be using the image that you saw just now. And as you can see, I dictated through using speech-to-text what I want the app to feel like. I want it to be fun, so I can play it with my kids. Now, if you're on the go, if you're not on the go, though, you can also use Firebase Studio instead and have more control over the generation, or even go the Gemini CLI route and really feel in the driver's seat. Now, we see that reasoning took exactly 46 seconds for Gemini Pro, and now it's generating the code.

I decided to speed up some portions of the process so you get the gist of it without having to go too deep into details. However, you can still see the timestamp on the screen, and I hope the text is also clear for you to follow through with what is exactly happening.

So, really important, before going forward, we want to validate that the app does exactly what we expect it to do. And it looks good. So we will push the source code to GitHub, and then we will look at how we configure a smooth developer experience for our team so that they can also contribute.

Next, your teammate will be cloning a repo, installing dependencies, and suddenly they're in the ninth circle of hell, right? It's a universal developer experience. We've all been there staring at an error message that makes no sense because some package somewhere has a version conflict with another package you didn't even know were you using. This initial friction, the setup tax, is a silent killer of productivity, and let's be honest, our enthusiasm, and this leads us to the most infamous phrase in all of software development, the shield we use when QA raises a bug, but it works on my machine.

We've all said it. We've all heard it. And while it's funny, it points to a fundamental problem. Our development environments are fragile, inconsistent, and a massive source of works here, breaks there bugs. This isn't just a meme. It's a symptom of a deep-seated issue in our workflows.

Unless you have Firebase Studio, an agentic cloud-based development environment that helps you build and ship production quality full-stack AI apps, including APIs, backends, frontends, mobile, and more. It's entirely web-based. Just visit a URL in your coding. It's built on VS Code, so not only is it incredibly familiar to most devs, but you can bring most of your existing preferences, extensions, and muscle memory to the web. Now it's important to note that this is full cloud VM, meaning you're not limited to things that run entirely in the browser.

There's a Linux machine powering every Firebase Studio workspace. We've also got several Google integrations that make it easier to add APIs like Gemini and Google Maps to your app, and easier to deploy to the cloud with Firebase Hosting or Cloud Run. We've got a built-in live preview, and as just about every Google surface in 2025, Gemini is built in so you can get help understanding, generating, and improving code. There are also integrations that help you troubleshoot errors with AI and more.

At the heart of Firebase Studio is a single file called dev.nix. If you're working on a team with other contributors, you can customize your environment precisely for your project and then commit your nix file to your project's git repo. That way when a teammate imports the repo in Firebase Studio, their workspace will have the exact same configuration as yours, complete with the same system packages, IDE extensions, starter scripts, and more.

I really love how David East at Google puts it, Nix is like a package JSON for your entire development environment. Nix defines just about everything you need to work with on your app and run it in the cloud, from system packages and services like compiler tool chains, local database servers, to IDE extensions that add language support and debugging, to the specific wiring needed to boot up your front end and back end servers automatically so you can preview your app while you're writing code. It's all defined in one file. Pretty sweet.

Let's take a look at an example Nix file. It starts by specifying a Nix channel, stable 24.11, in this particular case, which is great because it means that this environment is going to run exactly the same in two years as it does today. Using a specific version here basically ensures your... I said that just now. Next, we're setting a few environment variables. You can fine-tune your app's live preview integration, among other things. Remember, the dev.nix file is committed to git, so be mindful of what you add here. Next, are all the system packages you want installed and available.

Now, because Firebase Studio is based on CodeOSS, we support most extensions people would want. One caveat is that these come from the open marketplace called OpenVSX, not from VS Code's official marketplace. Most extensions tend to be dually published to both marketplaces. Next, we have lifecycle hooks. OnCreate is run when a user first creates their workspace from a template or when they first import the Git repo into Firebase Studio. It lets you do one-time setup, like running npm install or seeding data in your database. In my case, I'm also opening a file in the code editor.

The second lifestyle hook is on start, particularly useful when running your app requires supporting your live preview or running other services at the same time within the VM. Speaking of which, this preview section defines the previews you want available for your app. Today, there are two kinds, an Android preview, which spins up an Android emulator, and the one we use here, a web preview, which boots up your app's HTTP server and shows it inside an embedded browser in the IDE. If you're building a framework or library for others to use, you can include Nix file in your sample code repositories so that when a user imports your samples into Firebase Studio, they can skip the environment setup and jump straight into trying out your framework. You can even build your own custom template as an opinionated, customizable starting point for your users.

Now there is a lot more to Nix and Firebase Studio, so if you want to be in the know, I'd strongly recommend watching David Eason's video and checking out our blog. Now let's talk about how Gemini coding agents can accelerate your app development. And who's ready for a demo? Pre-recorded one to make it fast. Okay, so first, we will import the GitHub repo that we just created, and when opening an existing repo for the first time, Studio will automatically configure a workspace for us. If needed, we have the option to customize our Nix file, then the workspace will reload and the updated environment will show up. Now once we're happy with how the IDE looks and behaves, let's go beyond Code Assistant with a rapid iteration using the Gemini agent integrated right here in Firebase Studio. I want to add a little bit of sparkle to this app before I show it to my son, so I thought having a confetti effect will be just the right thing whenever he gets the answer correct. So that's what I asked Gemini to do, and there you go. It already proposed the change. I will go ahead and quickly review it to make sure that it's about the thing that I had in mind and looks like it is. So I'm gonna apply it and do another quick test. All right, we do have a confetti effect. However, you noticed it stopped real quickly after it started. Well, I want it to stay there for a little longer. I also want it to start the next problem soon after. So there we go. Let's do a follow-up request to add a countdown timer and to make sure that effect stays a little bit longer. Now Gemini again proposed the solution.

I went ahead, approved it. Time to do a quick test. Now as you see, I'm testing these things manually because for me that's probably the fastest way. For some other use cases, I would however invite you to try some of the extensions that we have available. And I want to show you one more cool thing that you can do right away. Having a rules file in your project allows you to control how an AI system behaves. Think of it as a set of instructions or a rulebook. It is generally a markdown file, and you create it alongside your source code.

Inside the file, you provide how you want Gemini or for instance any other code generation agent to behave. This is an incredibly useful tool because it ensures consistency, quality in generated code, and it saves you from repeating yourself over and over about your preferences and your voice. This saves you time. It helps AI become a more integrated part of your development workflow, and it's also a cool way to pass on your work to your colleagues if you're not around.

Now let's work through an example. Here the first section is a persona where I set the AI's personality. I think it's just really cool to act as a Vulcan. Logical, concise, and to the point. Now as you can see here, we just talked about the persona. So it will primarily influence the way AI will respond in our chat, and it will influence less of the generation. However, we can also have instructions that will guide things like semantic rules or style in the code.

For instance here, I would want to make sure that the AI generated code falls within the boundaries of the code that I'm already writing or crafting by hand in other places. I want it to be consistent. Hence why I'm explicitly instructing the AI to always declare the type and to avoid any which I really don't like to see in my code. Finally, since we are doing React, there are certain things which I found to be really useful in my project, so I'm gonna mention here.

As you can see, the ARules MD file is a powerful tool for shaping Gemini into the perfect collaborator for all your needs. It allows you to define everything from the way the AI will communicate to how it should reason about the code and what are the guardrails for generating. Now let's take a look at Gemini CLI and see another agent in action. Launching it is very straightforward. You just have to install the package in your terminal, in this case Firebase Studio already comes pre-built with it, and you launch it.

First time you launch it, you have to authorize it and then you see a screen like this one. You can ask it questions about your code referencing the context that you want it to see, in this case I referenced one file, operator pad, or you can ask it to do a change. Just like before, it will by default tell you what it intends to do and it's up to you to approve. You can also use YOLO mode if you're in the mood, but here I will actually review every change manually. So that I don't have to do this due diligence later when I submit my code.

One suggestion on how to approve changes is whenever you see a change that you believe to be safe, for instance a list command, you can allow the entire family of such commands to run in the future so you don't have to press yes every time. Whenever you see a code change that you don't intend to review later, it's better just to review it now. I find it really useful doing it like this.

As you can see, we just updated the app and if you want you can review the recording and see in more detail what exactly happened. Or even better, I encourage you to check out Gemini CLI extensions. Here you'll find lots of popular community contributed things and you maybe were wondering what does extension do. Well, let's take an example.

So, I'm going to go ahead and I'm going to look up a security extension. Why? Well, I have a lot of AI generated code and I only had time to read it at a high level. I want to get some tips on whether I should investigate certain aspects of my code more deeply. So, I see that the extension was installed successfully and I'll run it and ask Gemini to analyze the code in my app. Here we can see that Gemini created a plan.

Why did it create the plan? That's how it was instructed in the prompt file that was bundled with the extension. Once it finished the plan, it started executing it by grabbing the git history to see recent changes and analyzing everything step by step. A best practice highlighted is to verify external data sources for safety. Gemini extensions help maintain high quality and efficiency in the engineering process.

James introduces Firebase AI logic, enabling developers to call the Gemini API from mobile apps using client SDKs for AI chat experiences, image generation, and more. The GenKit Firebase framework offers access to various models, including Gemini, for complex AI workflows. The process involves importing Firebase app and AI packages, initializing the Gemini API with an AI model, and generating text outputs with support for multiple inputs.

The Gemini API free tier on the Spark pricing plan provides lower rate limits for testing but sufficient requests. For advanced features, resources like Firebase Studio, Gemini CLI, and Gemini models are recommended. The talk also mentions ScrunchyClub. For more details on capabilities, developers can refer to the documentation.

For more complex AI workflows requiring server-side logic, GenKit Firebase open source framework provides broad access to various models, including Gemini, and advanced AI features. Let's take a look at an example. First, we'll import the Firebase app and Firebase AI packages. Then, initialize the Firebase app with your custom configuration. Initialize the Gemini developer API backend service with an AI model, in our case, Gemini 2.5 flash. Define a text prompt. Generate text output using the prompt. In this example, we see the shorthand text-only version of generate content, but we also have a version with support for multiple inputs with PDFs, images, audio, and even video content. You can use Firebase Cloud Storage to conveniently manage these files. We also support output processing for tool calls, search grounding, and code execution.

Here's another example, but this time we have the Google developer API return a multi-modal response. We're using the popular NanoBanana model to generate images, hence we're setting the generate configs response modalities to return both text and image. As like before, define the text prompt, then generate an image using the prompt. The Gemini API free tier available on the no-cost Spark pricing plan is served through the API service with lower rate limits for testing purposes, but it does offer a generous number of requests, which should be sufficient in most development needs. This was just scratching the surface. For more advanced features, check out our docs on Firebase Studio, Gemini CLI, and the Gemini models. For this talk, and also shout out ScrunchyClub. Nice. Nice.

Yeah, so as the questions start coming in, we're going to see what the rest of the audience has on their minds. Here's one we've got. Do we have an on-prem or a self-deployable version of Firebase Studio that enterprise companies might be able to use? No, not yet. Not yet? I guess you can vibe code one with Gemini. I will suggest one thing. We have Gemini CLI, which runs on pretty much every surface. That's one. Two, we have VS Code extensions. So if you use a fork that's on-prem or using any other IDE that you can run on-prem, you can pull in the extensions. And third, a lot of the AI development flows are happening through extensions and prompt files, as you saw here. So experiment. See whether your enterprise has a need for any specific workflows. And a lot of those can be pulled together using the open source that we also support, like, for instance, the Nix files. So yeah, short answer, no, we don't have a ready solution for you to deploy. But please come to us afterwards. We'd love to take a look at what it might look like for you to have an on-prem, enterprise-ready solution for your case. Nice.

All right. So perhaps out of this conversation, and this is why we do conferences like this, perhaps some new, exciting tools will emerge. And don't forget, after this Q&A session, there will be a longer chat you can have with our speakers in the speaker Q&A spots just outside here. All righty. So moving right along, we have a spicy question that I guess we'll see what we can get as an answer here. But Anonymous asks, is Google going to create a VS Code competitor? What does a VS Code competitor mean? That's a great question. I assume they mean an IDE that has all of this stuff kind of already ready to go. But... We already have, right? A lot of stuff ready to go. Well, it's an extension of OSS Code, which is also what VS Code is built on. Yeah. Yeah, absolutely. There's the development workflow, it's shifting all the time, right? We see things changing, and we adapt and we grow together.

So I would just encourage you, observe the news, look at the community, participate in this, and you know, be part of creating the perfect development environment that would be better than any competitors out there. Yeah, yeah. I love that vibe. And also the... Speaking of vibes, the, you know, the idea that we are all able to build pretty much whatever can come to our minds now. We don't have to wait for companies to release something and, you know, ship us CD-ROMs in the mail with our magazines or anything like that. We've got kind of this instant power now. So let's, you know, use it with great responsibility.

All right, we have another question. This one about Nix files. What's on that roadmap? Is there, are there more kind of ways that this configuration can be elaborated by the users? I'm not sure what's on the roadmap for Nix. Vicky, do you wish it's on the roadmap? Yeah, I think what we can get going is, right, we have a few ways to get feature requests. And the way our roadmaps work is that we gather feature requests through a few channels. One of them is through their support. If it's a feature request that is more enterprising, and you don't want to put it in public, but you want to deliver it to us, you can also do that through your cloud solution engineers, if you have one, or you can publicly discuss it. Right, we have a few boards there. Yeah, in community forum.

And the way we do these roadmaps is we look what's really high up there, what the community wants, and we prioritize it. Now, we can't say what's on the roadmap before it's publicly announced. However, we do have early access programs. So quite often, we invite you to sign up to get early access. And that's, you know, the best way to have an insider look on what is coming along on the roadmap. So I would suggest you do just that. And then you'll see. Awesome, awesome. Yeah. And this is really, you know, again, sort of, I think, speaks to this point that we're all building all of this stuff together, right? It's not kind of a top-down process. So your feedback matters, your questions and comments and various other discussions with our speakers today will definitely be taken back, I'm sure, to the teams. So yeah, I think with that, we are just about out of time for our Q&A session right here. But as we mentioned, there's going to be another chance to chat with the speakers in the Q&A spot just outside the lecture hall. So please, everybody, help give another huge round of applause to Alex and James. Thank you so much.