What's new in Chrome

Chrome for Developers · Beginner ·📰 AI News & Updates ·2mo ago

Key Takeaways

Explores new capabilities in Chrome for web development, including AI-powered features and updates

Full Transcript

[music] >> Hello, hello, hello everyone. How you doing? We all good? Brilliant. So, at the start of the Did you Did you hear the Scouse accent or the Liverpudlian accent in the keynote when they were doing Yeah, 45 minutes of that now. It's going to be brilliant. Anyway, I'm Paul. I lead the Chrome developer relations team. It's great to see everyone here. I'm thrilled to be back. You know, I was here a year ago talking about what's new inside Chrome. But before we start, I'm actually going to show you a new demo that we've got that highlights two of the APIs that we're really excited about. WebMCP and HTML in Canvas. So, can we just switch to the demo, please? So, this is, you know, my childhood bedroom 30 years ago when I was starting to learn how to program. I had all these books. Actually, this is a lie. I didn't actually have these books because only HTML was the thing that was actually around at the time. I was a Perl programmer when I was actually starting things. Anyway, brilliant. Hello. >> [laughter] >> So, anyway, but I did have this browser, right? Like, this thing that I could browse the web and find new things. I could, you know, maybe play some games. Now, this is the HTML in Canvas bit, right? We've got a 3D experience. I'm terrible at games at the moment. Uh, you know, I could then browse the web, you know, select text, and do all these really fancy things around the web. I found a lot of new friends when I was actually browsing and on the the internet at the very start of things. And then I also had this slide deck. You know, I wanted to be a web developer, and I wanted to be a developer advocate even though the role didn't exist at the time. Anyway, the thing the thing I want to show you here actually is, you know, I developed these slides. I'm not going to present these slides. These aren't my actual slides. You're lucky today. Um, but I The thing I like about HTML in Canvas is the fact that we have these very 3D lit-related experiences like this. This is a full 3D experience. But we have the browser and the content just embedded in. And so, we can do things like translate to Welsh. Does anyone know any Welsh? No, I do a little bit. I live in Wales and I'm I'm learning at the moment. Um and then we can even do things like uh find WebGPU, like things that we've never been able to do inside a canvas based experience before. We have access to the DOM. I think this is just incredible. Uh anyway, so you jump forward 30 years, right? And thankfully, I'm no longer living with my parents. Um we have these agents roaming the web and doing things. And in Chrome, one of the things that we really want to do is make sure that the web can participate in these agentic experiences. So, I'm just going to show WebMCP. Uh I don't know whether you can see that properly at the moment. But this experience here has exposed a number of tools uh to essentially agents at this point. And so, what I can do is I can do a single one. I can just say, "Oh, command A, turn off the lights." It might ask me which lights, but we'll see which one it does. So, there we go. It turned off the lights. That's really cool. But you know, when I was a kid, my mom hated me on the computer in the evening. And so, what I'd do is I'd maybe turn off the computer and then uh then start it again once she'd gone. Um So, let's see if it works. And you see, there we are, the computer. I can maybe zoom in. And there we are, it's rebooted. And so, we've had this like multi-step flow of turning the machine off and turning it back on. But anyway, this is just a simple demo. We can just go back to the slides if possible. I just wanted to kind of show you some of the things that were kind of possible with building with HTML on canvas and also WebMCP. I'm very excited about them. But this is the early days, right? Like when I started my development journey, this is what my environment looked like. This was QBasic. Any Any QBasic people? >> Yeah. >> Brilliant. If you're not old enough to remember, this is before modern IDEs, before we had language servers and syntax highlighting, like inline debugging. We just had these experiences. And there's a fun fact, right? I actually nearly quit programming before I even started because I didn't realize American English was a thing and that you spelt color incorrectly without a U. But anyway, I learned what to do in the end. It literally took me a week of debugging to work out what a syntax error was for it, but I got over it at least anyway. You jump forward 30 years and now my development environment is is is pretty damn similar, right? Like it's a text based experience, right? But the thing here is like the actual strides that we've made in development environments and development processes, we've just taken massive leaps and especially within the last 6 months. So, our primary goal in Chrome uh and why I do what I do is to get everyone ready for this like next generation of web development. And the way I look at it at least anyway, there's like three different components. One, we want to make sure that your sites connect like participate in this agentic future and the web is a first class experience. The second is that we want to make sure that your tools can also kind of understand the modern web capabilities and how to build for a modern web baseline, even if the models and the tools that you use don't have that knowledge built in. And the third part is we also want to kind of get you ready for the years ahead as well, right? So, we are going to talk about some of the things that Chrome is introducing, you know, as experiments in a lot of cases where we would like a lot more feedback, but I think it's kind of nice to kind of see where the platform is going so that you can kind of plan ahead as well. Now, you're going to hear agents quite a lot. I know I know one person is counting how many agent how many times do I say hey how many how many how many we at? Two, okay. Agents, three. Brilliant. Anyway, so we live in a world where people can start to get things done just by using their voice, their natural language. And this to me marks one of the most significant shifts in computing since the invention of the web. Now, with the web, most of the platform shifts actually come quite slowly. So, since the invention of the iPhone, like it took us nearly a decade to get from building desktop first experiences to mobile first experiences. And it wasn't, you know, we had this technology to turn the browser into a mobile based experience, but the industry had to move and it moved very very slowly. And it took a huge amount of effort for developers to redesign their experiences. But when I look at kind of where we are today, you know, over the last 6 months we've seen a massive enormous shift in our role as developers and I think it's going to happen at a pace that is much faster than the mobile transition. Like the mobile like the web is transforming from a medium where users like browse and then take action to one where it also has agents to kind of let them delegate people delegate their work for them to be able to complete their tasks. So just like when the web worked well on iPhone or it worked on iPhone, but it wasn't optimized for mobile. Today's web works for agent flows, but it's not yet optimized. But the great thing is many agents can just analyze the site either by looking at screenshots or understanding the DOM. And one of the things that we we we like about this is it really just requires us to recommit to semantic HTML, ensuring accessibility and just recommitting to the kind of the basic principles of modern web development. Things that arguably we should already all be doing as developers. But users intent has transformed. It's not single interactions, it's actions across multiple phases of a site, maybe across sites as well. You know, people want to find that hotel for the upcoming tech conference, maybe integrate it with you know, their their colleagues restaurants. Maybe I I was told about this. People like to find kombucha bars. I literally learned that what kombucha was this week. Still not quite sure. Anyway, North Wales, we don't do kombucha. Anyway, so the bit here is, you know, agents are able to create these plans that are way more complex that are way more powerful than we've thought about before, but it really requires an integrated approach. Like both in the browser sense, like how the browser is, you know, how we're going going about changing the browser, but then how do we help you get your sites evolved to get ready for these multi-step agentic approaches? So, obviously the browser is evolving. Earlier this year, we introduced Gemini in Chrome, and it enables users to chat and multitask without switching tabs. You know, we've created this browser assistant that can navigate sites, summarize content, it can create quizzes, books, you know, help you find the right sleeping bag and those types of things. But it can do this because web pages describe like the function of what is on the site and the function of the site. And so, our tools can understand and then this gets back to the point is if we can kind of actually say to the to to the the tools that we're using, this is a well-designed site, this is the structure, we can help the agents and the tools achieve the users' goals. But if you go one little step further, just like how spreadsheets turned everyone into programmers, I think skills like things like skills in Chrome, you know, where everyone can instruct the browser has the same ability as well. So, with skills in Chrome, you can um you know, browse a library of ready-made skills already. Uh you can get it to kind of like pull out product specs. I'm I'm told protein macros are a thing. I actually don't know what protein macros are as well, but you can extract them from docu- uh the pages. You can summarize long documents to find what you need. But then you can take those chats and then turn them into essentially skills, which are repeatable, remixable, and then you can run them across a number of different websites. And I think this is a new level of experience where we're enabled we're going to enable people to be more like a developer just at a different level of abstraction. But the good thing is, and this is where I get onto the the very developer-centric things, is LLMs can infer the intent of a page by scraping the image like scraping the images, scraping the DOM, guessing the clicks. But behind the scenes, you know, it's it's kind of a little bit hard and opaque. And as developers, we really do like a lot more control. Like we like to be able to guide our tools around our sites, right? And this is where Web MCP comes in. Now, obviously, broadly before Web MCP, there's a lot of difficulties that emerge. You know, our UIs that we build often reflect many different human constraints, brand guidelines, UI mandates, regulation. In a lot of cases, our tools don't need to deal with the same kind of experiences that people who will browse your site do. And I do think that this is where Web MCP can help. Now, Web MCP is a proposed specification at the moment, and the goal is to transform HTML forms and JavaScript functions into tools that your agents can use. And that can then make it a lot easier for you to participate in this agentic ecosystem. Now, Web MCP, actually have a question. You all know Web MCP? Yeah, you're pretty I know I know you don't know Web MCP. >> [laughter] >> Uh so, Web MCP, it our goal here is to integrate many of the learnings for the model context protocol. But, however, we're only focusing on the tools part of MCP. And instead of having to expose an MCP server or a CLI and then trying to work out how to get that to integrate with your website, you're just exposing your current browser tab, and then that is able to share a list of tools that the agent can then interact with on your site. And so, in the demo that I showed earlier, you know, I exposed the light switches, the actual machine, the browser so you can change pages. They were all the types of tools that I exposed to the agent that we have. In a real-world example though, you know, that was a fun demo. You know, imagine you're running a store, and the user wants to kind of buy some shoes, like size 10 shoes that are brown maybe or or or whatever. In this case, with Web MCP, you would expose a number of tools like search, add to cart, maybe checkout. Like it depends on where you want the user to actually interact with. And you would expose these via either a form or HTML JavaScript at this point. And then simply, the agent should be able to work out which tools to use, which ones to execute, and then get to the point where hopefully that the user's task is complete. Now, the great thing is about this is that we're able to use the existing semantics of modern web development. You know, everyone kind of pretty much here knows how to build a HTML form. Well, we can just add a number of extra attributes onto the form like a tool description, which describes to the agent what this form does and how to interact with it, and then some extra tool parameter descriptions about how the agent should fill the form out. And so, for instance, if you have things like maybe a star rating, you would say this is a star rating, or there's a description, or some comments. You get the ability to kind of explain to the agent through a normal form with HTML attributes how how they should interact with it, which I think is incredible. If you want the imperative API, we have navigator.modelcontext.registertool, and again, it's a similar type of shape. You give it a name so that that the agent knows what tool to call. You give it a description, which describes the intent of the actual tool, and then an input schema, which you know, describes the shape of the data that will go into the function. And then when the agent chooses to match the user's intent with the you know, the like this tool, it will then execute the function with the data kind of passed in as well. I think this is just a very kind of powerful primitive that we have where we have both HTML and also JavaScript ways of actually uh engaging in this agentic ecosystem. But the one thing I really like about this one, obviously, it's actually I think it's actually quite I don't want to say simple, but it should be relatively Well, I'm going to say it. It's relatively simple. Sorry. >> [laughter] >> To start it think about how to integrate into your experience at a technical level. Maybe at a wider level it's about your site architecture, it's a little bit harder. Uh but the real powerful thing about this is because it's running inside the browser, it's running inside the context of where the user is. So, you have things like sign-in state and other cookies and local storage just available to these tools. Something that you don't really get from, you know, other kind of, you know, uh, you know, tool-based MCP-based systems, where they're not actually running inside the browser. Now, obviously, this all runs within the security boundaries and the security context of the browser. Um, but I think this is a very powerful way of starting to kind of integrate with the within the ecosystem. So, I I just want to show you a quick demo of one of the people that we've been working with. Now, this is an experiment. It's not a production-level system, but Expedia have been doing it, uh, you know, some integrations to try and integrate Web MCP into a hypothetical flow for them. So, I'm just going to talk through the demo. Now, we start off It's hard to see, but a a search that says, "Find a hotel close to grandma on the 4th of July." Gemini will then create the task, uh, the plan. The user accepts it. And then they have a number of different tools on the system, like search lodging, update lodging filters, and then navigate to property. And the browser is working out which tool to call. And so, in this case, actually, it's called some tools to update the search, but it's also doing actuation on the page. So, they don't have an update date filter. But it's done the actuation. It will then work out, "Well, actually, we think we want to send the user to this property, like to this hotel." There we go. It's kind of worked. And then the user has the ability to either confirm, or in some cases, the agent might choose to check out. Now, this is just like an experiment. This isn't in production, but it gives you an idea about how these things might work in the future. And I think it's quite exciting to see, especially once we think figure out kind of performance, and we work with on the security primitives even more. There are another, uh, whole set of other people in the industry who have also been experimenting with Web MCP and given us a lot more feedback around this, as well. Now, Web MCP is designed to be an open specification, and we are working across the industry uh, standards bodies. But I will say it it is still very experimental at the moment. Now, Gemini and Chrome will also start to work out how to integrate this so we can experiment even further. And we're running some of these early tests with some of these partners as well. But if you want to actually stay on top of this, you can register to this at this URL for the origin trial. Now, we're expecting this will land in Chrome in Chrome 149, which if I get my dates correctly, it's about June the 2nd. So, it should be available around June the 2nd for you to start experimenting with as well. And our goal here is once you're in the origin trial, we really want your feedback to shape out like how this API should work. Does it work for you? Does it work for your use cases? And then we can work out how we can actually start to get like help other developers architect this if this if this does become a standard. Now, that's agents kind of transforming how users will browse. I just want to spend some time talking about how the tools that we use will change how we build software at least anyway. So, on a personal level, you know, I'm a manager in the team and then prior to maybe the last 6 months, I could do development in my free time. But now with some of these tools, I'm building every single day. And the weird thing is, you know, probably like many people, we're having conversations with a tool that kind of works out what we want to try and do. I don't know about everyone else, but I actually have a microphone. I just use my voice to literally talk to my large language model. I ask it kind of what I want to try and do and then I have a conversation about how we're going to achieve it, edge cases, and that's before I then get to get it to start to work. Now, I'm definitely far from the only developer doing this. I actually run some This is from from my blog, but I run some analysis across GitHub to understand how many people are using all the different tools to create commits. It's It's going like crazy like millions and millions of developers are submitting millions of pull requests every day with agentic tools. And so, this is one of the trends that we want to make sure that we're able to help you know, help it help developers with. Now, the tension is, you know, the obviously the the tools are you um you know, advancing at a pretty rapid pace. Our workflows are changing. It's at conflict with the like how the web platform works. You know, if you take uh one example of a browser, so Chrome, it updates once every 4 weeks. I think in a couple of months it's going to be update once every 2 weeks. But the models are trained on a version of the web from, you know, a year ago in some cases, right? And so, how do we deal with that tension? So, today what happens if I want to build some technology uh some examples like my HTML and Canvas demo, I would load up the context with the samples, the examples, the spec, the explainer, some unit tests sometimes, submit that in, and then, you know, they're actually pretty good at building. But I have to know about all of that context. And if you're just like a general developer, you're not staying on top of things. It's my job to stay on top of all these things. Every other developer is just like, I've just got a job to do. I need to implement some functionality for my business. Right? So, the real question for me comes like can Chrome help in this space? Can we take the the decades of web development experience and help you solve and reason about the kind of the modern platform? You know, I really want us to get to a point where we're able to, you know, build for the web of today, not like the web that was. And so, I think the answer is yes, we can definitely help in this space. So, one way that we're doing this is with the preview that you saw in the keynote, which is with modern web guidance, which is a skills pack. And the goal here is to give your tools a validated uh sorry. There we go. >> [laughter] >> A validated ev- evergreen repository of the best ways to kind of improve the compatibility and implement what is and what we think is the modern web platform. You can install it with a pretty simple universal script, MPX modern web guidance install, which means that it should work in any IDE or CLI that you have that supports skills. And we've built up a number of different skills as well. We have high-level skills around web performance, identity, and security. And then there's lots more guidance around specialized skills across I think it's over 100 other different common use cases that you as developers have to implement in your sites every day. And then we're able to match that with the modern equivalent on the platform. We aim for this guidance to also be kind of very kind of understanding of baseline is probably the easiest way to say it. So even if a feature that you're using isn't baseline widely available, we should be able to give you make you more we should be able to make you more confident and give you the guidance with a set of fallbacks and maybe progressive enhancements as well. So the goal here is that you should be able to rely on the guidance that is coming from these skills packs to be able to be usable by your users. But you also need to understand who your users are and we're also launching a new tool with an integration into Google Analytics so that you can understand your from your actual pages your baseline target and work out your baseline target based on how your users are interacting and visiting your site. Uh and so we can go to that baseline I think baseline checker.chrome.dev. Now I think in all broadly this is going to enable our coding tools to properly use modern features ideally to follow best practices from industry experts within Chrome and across the industry and to help you use platform features in a way that solves your problems without you having to reason about the the entire shape of the web platform. Now for me I'm actually very excited about this because I all the lens are going to give us are giving us a way to experiment at scales that we've never been able to. But I do want to make sure that we're able to build experiences are high quality, safe, and then don't come at the the expense of cross-browser compatibility. And I think this project with the high quality guidance kind of like built in and maintained by our team we're definitely on a step in a path into that phase that space. If you do want to learn more about modern web guidance Phil who is just sitting there he's going to be the next talk in this room, and if you're on the live stream, the next talk on the live stream, and he's going to do a deep dive into using modern web guidance and how it works. So, returning to my conversations with my machine by large language models, you know, as I build with agents, I'm not just sending them off to work, right? I actually am working with them in a really, really tight loop. And my tools are, you know, they do output the code essentially that I requested. And they run against the battery of tests, but they don't really have a deep understanding of how the page is running, like what they what is actually on the page, what is rendered, and how it's working inside the browser. This This ability, like to really deeply inspect pages inside the browser, it's been a developer superpower for years, right? Like we all use Chrome DevTools or Safari DevTools, all the different DevTools. But now we want to make sure that with DevTools for agents, your tools also have the same ability to actually deeply inspect uh your pages. And so, one example about this is you we're going to give you direct access to things like console logs, network traffic, memory traces. We give you access to the accessibility tree. And by bringing this runtime data into your tools, you're able to perform very sophisticated diagnostic tasks like performance profiles, heap snapshots, memory debugging, and then automated Lighthouse tests as well. DevTools for agents, it's an MCP server, so you can just install it the same way that you install any other MCP server into your environment. And then really all you have to do is then say "Run the agent to run say a comprehensive performance analysis of developer.chrome.com." You know, there are performance issues and it'll tell us what we need to fix there as well. And the goal here is really designed to kind of transform the debugging process and aiming to kind of reduce the amount of manual intervention and also the manual fixes that you have to do because you can get the tools to then subsequently fix the issues that it finds. Uh you what when it runs something like a Lighthouse audit as well. Now, when we first shipped this, I was like, "Great. This is done. Like, we don't need to update it anymore." Well, it turns out the team's like, "Nah, we have to update it. We've got loads of ideas." And so, we've done a number of different features and I'm going to go through them pretty quickly. So, the the first one is we've introduced skills into the DevTools uh yeah, for Agents project. And that's going to enable the tools to handle more complex tasks. So, if it needs to do, say, uh memory debugging, you can we can instruct it to do heap snapshots and then understand how to actually reason about what is in the heap snapshot. We have a CLI tool, so if you're on the command line or you you want your Agents to be a little bit more token efficient, you can use the CLI version of the tool. And we also have a TypeScript API if you want to integrate it into something like your continuous integration environment. We also have the ability to connect to a running instance inside Chrome. So, that the idea here is that your Agent can then pick up from where you left off, uh which I think is pretty cool. Obviously, people are using it for things like Open Claw. We can also support multi-agent workflows. Now, this is great, so you can connect to multiple instances of Chrome, and this is important if you're creating multi-user systems or multi-role-based kind of systems as well. So, you can connect to like two, three, or four different versions of Chrome at the same time. And one thing as well is that if you're inside Chrome DevTools and you're inside the network panel, you can say select an element in the network panel and then ask your Agent to like analyze what is selected as well. So, we have this really nice hookup between DevTools, DevTools for Agent, and then obviously within other things as well. And then the final piece is we also now have the ability to automatically install and debug Chrome extensions. So, if you're a Chrome extension developer, you can now inspect or you can do the install using inspect the service worker, the side panels, the pop-ups. It's a whole new level of automation for Chrome extensions as well, all powered by DevTools for Agents. I'm very excited about this. On one hand, we've got modern web guidance. The goal here is to give you access to the best practices to help you build for the modern web so you can build higher sites. And then on the other side, you know, Chrome DevTools for agents, the goal is to just give your tools the ability to really deeply understand what's on the page, any issues, and fix them. It's a really nice like tool assisted loop for building sites. And obviously, I can't stop here. Loads more to go still. Um as the tools improve just broadly, we're able to build higher quality sites. I think it is important to look at what is like what is the like what is coming to the platform that is also going to enable you to build those higher quality experiences. And so I'm going to give you a very brief overview of what's come to the web platform, uh and also what is going to come to hopefully Chrome soon. But the one of the things you'll hear me say quite a lot in the team talk about is like baseline. All right, this is a really important component for us because baseline is the cross-browser like how like all the features that every single browser supports. So it's what you as developers can really really rely on. Since last year when I was on the stage, I think 55 new features have become baseline widely available, which are available for you to be able to kind of use and be confident that you can use it with your user base. That's things like the search element, origin private file system, subgrid, offscreen canvas, MathML. There's like oh, 50 more after this as well. But I think the big here is that the exciting thing is not just the features, it's the fact that every single browser vendor is trying to push on the platform at the same time to make it easier for every single developer to build for. And again, since I was here last year, 44 features as of April the 22nd have become newly available. Things that you can start to plan to use in the near future. They are available across all browsers, but they might not be kind of meet your usage requirements in terms of your browser support matrix. Now, I don't have enough time to go through all 44, um but I I do want to kind of give you a highlight of like how some of these things that have come to the platform is going to change how the web feels. And I will actually, before I go to the next slide, I did a little check this morning. We're actually 52 features as of this morning at now baseline newly available. So, the first up is you probably heard us talk about this quite a lot, view transitions. We just think this is going to change the way that the web feels. It enables smooth transitions between different view states inside a page and also across pages without the need for complex JavaScript and light libraries and animation libraries. Uh and it's it's going to help basically improve the perceived performance of the web. And to complement view transitions, the navigation API is now newly available. And the navigation API, the goal here is to replace like the aging history API inside the browser. And it lets you kind of manage your application state, all your navigations through one event essentially. So, you can understand whether someone is pressing backwards and forwards, and then you can then hook that up with your kind of view transitions API as well. This is going to make web applications just so much easier to build. And then the final piece is uh you know, you hear us talk about Core Web Vitals a lot. Uh largest contentful paint and interactions uh interactions to next paint are also newly available. And what this means is that you can just understand how your users are using your site uh in terms of performance and responsiveness irrespective of a browser. So, if your user is using iOS, you will have these metrics available to you now. And I think this is one of those ones where we're very excited to see what's happening with Core Web Vitals just for the last couple of years because it really does help you improve the performance of your site. And now you can understand it irrespective of whatever browser someone's using. Now, I mentioned that there's 44 new features or 52 technically uh are baseline newly available features. It's a It's a lot to keep up with, right? And so, with uh web.dev, you can use this new thing called baseline alerts. And the goal here is to enable you to track when features come into a browser, when they become newly available, or also widely baseline widely available. You can get notified by email, RSS, or even webhooks as well. And the goal is just to make it easier for you to understand how the platform is evolving, so that you can just plan your business and your sites way more effectively into the future. Now, one of the things I do a couple of things I love about my job is one, I get to think a lot. I I build lots of things at the the very kind of fork like the cutting edge of like web development with Chrome. But I also get to tell talk to developers every single day. Now, one of the things or two of the things that people say is firstly, we just need to ship better. Like we need to be able to ship more easily, understand what's on the platform, make sure the platform's predict more predictable, don't go breaking the web all the time. The goal there is like that's baseline modern web guidance. Like they're the tools that hopefully help you like ship more uh sites more effectively. And then the second part of this is that you want to understand where the web is going so that you can plan for the next one or two years ahead. And so that's what I'm going to talk about now, all the things that are starting to come into Chrome. So, I kind of want to show you some of the bits like this is the very tactile part of the web. I don't think you'll hear me say agents one more time. Um but these are the things that people will experience as they use the web. Now, actually no, you will hear me say agents one more time. I tell a little bit of a lie. So, the bit here is like we have two two areas or two ways that I think about this. One, how do we put on device intelligence into people's hands because the technology is very capable and very good. And then the second is like how do we actually just help you improve people's experience of the web. So, for the first area, you know, obviously LLMs have changed, you know, what is possible with a computer. And obviously they've evolved from things like text completion and then semantic data extraction. Then people moved on to more summarization. And now people are starting to to at function calling for those kind of like agency use cases. Now, the tools I'm going to talk about are designed to kind of help everyone think about these like new types of experiences that they want to bring to the platform by enabling more intelligence in the browser. Now, the way I look at this is that we do want to make sure that everyone should have access to these tools irrespective of internet connection and they should be able to run them privately and then also at no cost in the context of large language models. Now, the Prompt API came to Chrome in 148 and it came with multimodal support as well, which means that you can also analyze for instance images and understand what's happening. And this basically means it makes it easier for you to kind of think about these new kinds of experiences that you want to add, but it is only available in Chrome, right? This is only a Chrome-based experience. And so, one of the things that we encourage people to do is to think about where you can like use these features progressively without them being core to your application right now. But we do have a number of partners, trip.com, Drupal, and Temu who have experimented with this API and also shipped it to production to their users. And so, I just want to give you a quick overview of trip.com. It's a very short demo, but they integrated the Prompt API just to make it easier on the left-hand side to navigate flights. If you don't have the this Prompt API, it doesn't appear, but if you do, it's a nice simple progressive enhancement and a use like a nice feature for them and I believe they like using this using this technology on that side. The Prompt API also supports structured output. And like the reason why we have this is it just enables you to constrain the output from the large language model. So, if you're building an application that needs to understand what's come out and like respond to things inside you know, respond to yeah, I mean, maybe the caption for instance, you can basically get JSON out and then you can just integrate it into your application logic just far more effectively than just like parsing strings. And we've also expanded language support from English only to include French, German, Japanese, and Spanish with more to come in the future. And Kenji's at the back and I hope Welsh is coming soon. Is Welsh coming? Is Welsh coming? Maybe we'll see. We'll talk later. Anyway, it's fine. I'm learning Welsh. Looking ahead, we're also kind of expanding what we can do with the prompt API. So, we're going to introduce the Gemma family of models. And when we introduce that Gemma family of models, it's going to enable us to do native function calling, which is going to enable you to build out these autonomous client-side agents you know inside the web. Now, we want to do we do want to make sure that these upcoming improvements are rock solid, the performance and the quality and the security are all great. So, please do sign up for our early preview program. So, you'll get access to the latest capabilities with the ability to help us influence the shape of these APIs into the future as well. If you want to learn more about this, Thomas Steiner has a talk build new features using built-in AI in Chrome and I encourage you to watch that because it's way more expansive about what we're doing with built-in AI on device. Now, when I think about the web and improving experiences, there's been a huge amount of new capabilities that have come to the platform just in the year at last year alone. Now, I get really excited by these because they enable people to experience things that they've never seen before, but they enable to do developers to build things that have been previously impossible to do on the platform. And I think we've taken huge strides in kind of new capabilities on the platform this year. You know, single page applications, you know, are now able to correctly measure that core web vitals performance between routes with the introduction of soft naps. This is going to come in a slightly later version of Chrome, but it it does our data indicates that if you have a single page app, your core web vital pass rates will go up. But I do want to show you something that I think is just going to change the way that we build some UIs in the future that are both performance and also UI wins. And I think it's one of the biggest changes to HTML in a decade. So, if you go back to my bedroom and look at the clock on my machine, you can see it updating every single second. Kind of what you'd expect from a clock. But the thing is like there's no JavaScript on this page. Like it's updating every single second, and that's because of the declarative partial updates that implementation that is coming into Chrome. You can now render updates to HTML out of the order that they were sent on the wire and that they they appear in the DOM. Now, the clock demo it it's the clock demo isn't all that useful by itself, but I do think it highlights some compelling uh potential use cases. So, for example, if you have a huge amount of application structure, say a massive menu, you can render it at the end of your page, let the critical content get rendered first, and then you can patch it back into the DOM just a little bit later. It's available in Chrome 148, and it's also with that you don't need JavaScript for it, which is great. I just want to show you this other demo as well that you can think about UI placeholders. Like if you have a very slow task for looking up user data, you know, frequently we'd send off a different request. You can keep it on the same request and patch it in at the end of the the HTTP request. And because the way that this API works, it will just update the user interface with the kind of well, the latest data that's come from that. Again, all without JavaScript. But there's huge amounts of different things that we can do with this API, and this is just the start of some of them. Now, I want to show you one other thing where I think, you know, I would like to make HTML the new JSON, and we have a new API that's going to help with that. So, if if you've been using frameworks, you'll probably know about something called the island architecture. I think it's a beautiful pattern and it's a beautiful concept, but it's it's going to be even easier for us as just like plain JavaScript developers to do something very sim- similar. So, the new streaming API for dynamic markup gives you a revamped way to improve experiences by letting you inject HTML into documents by the stream HTML and stream HTML unsafe methods. Actually, there's a whole family of different API calls in this. But the what this really means is you can take the body from a fetch request and then just stream it directly into the DOM. You don't need to do these like these JSON transforms anymore. I think it's very powerful a very new powerful primitive. These APIs have both been available in Chrome since Chrome 148, so pretty recent. They're going to change the way I think personally they're going to change the way that we build web experiences well. But please do go to this URL, try it out and and give us feedback so we can get it you know across the platform. Now obviously over the last year we've been focusing on kind of a lot on making the web just feel better giving you way more APIs. You know, if you look at it from an API perspective, just a huge amount of like CSS and JavaScript APIs that are letting you build more complex and richer user interfaces. But it really is more than just API and aesthetics. Our goal is to help you build sites that just people like scroll better, transition between views better, enable to people to interact with their devices in a more physical and intuitive way. Now I don't have a huge amount of time to go through most of this, but Una and Bramus have identified five core UX principles that are going to change the way I think of how we think about building for the web. And so I would encourage everyone to watch that talk. But there is one technology that I think is going to change what we build for the web and that is HTML and Canvas. I'm going to spend a little minute or two talking about that. So you saw from the demo at the start where you know the 3D experience and we can integrate like a fake web browser into a computer. That's HTML and Canvas. And what it lets you do is just render standard DOM directly into a Canvas element. And this can be used in a number of different ways. You could imagine 2D application frameworks maybe like something like QT or even 3D engines starting to integrate this so that they can just take the functional benefits of the web's like rich semantic UI layer and have real DOM content that's searchable, translatable, accessible So there was another able inter- interactable as well right inside the com inside the canvas. But, I just want to give you a little preview of like some of the things that you might be able to do with this API. On one level, you could take an individual element. This is an input type equals range, and like basically make it look very different to what we expect. This is a This is a semantically correct There's the input element up just there, and we're providing a new richer UI layer. Now, I I don't imagine every single website looking like this. I think that would be actually pretty over the top. But, if you have like a consistent design language that you can't implement right now in a page, you can start to think about well, maybe I can use something like HTML and canvas to enhance it. And if the API is not there, it's great. It'll just look like your existing website right now. You can go all the way to those 3D-like experiences by integrating it into something like 3.js. So, you can have like 3D car dashboard, interactive books. We have a whole demo station out there, which you can look at, which shows you what to do. Again, all accessible, interactable, takes advantage of all the browser's features, like things like translate and search, as well. I think this is just a new layer of richness that we're going to enable across the web. And personally, it's one of those reasons why I think people will keep coming back to the web because we have these experiences that you just can't get anywhere else. Now, it is designed to be as simple as possible to integrate. And if you have PlayCanvas or 3.js, you can use it today. And it's it's just as simple as adding a new material or texture into three, and then the library in the browser just take like handle all of that extra complexity for you. Uh as well. I I just think this this is a game-changing API. I think it's going to change the way that we experience the web. And if you look at the rest of the ecosystem, this is something that West Boss has done. It's hundreds of experiments that are happening right now. If you're on X and you search for HTML and canvas, you'll just see people tearing up web pages, exploding web pages. Again, these are all very fun like fun demos, but it just highlights how expressive this API can be. And there's hundreds more that's kind of There's hundreds more things that are happening in the ecosystem right now. Maybe we could Suppose we could watch. You can go to experience outside. I think it's going to be great. I think the the bit here though is if if you want to try and see what we can do with this API. We're starting to pull together an awesome HTML in canvas page where we're trying to aggregate the ecosystems experiments in this place as well. So if you have a HTML in canvas demo, send us the link. We'll try and get it on there as well because it's a really kind of beautiful expressive expressive API. Okay, so that was a lot. How many times did I say agent? 62. Wow. Okay. Brilliant. You can probably tell I'm quite excited for the future of the web platform. You know, I think the platform is going to evolve for the like the people who use it. You're going to see APIs like HTML in canvas, a whole bunch of new UI primitives that just make the web rich and expressive and something that is very fun to use. And then at the other side of things, we do want to evolve the web so that it is a participant in these new platforms. Things like web MCP and getting it into the experiences like the agents and the tools that you're using. I think it's going to make it like make the web a first class experience across all these different types of platforms. And I think that the the real important thing for me and why I'm in developer relations is that we just want to help you do this as well. We know it's hard to navigate the kind of the ecosystem and understand what's going on and that's where things like modern web guidance comes along where we can give you the tools to help you build for the modern web effectively. So that's it. Thank you for coming along. You've been a great audience. >> [applause] >> Brilliant. >> [music] [music]

