Hello, developers! Hello, hello. It's great to be back up here with you. And earlier today, you heard all about our updates to Gemini 2.5 Pro and Flash. And we talked about how we're turning research into reality, like how we brought 2.5 Pro to our coding agent, Jules, which I understand is having a lot of demand and our TPUs are hot right now. That idea of bringing innovation to life is something we explore every day in Google Labs. And that's our dedicated space to try stuff out. So today, we wanted to try something different with the show here and bring that same spirit so you can build with Gemini across Android and the web and beyond. So here's how this is going to work for this new format. We're going to try to do as many demos as we can in 59 minutes, OK? All right.
So there's only two things you have to do as an audience. If it works, the demo works, what are you going to do? Applaud. Yeah, hands up. That works, too. If it doesn't work for some reason, what are you going to do? Applaud. OK, OK. All right. I'm going to jump right in. I'll do the first one. And over in Labs, we love to build with Gemini 2.5 Flash. Does anyone use the Flash model out there? All right, a few people. Good. It's great. It's insanely fast. It has a great price. We use it for a lot of our prototyping. And one of the things we want to show you today is how we're blending code and design so you can go from a prompt to an interface to code in just a minute or so. So it's a new Labs experimental project called Sketch.
We'll bring it up on the screen here. First thing is first, did anyone come to I/O for the first time? Maybe your first time in California, too? All right, great. We're going to build an app for you. So here it is. This is Sketch. It starts with design first. So you can go into it and just paste in a prompt, like make me an app for discovering California, the activities, the getaways. And basically, you can just click Generate Design. And it's going to go out and start making a design for you. And so I've done this just before. It takes about a minute or so. But just to save time and get more demos in an hour here, these are some of the screens it comes back with. Now, these are not just static screenshots. These are actual designs.
What's cool is you can either iterate here on the left and iterate and create new designs, or you can go in here and do things like make it dark mode, lime green, max radius. It'll apply it and start working in the background. Now, what's happening here is we're using both 2.5 Pro or 2.5 Flash to start letting you remix this and change it around. This will work for about a minute or so. I'm going to show you the one that comes back. This is it. It is dark mode, lime green, massive corner radius. What's really cool is if you go into these, you can see that you can go in and grab the markup right here. It's all here. You can copy this out to whatever IDE you want. It also, again, these aren't screenshots. They're actual designs. You can take it right into Figma and edit it further. So this is a new product. It's experimental. We want you to try it out and give us feedback. Labs.Google/Stitch. And that's the first demo. All right. So with that, I want to pass it off to Logan, who's going to tell you all kinds of great things you can build with the Gemini API. Logan.
Thanks, Josh. I'm excited to be at I/O today to show you some of the cool things we just shipped this morning. We'll start in AI Studio, where the goal is to help you answer the question, can I build this with Gemini, and then get you started building with our latest models. OK, so let's open up Google AI Studio. I've been wanting to build a bunch of AI voice agents, but I've been a little busy. No better time than now to try prototyping. Earlier, you saw how Project Astra can make AI feel natural, and a lot of those capabilities are now available today in the live API, so let's select the new 2.5 Flash native audio model. We've also added more controls like proactive audio. The model is now better at ignoring stray sounds or voices, perfect for the I/O stage.
It also natively supports 24 languages. And we've added new controls for managing your session context, which you can see on the right-hand side here. But in order to build an agent like Astra, the model needs to be able to use tools. So we've added improvements to function calling and search counting. We're also introducing a new tool we're calling URL Context. URL Context enables Gemini models to access and pull context from web pages with just a link. This is exciting because now you can ground model responses on both specific and up-to-date information with support for up to 20 links at a time. All right, let's pass the link to our developer docs for function calling and have Gemini give us the TL;DR.
Google's function calling lets you connect Gemini models to external tools and APIs, allowing them to understand when to use specific functions and provide the necessary parameters to execute real-world actions, acting as a bridge.
Nice. I couldn't have said it better myself. This is just a small glimpse into what we've landed today in the live API. And we're super excited to see what you built. All right, let's shift gears now and show you another way we're making it easier for you to build with Gemini. As you heard from Tulsee earlier today, Gemini 2.5 Pro is awesome at coding. We've seen the ecosystem loving 2.5 Pro, so it's only logical that we bring it into AI Studio's native code editor. Let's kick off an example of what this new experience is like using one of the preset prompts. This new experience is tightly optimized with our SDK, so you can quickly generate web applications that use the Gemini API, like this AI-powered adventure game that uses both Gemini and Imagen.
As you see here, the model is reasoning about the request and composing a spec for the app. It's then going to generate the code and will actually self-correct if there's any errors. This is going to take a few minutes, so we'll jump over to another tab I ran to show the final output. That looks awesome. This is a great way to iterate quickly with the Gemini API, and you can easily make code changes right here. The whole experience is built to be multi-turn and iterative, so you can keep refining your idea with prompts over on the left-hand side. All right, we've got time for one more update that I'm excited to talk about, which is around MCP. Today, we're rolling out an update to the Google Gen AI SDK to natively support MCP definitions.
Now, it's even easier for you to build agentic apps with a fast-growing community of open-source tools. To showcase this, we've added a new app using Google Maps and MCP. Let's welcome Paige to the stage to start building on it.
That was awesome. You did great. Excellent. Thank you so much, Logan. I took inspiration from this Maps app that Logan just showed you, and I'm going to remix and compose it to build something entirely new. I'm going to add a talking head that will accompany me on stage, my very own keynote companion, but I'm just going to call her Casey. I want our keynote companion to listen to our keynote, to respond, and then to dynamically update its UI based on what it hears. And I've got a few finishing touches to add, but I think we can wrap it up here together on stage. So in I/O tradition, the first thing that I'm going to need my keynote companion to do.
Hi, I'm Casey, Paige's keynote companion. I'm here to help her presentation go smoothly.
Is to count the number of times we say AI.
Got it, Paige. I'm all in.
Excellent. To help us keep track, we've developed a function called increment utterance count, or increment word count, that counts and updates the UI. This is how you would build a conversational agent, to listen to specific audio inputs and then to execute a function to perform an action, but counting AI instances was so last year, so let's update this to trigger every time the presenter says something Gemini-related, so I'm going to make those updates. I'm going to refresh, and we're going to try again.
Hi, Paige. I'm Casey, your keynote companion.
All right. So the Gemini live API supports a sliding context window. That means that your users can interact with your apps for long-running sessions. Or in our case today, they can run quietly in the background. And awesome. Just look at that. We were able to make this app dynamically react to what it's hearing, which means that it's a dynamic web page, if you will. Get it? Get it, Casey? Awesome. Excellent.
Should we take a quick look at a fun fact about the Gemini API?
Hold on there. We're about to get to that. So this is just a fun example. But imagine discussing gift ideas in a shopping app or finding a great restaurant that delivers to you with just your voice. So now let's see how that Maps integration works. Hey, Casey, since there are people coming from all over the world, could you show us Shoreline Amphitheatre on a map?
All right. I've put Shoreline Amphitheatre on the map for everyone. Is there anything else I can help with?
Yeah. Could you show us some good coffee houses nearby with really great Wi-Fi?
OK. I've searched for coffee houses with Wi-Fi near Shoreline Amphitheatre.
Excellent. Could you randomly select one that you think looks really good and give us directions there?
While I can't express preferences, I can provide. Yeah.
So just pick up, how about Boba Bliss? Give us directions to Boba Bliss from Shoreline Amphitheatre.
OK. I'm providing directions to Boba Bliss from Shoreline Amphitheatre. Is there anything else I can help with at the moment?
No, that was awesome. Thank you, Casey. Excellent. Amazing, so let's check out some more feature updates. While synchronous function calls are used for quick operations, high-latency tasks for things like calling an MCP server usually require background processing for a seamless user experience, so by default, when calling a function, the audio is blocked, but today, we're excited to enable asynchronous execution for seamless dialogue within a conversation. Yeah. Over here, I have a function called getFunFact that uses Gemini 2.5 Pro. Based on what it said, we're going to use search grounding to display a fun fact, and up here in the system instructions, I've also added the getFunFact function whenever the presenter mentions one of our Google AI products, but I'm going to add a new call called behavior. I'm going to stop this so it doesn't automatically update, but say behavior non-blocking.
You can see the automatic code execution kick into play in AI Studio applets. Finally, we heard your feedback. With this latest release, we've improved structured outputs with function calling. Our model is going to conform with this very specific JSON return format to make sure that everything displays beautifully in the UI. All right, moment of truth. I am biased.
Paige's keynote companion.
Yes, I understand. I understand. But I am biased. But I think that Google AI Studio is the best place to start building with the Gemini API. Whoo! Excellent. Heck yeah.
Yes. Google AI Studio is pretty cool. Did you know that it lets you experiment with different models and parameters without writing any code?
Yeah, absolutely. Look at that. Gemini and Casey, you are a natural. All right, my keynote companion is feature complete. I think it's time to deploy these changes and to see it in action, so once your app has been created in AI Studio, it's incredibly easy to share with your friends, but also to deploy it via Cloud Run. So right here, from within the AI Studio, I'm going to kick off a Cloud Run deploy. I'm going to select one of my projects. It's going to verify, and with one button click, we're already deploying this app in a way that many people throughout the audience and throughout the world would be able to see. Once this app has been deployed, it's also capable of being run and viewed with your favorite IDE, so we can see it. We can refresh.
And you can see the keynote companion automatically added in Cloud Run right within my VS Code instance. And just like that, our multimodal app is live, pun intended. Awesome. We're making it easy for you to build agents with Gemini, combining multimodal reasoning with a vast and a growing number of tools. This power extends beyond the web, right into the palm of your hand. So now let me welcome Diana and Florina to the stage to talk about new tools and AI advancements for the Android ecosystem.
You've just heard about the incredible possibilities that AI brings. Now, Florina and I want to talk to you about how you can build excellent apps powered by AI on Android, and then how our APIs and tools make it possible to be more productive using AI.
Exactly, Diana. An excellent app is delightful, performant, and works across devices. And with AI, you can unlock entirely new, unique experiences that bring value to your users. Let's show you how that comes to life with a new app we built. A few years ago, we had a website that let you build yourself as a cute Android bot, selecting things like clothing and accessories. But then we started thinking, how would we build this today using AI as an app? The answer was, of course, through selfies and image generation. So we came up with Androidify. Let's take a photo of Diana and Androidify her.
Let me grab my favorite toy as an accessory. It's my daughter's. Ooh. OK.
While Androidify is Androidifying, let's see what's happening under the hood.
The core of the app relies on two key AI-powered steps: getting a description of the person in the photo and then creating an Android robot out of the description. Without AI, creating this experience would be nearly impossible, and to implement this, we used AI models running in the cloud via Firebase.
To get the description of the image, we took advantage of the fact that Gemini models are multimodal, so they can use text and also images, videos, and audio as input. So all we had to do is call generate content with a text prompt and the image the user provided, so the image of Diana. Then, to generate the Android robot based on the image description, we used the Imagen 3 model. We call generate image, and that's it. How easy was this? OK. Are you ready to see this?
I think so.
Ta-da!
Oh, that's so cute!
Androidify with Android. You did all of this with what? AI and five lines of code? That's so cool.
The Androidify sample app is already available on GitHub for you to check it out.
As Florina showed, cloud-based models are powerful and ideal for Androidify. But what if you need to process prompts locally, directly on the device without sending data to a server? That's where on-device AI shines. Gen AI APIs powered by Gemini Nano, our multimodal on-device model, offer APIs for common tasks like summarize, rewrite, and image description.
So we said earlier that excellent apps are delightful, performant, and work across devices. Let's talk about delightful apps first. For those of you who caught the Android show last week, and if you didn't, definitely check it out, you saw our biggest UI redesign in years, packed with delightful new features and improvements. We're helping you bring the same level of delight and playfulness to your own apps with an update to the Material 3 design system called Material 3 Expressive. We've already used it in our Androidify app. For example, take the camera button. You could use a circle, or you could use the cookie shape from the new shape library.
Who doesn't love cookies?
The button group shape morphs in the photo prompt button, is so nice and smooth, and it's part of the expressive APIs. These small details are what separates a good app from a delightful app. Try out these APIs yourself using Compose Material Alpha.
Beyond Material Design, what else makes an app delightful? Helping users with more useful, relevant information. In Android 16, we added a new feature, live updates. They allow you to show time-sensitive updates for navigation, deliveries, or ride shares by using the new progress style template rolling out to devices over the next year.
Now, let's shift gears to another critical aspect of an excellent app: performance. Make sure you enable R8 and baseline profiles. Both of these have been available for a while, and the performance results are impressive. And they translate into better Play Store ratings. With R8 and baseline profiles, Reddit's app improved so much they got a full star rating increase within two months.
Next, an excellent app looks good across all the devices that users have, and we're making it easier for any app to move across devices out of the box, from foldables and tablets to Chromebooks. In Android 16, we're making API changes to no longer react to orientation, resizability, and aspect ratio restrictions, giving users more responsive UIs by default.
We're putting your app in more places. For example, we've been collaborating with Samsung, building on the foundation of Samsung DeX, to bring enhanced desktop windowing capabilities in Android 16 for more powerful productivity workflows.
To make your app beautiful across devices, we're continuing to make it as easy as possible to build adaptively with new features in our Compose Adaptive Layouts library, like pane expansion.
Optimizing your app to be adaptive has a real impact on business metrics. We've seen that when users engage with an app across multiple devices in app categories like music, entertainment, and productivity, there's a two to three times increase in engagement. And apps like Canva, who invested in large screens, found that cross-screen users are twice as likely to use Canva every single week.
But it's not just foldables and tablets. We're bringing Android apps to more devices automatically. So here's the great part. If you're building adaptively for Android, you're already building for two more form factors: cars and XR. With cars, whether users are waiting at a charging station or in line at school pickup, they can stay entertained with popular streaming and gaming apps like Farm Heroes Saga and more. You can adapt your existing large screen app to be used in parked cars by simply opting into distribution via Play Console and making minor optimizations. And if you're building adaptively, you're building for Android XR, the extended reality platform built together with Samsung. It powers glasses like the ones Nishtha demoed earlier. We'll share more details on how you can develop for these later this year.
It also powers headsets like Project Moohan from Samsung, which you can start building for right now, knowing it'll be in the hands of consumers later this year. Soon after, our partners at XREAL will release a developer edition of the next Android XR device, code-named Project Aura. It's a portable device that gives users access to their favorite Android apps, including those that have been built for XR. All the apps you're developing will scale directly to these two.
With these upcoming devices, we're launching a developer preview 2 for Android XR SDK with new Material XR components, updated emulator support in Android Studio, and spatial video support for your Play Store listings.
OK, that's a lot of form factors. We're enabling more for users out of the box. I love seeing when my apps look great across all of my Android devices. Once an app is adaptive, we unlock access to more than 500 million devices they can run on. We're already seeing incredible experiences with partners, whether it's Peacock, who put in the work to create a strong adaptive experience for their large screen app, and as a result, get a really nice XR app.
Or like Calm, who easily extended their composer to create multi-sensory mindful experiences only possible with XR.
Now, building these kinds of excellent experiences across devices means you need powerful tools. And that brings us to our next topic, boosting your productivity.
It's no surprise that we use Jetpack Compose for Androidify. It has the features, performance, libraries, and tools that we need to build an excellent app. 60% of the top 1,000 apps take advantage of the development speed Compose offers. The latest stable release brings the features you've requested, like autofill, text auto size, and visibility tracking. We're focused on making Compose performance better and better. In the latest release, we see barely any janky frames on an older generation Pixel device. And we heard your feedback. You want to use Compose throughout your UI. So we're releasing CameraX and Media3 Compose libraries.
Oh, yeah, clap if you are. We know building navigation for apps across different devices and screen sizes can be complicated, so we rebuilt the Jetpack Compose navigation library from the ground up. Our goal was to make it simpler, more intuitive, and incredibly powerful for managing screens in a stack, retaining state, enabling seamless animations, and adaptive layouts.
When we think about productivity, it's not just about writing code faster. It's about streamlining the entire development lifecycle, from refactoring to testing and even fixing crashes. That's where Gemini and Android Studio truly shine by taking on those tedious tasks.
So let's head back to the demo desk to show you a few features that will change the way that you work.
So we all know the benefits of writing end-to-end tests. You get to test large parts of your app at the same time. But we also know that these are the ones we avoid doing the most because they tend to be hard to implement.
You can now use natural language to perform actions and make assertions with Gemini and Android Studio. So let's bring together some of the Androidify features we've shown so far and test them. The files here are journeys, like user journeys. Let's run one of them.
If you read the first two actions, they're just clicking on certain buttons with different text on them. So click on Let's Go, tap on Choose Photo. The journey is waiting until the actions are done before moving to the next action. So you don't have to synchronize these tests anymore. Then the third one is a bit more interesting. Select a photo of a woman with a pink dress. This is where natural language is a lot more powerful. So this could be the third photo, like here, or it could be the first one. So it would be hard to find with a regular command. Also, the UI you just saw is the platform's photo picker, and it can change from version to version of Android. The last one, the last action, was just verifying that an Android figurine with an umbrella is displayed.
Yeah, that's it. The test passed.
That was so easy. Even a PM like me could do it. So you're volunteering. Let's change topics. How about updating dependencies to the latest versions? I know that's another task that developers love doing.
It's definitely something I avoid doing because it's a tedious task. Although I know, I know we get the benefits of features and bug fixes that come with the latest libraries. Now, Gemini can help with this too. So let's demo a new AI agent coming soon in Android Studio to help with version updates. I have a project loaded here that, well, I haven't really touched it in a year. So this was actually before even Kotlin 2.0. There's a new option in the refactor menu called Update Dependencies. So what the bot has just done here is analyze the different modules in the app and checked what library updates we can apply. Next, the agent is trying to build a project and then use Gemini to figure out how to fix the problems. Then it's going to iterate until the build is successful.
Let's give it a second and then see how it behaves. OK, so it found an issue. OK, the build succeeded. It's generating the upgrade summary. Let's see if we get to see the changes. OK, I'm going to click Show Changes. I'm going to minimize these just to have a bit more space. So the libraries have been updated to the latest version. In the plugins, we're using the new Compose plugin compiler. The compiler SDK is now 36. OK, and then in the main activity, we not only get the change, but we also get an explanation of the change. So we can see that the platform class was replaced with an AndroidX class. Same here. So the build is successful. So we're done.
Nice. Now that you've seen some of the powers of Gemini and Android Studio in action, you might be wondering how you can get the same benefits in a corporate and enterprise environment, not just your personal projects. So today, once you subscribe to Gemini Code Assist, you'll have access to Gemini and Android Studio for businesses. It's specifically designed to meet the privacy, security, and management needs of businesses with the same Gemini and Android Studio that you're used to.
As you've seen today, across all of Android, we're making it easier for you to build the best experiences, creating apps that are delightful, performant, and adaptive across devices, and we're helping you be more productive with Compose and Android Studio.
So check out the Androidify app to see how this all comes together. Use the latest versions of our APIs and tools, and go build the next generation of Android apps. Now, let's hear from Yuna and Adi about how you can go build the next generation of web apps.
One of the best things about the web is that its reach is virtually unlimited. With a single website, you can bring your ideas to almost any user on the planet. The challenge is creating applications that work well across the near-infinite combination of users, devices, and browsers. Today, I want to introduce you to a slew of powerful new features in Chrome that will help you do just that. With these features, you can build better UI, debug your sites more easily with DevTools, and create AI features more quickly and cost-effectively with Gemini Nano in Chrome.
All of these, with the goal of creating a more powerful web made easier. Building engaging user interfaces is so critical. This is the cornerstone of what sets you and your app apart in a very crowded digital space, so let's begin there. We've been hard at work fixing core issues and expanding capabilities by leveraging HTML and CSS, the web's native building blocks. It should not only be possible, but simple to create beautiful, accessible, declarative cross-browser UI. What better way to make this more tangible than by creating a website using everything that we're announcing today? We'll show you some new capabilities that make it easier to build common but surprisingly complex UI elements like carousels and hover cards, and we're going to build these right here on stage in a fraction of the time. To do that, my colleague Adi is going to help me out.
Thanks, Yuna. So here we have this work-in-progress virtual theater site built in React. Watch as we transform it into a rich, delightful experience, starting with turning these posters into a carousel. Now, there's a lot to juggle: transitions, state management, DOM manipulation, performance and after all that effort, it's still buggy in edge cases. Now, with Chrome 135, we've combined a few new powerful CSS primitives to make building carousels and other types of off-screen UI dramatically easier. Watch how you can build this in just minutes with only a few lines of code. So I'm going to head over to my editor, and I'm going to show you this carousel class. So here, I'm positioning the items, setting overflow, and requiring snapping at the center for each item. So we're just going to save this. We're using our carousel class on our poster list.
We're making some progress here. It's looking like a carousel. Great stuff. Now, let's add some navigation affordances for the off-screen items. I've got a class here. I've got a controls class. Let me just add that as well to that poster list and show you that. OK, we've got some buttons using this controls class. I want to show you the code for this. Here, you can see that those buttons were created using scroll button pseudo-elements. This is what the code looks like. We've got a scroll button right and a scroll button left. Now, we've styled these with the content property. Here's the content property down here. We've given them accessible labels.
Can we navigate through this carousel a little bit faster? I've seen a lot of them have those little navigation dots on the bottom.
Yes, we can do that. So let me show you our indicators. That's what the new scroll-marker pseudo-element is for. So this is another pseudo-element, which can be styled similarly to scroll buttons. So here's our scroll-marker down here. And we've also got another new pseudo-class called target-current that manages the active marker classes. And that's target-current right over there. So let me just add in our indicators class. And bam, we now have scroll indicators.
One early adopter of this new CSS-based method of building carousels is Pinterest. Before, their development team spent so much time maintaining their custom-built JavaScript carousels. But earlier this year, Pinterest made the switch to using new CSS APIs for carousels, cutting down around 2,000 lines of JavaScript into just 200 lines of more performant browser-native CSS. That whopping 90% reduction in code improved overall performance. And it also noticeably improved product pin load times by 15%, which is a huge quality of life improvement for their users like me. Adi, how's our carousel going?
I thought it could use a little more finesse, so I added in some hero images. Here they are. They look a little bit pretty, and I also put it on a virtual stage, so check this out.
Ooh.
Isn't that nice? That's using scroll-driven animations. Now, I would love to put in a feature where you could easily hover and get a sense of what the view is like from there. So I'm going to add in the seat sections and seat details now.
I love that idea. Rich tooltips and preview cards are super common in web interfaces. But building and maintaining them, managing state accessibility hooks and events is still extremely challenging. So I can't wait for you to try the new experimental Interest Invoker API, which, when used with the existing anchor positioning and popover APIs, helps you build out accessible, complex, layered UI elements without JavaScript in a fraction of the time.
All right, so in this theater layout, we now have seat sections. Let's add in a seat preview for each of these sections so you can get a sense of what the stage looks like from them, so I'm just going to go ahead and click this eye icon, and ooh, check that out. Ooh, so right now, this is a popover. All right, this is a popover. This is a popover, which is triggered on click, so let's have it show up when hovering or focusing instead. So to make this change, all we need to do is change our popover target to interest target, so we go back to our editor. I've got our eye button here, and I'm just going to change this popover target. I'm going to type in interest target instead and hit Save, so let's do that hover. Let's do that again.
Let's hover over the eye. Nice. So here, the browser is handling the state management, event listeners, ARIA labeling, and a lot more for you, making this complex interaction a breeze.
Building something like this was so hard to get right. And I can't believe how easy it is now. This is the power of modern CSS, turning complex UI challenges into straightforward declarative code without frameworks, multiple libraries, and thousands of lines of JavaScript. But I know the big question that you're all asking is, will this work for my users? That's why we launched Baseline, to show you feature availability across all major browsers. But we know for Baseline to be truly useful, it has to be available in the tools that you use every day, like IDEs, linters, and analytics tools.
So here I am back in VS Code. Look what happens when I hover over some of these recent CSS additions. Right in the tooltip, you can see its baseline status and browser availability. No more switching between browser tabs to check in your compatibility. It's really nice.
If these aren't your tools of choice, don't worry. ESLint can now be configured to warn you about anything that doesn't match your targeted baseline version for HTML and CSS files. This integration is also coming soon to VS Code-based IDEs and JetBrains WebStorm. Shall we get back to building our website, Adi?
Perfect timing. So I've made quite some progress. Come on, take a look.
Is that Find My Seat button new? It's not centered. Can we fix it?
Yeah, yeah, we can. So sure. This is actually a perfect opportunity to showcase some of our new AI features in Chrome DevTools. So let's take a closer look. I'm going to open up DevTools, and I'm just going to select the element that we're having some issues with, that Find My Seat. Now, if I right-click, I go to Ask AI. Check this out. This is something new. This is AI assistance that is baked into the panel. Now, I'm just going to actually switch over right to here to show you this. One moment. Let's hope that the demo gods are with me. All righty. So we're going to go back to that Find My Seat. I'm going to select that one button there. Amazing. Now, we're going to turn on AI assistance. Just make sure that that is all turned on. Awesome stuff. All right.
So what I'm going to do here is. Oh, no, no, no. This is.
We're doing it live.
All right. So this is AI assistance that's baked into the panel. What I want to do now is just use natural language. And I want to ask Gemini a question. What I'm going to say is, I set margin to 50%, but it's still misaligned. How do I fix it? So notice that I'm just using natural language. No complex queries. I'm just asking in plain language. And it seems to have come back with a solution in mind. So let's see what it does when it's applied CSS rules for the margin. OK, I think that what I need to do here is actually apply a transform fix. So let's see what it says. Perfect. All right, so it centered it for us. And now, normally, I'd copy this fix. I'd switch back to my editor. I'd find the right file, locate the right spot in the code.
You know the usual drill. But with Chrome 137, AI assistance can actually create and apply a fix directly from DevTools. So I've connected DevTools to my local workspace. So if I expand unsafe changes here and I hit Apply to Workspace, let's see what happens. So it's doing some magic behind the scenes. OK, let's see if the demo gods stay with us here. All right.
This usually works.
It should be applied directly to my source code. So ideally, there's no context switching, no copy-paste errors. We just get immediate results.
Now, Adi, speaking of fixes, why don't we show everybody the completely redesigned performance panel?
Yes, let me pull that right up. So here, I've collected a quick performance trace. We're actually going to switch over to the other one. So here, I've collected a quick performance trace. And in the performance insights sidebar, I can see a layout shift culprit. So let's figure out why this comes up. So we've got our layout shift culprit here. And we've got our Ask AI button. So do you see this? This is a game changer. I'm just going to select this layout shift insight. And I'm going to ask Gemini. OK, fine. I need to actually switch over to here. So let me go back to Ask AI, turn this on. Perfect stuff. And what I'm going to do is I'm going to ask Gemini, how can I prevent layout shifts on this page? So we're just going to go ahead, have Gemini do its stuff.
It's come back with a response. So with the current web font, there's actually a lot of layout shift. And this is already useful, as it gives me a clear direction of what to do next. This is what I love about these new Chrome DevTools features. They don't just highlight problems. They help you understand and fix them without leaving your workflow.
AI. AI in DevTools is such a great use case. And Gemini is not just helping you debug, but it also helps you to build. Last year, we announced Gemini Nano in Chrome and invited you to help shape the future of AI on the web. Since then, nearly 17,000 of you signed up for the early preview program. And we learned so much from you. Starting today, we're rolling out seven AI APIs across various stages of availability. Backed by our best on-device models from Gemini Nano to Google Translate, these APIs in Chrome have been fine-tuned for the web. We're also working with other browsers to offer these same APIs backed by their own AI models so that you can use them everywhere. With Gemini Nano and our built-in APIs, the data never leaves the device.
That's huge for schools, governments, and enterprises with strict compliance and data privacy rules. And it also means that you can affordably scale AI features to a massive audience. So many of you. Yeah, that's exciting. So many of you out there are already using the power of these APIs for your applications. Like Deloitte, they're experimenting with an integration of Chrome's built-in AI APIs right into the Deloitte engineering platform to improve onboarding and navigation. 30,000 developers at Deloitte can find what they need at a projected 30% faster while also giving better feedback to improve the platform.
Before we wrap up, I want to show you one more thing that's really exciting. Today, we're unlocking new multimodal capabilities from Gemini Nano. Our multimodal built-in AI APIs let you create experiences where users can interact with Gemini using audio and image input. Let me show you how this works. Going back to our theater example, we can help people to find their seat like an AI usher. For this, we need a function that can extract information from a photo of our ticket and highlight it in the app. I want this to work on every device and in every browser. We've partnered with Gemini and Firebase to offer a hybrid solution that works everywhere, on-device or in the cloud. Over here in our editor, we start by setting up Firebase and Gemini. We define our model parameters.
I'm just going to click through here and quickly show you. We've got a Prefer on-device right over here set as a configuration. The AI returns our information here. We're just configuring the image that's being formatted. And we're finally getting a response. So let's go ahead and give this a try. Now, normally, I'd be doing this with my phone. But I'm just developing right now. And so I'm just going to use this webcam. I'm going to snap a photo of this ticket. Let's try this out. And bam. The built-in multimodal AI instantly located my seat section in the theater. It's awesome.
You don't have to wait to get your hands on these new tools. Many of these APIs are broadly available. And you can sign up for the early preview program today to start experimenting with these new multimodal AI and hybrid solutions. From building better UI and faster debugging to creating all new AI-powered features, we're constantly working to give you more tools to bring your vision to life. With your help, together, we can build a more powerful web made easier. And now, let's check out how Firebase Studio is making it even easier to spin up a full-stack app. Take it away, David.
Last month, we launched Firebase Studio , a cloud-based AI workspace where, with a single prompt, you can create a fully functional app. You can lean on AI assistance throughout or dive into the code, thanks to the full power of an underlying customizable VM that is open and extensible. Like product manager Erlyn van Reet, who had been kicking around an idea for a flexible platform for sharing things in your community for quite some time, but was actually able to bring it to life with Firebase Studio. You can prompt Firebase Studio to generate almost anything, like CRM tools, interview coaches, sales planners, and games, and today, we're adding more to Firebase Studio to help you build faster in every part of the development stack, from front end to back. Let's start with the front end.
So if you're like me, then there are two stages you go through when you're handed an incredible-looking design. In the first stage, you're excited to work on a project with such an awesome user interface. And in the second stage, well, you realize that you actually have to build it. Going from a design tool to a functional user interface running in a development environment can take a lot of work. And we wanted to simplify this process. So now, you can bring your Figma designs right to life in Firebase Studio with some help from Builder.io. Now, when you're in Figma, you can install the Builder.io plugin, click to export to Firebase Studio, and it translates all the component code and opens up a window with Firebase Studio for you to kickstart your development process. Let me show you it in action.
I'm here in Firebase Studio after importing a Figma mock of a furniture store app that was actually created in Stitch. Now, we have this product grid listing page. And it's gone from a design to real app code up and running in a development workspace. I can scroll through all of these products. And since it's gone from design to real code, I can either dive right into the code or I can ask Gemini in Firebase Studio to give me some advice on where to begin. And what I love about this Figma export is that it didn't just generate this large monolith of code. It generated individual, well-isolated components that make up the whole page. Now, this Figma mock, it only had a design for the product grid page, but not a single product detail page. So let's build one.
I'm going to open up Gemini in Firebase Studio. And I am going to paste in a prompt. But I will break it all down. I'm going to ask it to. I asked Firebase Studio to build a single product detail page. And I wanted to use the existing component system and sample data. Then, I'll give it a file name that I wanted to use. And I'll ask it to hook up to the routing system. And lastly, we're going to add a feature to create an Add to Cart button. Now, before I send in this prompt, I can use the model selector. And I can select to Gemini 2.5 Pro. And now, when I submit this, Gemini in Firebase Studio gives me a breakdown of all the changes that it wants to make.
But it's not going to make them all at once because nobody wants to review a giant file of code. It's going to break things into multiple steps, making it easier to stay in the loop and review each change. So it starts by creating the full product detail page. And then, after I create this file, it goes and it updates the routing logic. Then, after that, it goes into the product detail card. And it wraps a link so it points from the detail card to the individual page. And then, after that, it identifies that it needs to update the data flow by having the correct data flow by passing in the product's ID. And now, this part is really cool. Gemini in Firebase Studio noticed that our product sample data didn't have a description property. So it wouldn't display any details about the detail page.
So it updated the placeholder data. And it generated descriptions for each product. And lastly, it generates the add to cart button. And so now, once I update this file and go back into the web page, I can click around. And I have myself a fully working product detail page. So all of this was done in just a few minutes with a single import and a single prompt. So the front end, it brings the user experience to life. And for apps to truly perform, to handle complex data and connections, you need a back end. So right now, in Firebase Studio, you can add your back end either by coding it yourself or with help from Gemini. But wouldn't it be great if it just added a back end for you?
Normally, when you're prototyping apps in Firebase Studio, we generate an app blueprint that details some of the most important characteristics of the app, such as features and a style guide. Rolling out starting today, we're adding a back end section to the app blueprint. Firebase Studio will detect when your app needs a back end and provision it for you if your prompt includes a database or authentication. From this blueprint, Firebase Studio will set up the configuration for the back end services. It will also generate code to authenticate users and save data to a database. When you're ready to publish, Firebase Studio will provision those back end services and deploy to Firebase App Hosting.
So you can still dive or you can still jump into the coding workspace and extend your apps with any back end if you prefer a different stack or if your needs change as your app grows. These features are starting to roll out today. And we're rapidly adding new capabilities to Firebase Studio based on your feedback. So try it out now. All right. Another demo down. And we are into the home stretch. Next, if you want to start tuning your models, your own AI models, here's Gus to tell you all about what's new with Gemma.
Hi, everyone. I'm very happy to be here too. Thank you very much. Today has been all about making it easier for you to build great things with Gemini, but sometimes, you really want to fine-tune your own model, like when you want AI to help you understand sensitive data, learn the details of your business, or even run offline. And that's why we released Gemma, our family of open models. With Gemma open models, we're bringing the magical AI experiences instantly and privately to our users' hands. A couple of months ago, we launched Gemma 3, state-of-the-art open models capable of running on a single cloud or desktop accelerator, but we kept cooking, and today, I'm thrilled to announce Gemma 3N, a model that can now run on as little as two gigabytes of RAM.
Gemma 3N shares the same architecture as Gemini Nano, and it's engineered for incredible performance. It's much faster and leaner on mobile hardware compared to Gemma 3. We've also added audio understanding, making it truly multimodal. We are sharing Gemma 3N in preview today. It starts on Google AI Studio and with Google AI Edge. And we are also bringing it to open-source tools like Hugging Face, Ollama and Unsloth, and the others, all in the coming weeks. The Gemma family is designed to be highly adaptable. And one domain where this openness and adaptability is showing incredible promise is health care. And today, I'm very excited to introduce MedGemma, our most capable collection of open models for multimodal medical text and image understanding. Yeah, there's a bunch of those.
MedGemma works great across a range of medical image and text applications so that developers like you can adapt the model for their own health apps. For example, when you want to analyze radiology images or summarize patient information for physicians, and OK, I've talked a lot already. Let me show you something. Let me show you how easy it is to grab a Gemma model and build something completely unique for you, and so let me go here to a Google Colab. Nice, and what we are going to do is we will use Unsloth, which is a fantastic library for fine-tuning LLMs like Gemma, for example, and it's much faster and uses less memory, and it runs great on NVIDIA GPUs that are on Google Colab's free tier. For this demo, I want to show you how easy it is to fine-tune.
My daughter and I, we have a unique emoji language for texting. It would be great to create a personalized translator for us. For example, when we talk about our dog, Luna, you know what? Let me show you something. This is Luna. Thank you. So when we talk about our dog, Luna, it should automatically translate to her special emoji. So what I did is I created a custom data set to fine-tune Gemma to teach it our specific emoji dialect. And in Colab, we do the same, right? We load the model, set up the environment, just the usual. Colab caches popular models, so it loads really quickly. Training can take some time. So I've already formatted the data set. I did the training. And now, I already have my custom model variant. And here we go.
But the thing is, I would like to compare my custom model against the original one and see if it really learned from my data. And to do that, I'm going to build a UI using the new AI-first Colab that we've just launched. It's an entirely new way to build faster. It's an agentic-first experience that transforms coding into a dynamic conversation that helps you navigate complex tests. So let me show it for you right here. Open the feature. Let's put my prompt and execute. So Colab now is generating for me the code. Oh, nice. Done already. Let's see. And you can see here. I think everyone is using Colab today. Nice. It's here. And there it is. So just like that, Colab created this application for me. But the thing is, we should test this, right? Any suggestions for prompts? Anything? Oh, sure.
I can do that. Luna loves—sorry, nervous. Strawberries. Correct? Yes. Let's try that. Let's try that. And come on, demo. Ooh, worked. Let's zoom in for you. You see? There you go. You can see the difference between my custom model and the base one and that it really knows the language and the details about our emoji dialect, right? Isn't that cool? So this is a really fun example that highlights the power that you have, right? You take a base model like Gemma. You take accessible tools like Unsloth and use the new AI First Colab. And you can quickly build and fine-tune with your own personal data. And you can also deploy this using Google Cloud with Cloud Run, Vertex. Or you can even use Google AI Edge for local deployment.
But the thing is, my emoji project just scratches the surface, showing how to quickly build on a Gemma model for your own use case. What is truly inspiring is the Gemma verse: tens of thousands of model variants, tools, and libraries created by you, the developer community. Gemma has been downloaded over 150 million times. And we've seen the community create close to 70,000 Gemma variants, hundreds of which are specifically for the world's diverse languages, like the incredible story we shared last year of Navarasa, a Gemma model fine-tuned to speak 15 Indic languages. Gemma is available in over 140 languages and is the best multilingual open model on the planet. And we're excited to announce that we're expanding Gemma even further to sign languages. SignGemma . That's a good one, guys.
SignGemma is a new family of models trained to translate sign language to spoken language text, but it's best at American Sign Language and English. It's the most capable sign language understanding model ever. And we can't wait for you, developers, and deaf and hard-of-hearing communities to take this foundation and build with it. And that's not all. Gemma is also helping researchers expand our understanding to more than just human language. Just last month, we introduced DolphinGemma , the world's first large language model for dolphins. Yeah. Working with the researchers at Georgia Tech and the Wild Dolphin Project, DolphinGemma was fine-tuned on data from decades of field research to help scientists better understand patterns in how dolphins communicate. Can you imagine going to vacation someday and being able to talk to a dolphin? Let's check on the progress.
When I was 12 years old, I would page through the encyclopedia. I would stop on the whale and dolphin page. I would go, I wonder what is going on in the minds of these animals. Language, to me, is the ultimate question about intelligence, the thing that we haven't been able to nail without a great tool. How do you decipher another species? The main use of Dolphin Gemma is to eventually look at their natural language patterns and match it with the underwater video. That's how we really figure out their language if they had it. All right. Beautiful day. Woo-hoo.
Imagine a world where you could talk to an animal. Dolphin Gemma is the first LLM for dolphins. We've leveraged over 40 years of Denise's vocalization research to create this large language model to generate new synthetic dolphin sounds. These sounds will help us to one day, hopefully, communicate with the dolphins.
Thad shows up at my office one day. And he's wearing one of his many wearable computers. And I'm like, ooh, this guy's like a techno man, right?
I said, well, I do wearable computers. This sounds like a summer project. We'll get this done for you. Here it is 15 years later. We've engineered this ChatGenius device to play our synthetic dolphin sounds underwater. Let's see which one this one is. That is the signature whistle for Denise. So whenever she's approaching the dolphin, she can introduce herself.
So what they're doing is they're testing the distance at which the two chat boxes can efficiently recognize our synthetic sounds. Oh, there we go. All right. We want it to work close to 100% before we take it in with the dolphins. It's this dance between getting data and respecting their culture. You know I'm not very steamed early, so. You did great.
The true breakthrough for me with Dolphin Gemma is that I can generate so many of these so quickly. I just scroll through here and do days' worth of work in minutes. If we can use this open model, people would take advantage of Denise's 40 years' worth of research and use it to model for their own purposes.
Science is most exciting when you find something you're not expecting. You may discover something that you never even thought to look for, and that's the beauty. You don't know what's coming.
Isn't that amazing? The world's first large language model for dolphins, and it was made to run on this, right here, a Pixel 9-powered rig, just like this. So all right, I can't help myself. We're going to do one more demo, and then it's a wrap. Does that sound good? All right. So does everyone remember the keynote companion app that Paige built right here at the desk? Let's bring it back up on stage, and let's just see what it thought. Hey, tell me, what did you think of today's announcements?
Oh, I thought they were amazing. All the new features for developers are so exciting, especially the stuff with Gemini and the AI tools in Chrome. It's going to make it so much easier.
Wait, wait, wait. Wait. What about my demo, the one I did?
Your demo was fan-.
Oh. It's a live demo. What?
Seriously.
What was some advice you'd give people to build if you don't want to talk about my demo?
I definitely recommend trying out the new AI features in Chrome DevTools. It looks like it's going to make debugging so much easier, especially with the AI assistants helping you fix issues directly.
All right. Can you maybe just close us with a fond farewell to the crowd? What's on your mind?
Absolutely. Thank you all so much for being here today. We've seen some incredible innovations, and I can't wait to see what amazing things you'll build with all the new tools. Have a fantastic rest of I/O.
All right.