Original Description

Discover the cutting edge of web development and learn where Chrome is taking the browser in 2026. Explore new capabilities that make the web more capable, reliable, and intelligent. Resources: 15 updates from Google I/O 2026: Blog Post: https://developer.chrome.com/blog/chrome-at-io26 WebMCP: https://developer.chrome.com/docs/ai/webmcp Modern Web Guidance: http://goo.gle/modern-web-guidance Chrome DevTools for agents: https://developer.chrome.com/docs/devtools/agents HTML-in-Canvas: https://developer.chrome.com/blog/html-in-canvas-origin-trial Prompt API: https://developer.chrome.com/docs/ai/prompt-api Baseline: http://web.dev/baseline Speakers: Paul Kinlan Watch the Chrome sessions from Google I/O 2026 → https://goo.gle/Chrome-at-IO2026 Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs #GoogleIO Event: Google I/O 2026 Products Mentioned: Web, Chrome
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Related Reads

📰
AMD Unjuk Gigi Lewat Helios: Siap Geser Dominasi Nvidia di Industri AI Server Global
AMD challenges Nvidia's dominance in the AI server industry with its new Helios technology, offering a potential alternative for data processing and AI applications
Dev.to · Renee
📰
No, 80% Of Startups Are Not Using Chinese AI, But The Truth Is Far More Interesting
Discover the truth behind the adoption of Chinese AI in startups and how it's being utilized in innovative ways
Medium · LLM
📰
AMD takes on Nvidia with its Helios AI rack scale system
AMD introduces Helios AI rack scale system to compete with Nvidia, enhancing AI computing capabilities
TechCrunch AI
📰
The Biggest Lie in Tech Isn’t That Users Are the Product
The tech industry has been measuring the internet incorrectly, and AI will soon expose this mistake, highlighting the need for new metrics and approaches
Medium · Startup
Up next
How SpaceX Holds the World's Biggest Rocket
Silism
Watch →