What's new in Chrome

[00:05] Hello, hello, everyone. How are you doing? Real good? Brilliant? So at the start, did you hear the Scouse accent or the Liverpoolian accent in the keynote when they were doing... [00:15] 45 minutes of that now. It's going to be brilliant. I'm Paul. I lead the Chrome Developer Relations team. It's great to see everyone here. [00:23] I'm thrilled to be back. I was here a year ago talking about what's new inside Chrome. [00:27] 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. [00:33] WebMCP, [00:35] and HTML in Canvas. So can we just switch to the demo please? [00:39] So this is my childhood bedroom 30 years ago when I was starting to learn how to program [00:45] I had all these books. [00:46] Actually, this is a lie. I didn't actually have these books because... [00:49] Only HTML was the thing that was actually around at the time. [00:52] I was a Pearl programmer when I was actually starting things. [00:56] Brilliant. Hello. So anyway, but I did have this browser, right? Like, [01:01] This thing that I could browse the web and find new things. I could... [01:05] You know, maybe play some games. [01:07] Now this is the HTML and Canvas bit, right? We've got a 3D experience. I'm terrible at games at the moment. [01:12] I could then browse the web, select text, and do all these really fancy things around the web. [01:18] I found a lot of new friends when I was actually browsing and on the internet at the very start of things. [01:23] And then I also had this. [01:24] Slide there. [01:25] You know, I wanted to be a web developer, and I wanted to be a developer advocate, even though the role didn't exist. [01:31] at the time. [01:32] 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.

[01:40] But the thing I like about HTML in Canvas is the fact that we have these very 3D related experiences like this. This is a full 3D experience. [01:48] But we have the browser and the content just embedded in. And so we can do things like... [01:52] Translate to Welsh. [01:54] Does anyone know any Welsh? [01:56] No, I do a little bit. I live in Wales, and I'm learning at the moment. And then we can even do things like find... [02:03] Web GPU, 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. [02:11] Anyway, so... [02:13] You jump forwards 30 years... [02:15] Right? And thankfully, I'm no longer living with my parents. [02:18] 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 [02:27] in these agentic experiences. So I'm just going to show WebMCP. [02:31] I don't know whether you can see that properly at the moment. [02:33] But this experience here, [02:35] has exposed a number of tools. [02:37] two essentially agents at this point. And so what I can do is I can do a single one. I [02:44] Good Monday. [02:45] Turn off. [02:46] the light [02:47] All right. [02:49] It might ask me which lights, but we'll see which one it does. So there we go. 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 [02:56] And so what I'd do is I'd maybe turn off... [02:58] the computer. [03:00] And then start it again once you've gone. [03:06] So let's see if it works. And so there we are, the computer. I can maybe zoom in.

[03:10] And there we are, it's rebooted. And so we've had this multi-step flow of turning the machine off, [03:15] 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 [03:23] with HTML and Canvas and also WebMCP. I'm very excited about them. [03:28] But this is the early days, right? Like when I started my development journey... [03:31] This is what my environment looked like. This was...any Cubasic people? [03:36] Brilliant. [03:37] If you're not old enough to remember, [03:38] This is before modern IDEs, before we had language servers and syntax highlighting, like inline debugging. [03:44] We just had these experiences. And there's a fun fact, right? [03:47] I actually nearly quit programming before I even started because I didn't realize American English was a thing and that you spell 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. [04:01] for it. [04:02] But I got over it at least anyway. [04:03] You jump forward 30 years, and now my development environment is... [04:07] 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... [04:19] within... [04:20] the last six months. [04:22] So... [04:22] Our primary goal in Chrome and why I do what I do is to get everyone ready for this next generation of web development. [04:29] And the way I look at it, at least anyway, there's like three different components. [04:33] One... [04:33] We want to make sure that your sites connect, like, participate in this agentic future, and the web is a first-class experience. [04:40] 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...

[04:51] don't have that knowledge built in. [04:54] And the third part... [04:55] is we also want to kind of get you ready for the years ahead as well, right? [04:58] We are going to talk about some of the things that Chrome is introducing. [05:02] 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. [05:11] Now... [05:12] You're going to hear agents quite a lot. I know one person is counting how many agents, how many are we at? [05:19] Two. OK. [05:19] Agents 3. Brilliant. Anyway... [05:22] 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. [05:33] Now, with the web, [05:35] 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 [05:44] to mobile-first experiences. And we had this technology to turn the browser into a mobile-based experience. [05:51] 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. [06:00] But when I look at kind of where we are today, you know, over the last six months, we've seen a massive, enormous shift [06:05] In our role as developers, [06:07] And I think it's going to happen at a pace... [06:09] 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, like [06:19] has agents... [06:20] to kind of let people delegate their work for them to be able to complete their tasks.

[06:25] So just like when the web... [06:27] worked well [06:28] on iPhone, or it worked on iPhone, but it wasn't optimized for mobile, [06:32] Today's web. [06:33] works for agent flows, but it's not yet optimized. [06:37] But the great thing is, many agents can just analyze the site, either by looking at screenshots or understanding the DOM. [06:44] And one of the things that we like about this is it really just requires us to recommit to [06:49] semantic HTML. [06:50] ensuring accessibility and just recommitting to kind of the basic principles of modern web development, things that arguably we should already all be doing as developers. [07:00] User's intent has transformed. It's not single interactions, it's actions across multiple phases of a site. [07:06] maybe across sites as well. You know, people want to find their hotel for the upcoming tech conference, maybe integrate it with [07:13] their colleagues' restaurants. [07:16] I was told about this. People like to find kombucha bars. [07:20] I literally learned out what kombucha was this week. [07:23] Still not quite sure. [07:24] North Wales, we don't do kombucha. Anyway, so the bit here is, you know, agents are going to be able to create these plans that are way more complex [07:31] 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 to reason about changing the browser, [07:42] But then how do we help you get your sites evolved [07:45] to get ready for these multi-step, agentic approaches. [07:48] So obviously the browser is evolving. Earlier this year we introduced Gemini in Chrome. [07:52] 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.

[08:03] help you find the right sleeping bag and those types of things. [08:06] But it can do this because [08:08] Web pages describe [08:10] like the function of what is on the side, [08:12] and the function of the site. And so our tools can understand [08:15] And this gets back to the point is if we can kind of actually say... [08:19] to the tools that we're using. [08:21] This is a well-designed site. This is the structure. [08:24] We can help the agents and the tools achieve [08:27] the user's goals. [08:29] If you go one little step further, just like how spreadsheets turned everyone into programmers, I think things like skills in Chrome [08:38] where everyone can instruct the browser, has the same ability as well. So with skills in Chrome, you can browse the library of ready-made skills already. [08:47] You can get it to pull out product specs. [08:49] 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 the pages. You can summarize long documents to find what you need. [08:59] but then you can take those chats and then turn them into essentially skills [09:05] 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 going to enable people... [09:14] to be more like a developer, just at a different level of abstraction. [09:19] But the good thing is, and this is where I get onto the very developer-centric things, is LLMs can infer the intent of a page by scraping the images, scraping the DOM, [09:29] getting the clicks [09:30] But behind the scenes, it's kind of a little bit hard and opaque. And as developers,

[09:34] 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 WebMCP comes in. Now, obviously... [09:43] broadly before WebMCP. [09:45] There's a lot of difficulties that emerge. [09:47] You know, our UIs that we build often reflect many different human constraints [09:51] brand guidelines, UI mandates, regulation, [09:55] 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. [10:02] And I do think that this is where WebMCP can help. Now, WebMCP is a proposed specification at the moment. [10:08] And the goal is to transform Hishmael Forms [10:10] and JavaScript functions [10:12] into tools that your agents can use. And that kind of make it a lot easier for you to participate in this agentic ecosystem. [10:20] Now... [10:21] WebMCP, actually I have a question. You all know WebMCP? [10:25] Yeah, you're pretty... I know you don't know it, McP. So, WebMCP, our goal here is to integrate many of the learnings with the model context protocol. However, we're only focusing on the tools part of MCP. [10:37] 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, [10:44] You're just exposing your current browser tab [10:47] And then that is able to share a list of tools [10:49] that the agent can then interact with on your site. And so in the demo that I showed earlier, 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. [11:04] In a real world example though, that was a fun demo,

[11:07] Imagine you're running a store... [11:09] and the user wants to kind of buy some shoes, like size 10 shoes that are brown maybe or... [11:14] or whatever. [11:15] In this case with WebMCP, you would expose a number of tools like search, [11:20] Add to cart. [11:21] maybe check out. It depends on where you want the user to actually interact with. And you would expose these via either a form or a JavaScript at this point. [11:29] 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 the user's task is complete. [11:39] Now, the great thing is about this is that we're able to use the existing semantics of modern web development [11:44] You know, everyone kind of pretty much here knows how to build a HTML form. [11:49] 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... [12:01] how the agent should... [12:03] 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 explain to the agent through a normal form [12:15] with HTML attributes. [12:17] how they should interact with it, which I think is incredible. If you want the imperative API, we have navigator.modelcontext.registertool. [12:25] And again, it's a similar type of shape. [12:27] You give it a name so that the agent knows what tool to call. [12:30] You give it a description which describes the intent of the actual tool. [12:34] and then an input schema [12:36] which describes the shape of the data that will go into the function. And then when the agent chooses to match the user's intent,

[12:43] with [12:43] like this tool [12:46] 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 [12:54] and also JavaScript ways of actually [12:56] 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, [13:03] I don't want to say simple, but it should be relatively... Well, I'm going to say it. It's relatively simple, sorry. So start to think about how to integrate into your experience at a technical level. [13:12] Maybe at a wider level, your site architecture, it's a little bit harder. [13:16] 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 other kind of tool-based, MCP-based systems, where they're not actually running. [13:36] inside the browser. Now obviously this all runs within the security boundaries and the security context of the browser. [13:42] But I think this is a very powerful way of [13:45] started to kind of integrate within the ecosystem. [13:49] So 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 [13:57] some integrations to try and integrate WebMCP into a [14:01] hypothetical flow for them. [14:03] So I'm just going to talk through the demo. [14:05] Now we start off, it's hard to see, but a search that says, [14:08] find a hotel close to grandma on the 4th of July, [14:10] Gemini will then create the task, the plan, the user accepts it. And they have a number of different tools on the system, like search, login, update, login,

[14:20] and then navigate to property. And the browser is working out which tool to call [14:24] And so in this case, actually, it's called some tools to update the search. [14:28] But it's also doing actuation on the page. So they don't have an update date filter. [14:32] It's done the actuation. It will then work out, well, actually we think we want to send the user [14:37] to this hotel. [14:40] 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 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. [14:55] Especially once we think, figure out performance and we work with on the security primitives even more. [15:01] There are another whole set of other people in the industry who have also been experimenting with WebMCP and given us a lot more feedback around this as well. Now, WebMCP is designed to be an open specification, and we are working across the industry standards bodies. But I will say it is... [15:19] Still, you know, [15:19] very experimental at the moment. [15:21] Now, Gemini and Chrome will also start to work out how to integrate this so we can experiment even further. [15:27] And we're running some of these early tests with some of these partners as well. [15:31] But if you want to [15:32] actually stay on top of this, you can register to this URL for the origin trial. [15:38] Now, we're expecting this will land in Chrome in Chrome 1.49, [15:42] If I get my dates correctly, it's about June 2nd. So it should be available around June 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

[15:53] like [15:54] 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, [16:01] help other developers architect this if this does become a standard. [16:06] Now. [16:07] That's agents transforming how users will browse. [16:11] 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, I'm a manager on the team, and prior to maybe the last six months, [16:21] 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, probably like many people, we're having conversations. [16:30] with a tool that kind of works out what we want to try and do. [16:33] I don't know about everyone else, but I actually have a microphone. I just use my voice to literally... [16:38] 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, [16:44] edge cases, and that's before I then get it to start to work. [16:48] Now, I'm definitely far from the only developer doing this. I actually ran some-- this is from my blog. [16:54] But I ran some analysis across GitHub to understand [16:56] how many people are using all the different tools [16:59] to create commits. [17:00] It's going like millions and millions of developers are submitting millions of pull requests. [17:06] 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 developers with. [17:13] Now, [17:13] The tension is... [17:15] Obviously, the tools are advancing at a pretty rapid pace. [17:20] Our workflows are changing. It's at conflict with how the web platform works.

[17:25] If you take one example of a browser, so Chrome, [17:29] It updates once every four weeks. [17:31] I think in a couple of months, it's going to be updated once every two weeks. [17:34] But the models are trained on a version of the web from... [17:37] You know, a year ago in some cases, right? So how do we deal with that tension? [17:41] So today what happens if I want to build some examples, like my HTML and Canvas demo, [17:47] I would load up the context with the samples, the examples, the spec, the explainer, [17:52] some unit tests sometimes. [17:54] Submit that in. [17:55] And then, you know, they're actually pretty good at building. [17:58] But I have to know about all of that context. And if you're a general developer, [18:02] You're not staying on top of things. It's my job to stay on top of all these things. [18:06] Every other developer is just like, I've just got a job to do. I need to implement some functionality for my business. [18:11] So the real question for me comes... [18:13] Like, can Chrome help in this space? Can we take the decades of web development experience? [18:18] and help you solve and reason about the modern platform. [18:22] I really want us to get to a point where we're able to 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. [18:32] So one way that we're doing this is with the preview that you saw in the keynote. [18:35] which is with modern web guidance, which is a skills pack. [18:38] And the goal here is to give your tools a validated... Sorry. [18:43] There we go. A validated evergreen repository of the best ways to improve the compatibility and implement what is-- [18:52] and what we think is the modern web platform. [18:55] You can install it with a pretty simple universal script.

[18:58] MPX, [18:59] Modern Web Guidance. [19:00] install, which means that it should work in any IDE or CLI that you have [19:05] That supports skills. [19:07] 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-- [19:18] or the-- [19:18] 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. [19:28] We aim for this guidance to also be kind of very kind of... [19:31] understanding of baseline is probably the easiest way to say it. So even if a feature [19:36] that you're using. [19:37] Isn't baseline widely available? [19:40] we should be able to make you more confident [19:43] 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. [19:52] to be able to be usable by your users. [19:55] But you also need to understand who your users are. And we're also launching a new tool [19:59] with an integration into Google Analytics [20:01] so that you can understand from your actual pages [20:05] your baseline target and work out your baseline target based on how your users are interacting and visiting your site. [20:12] And so we can go with that. Baseline, I think baseline checker dot chrome dot dev. [20:17] Now, I think in all, broadly, this is going to enable our coding tools to properly use modern features. [20:23] ideally to follow best practices... [20:25] from industry experts within Chrome [20:28] and across the industry and to help you use platform features in a way that solves your problems

[20:33] without you having to reason about the entire shape of the web platform. [20:37] Now, for me, I'm actually very excited about this, because LLMs are going to give us, or are giving us, a way to experiment at scales that we've never been able to. [20:48] safe. [20:49] and then don't come at the expense of cross-browser compatibility. And I think this project [20:54] with the high quality guidance kind of like built in and maintained by our team. [20:58] We're definitely on a step and a path into that phase. [21:01] in that space. [21:02] If you do want to learn more about modern web guidance, Phil, who is just sitting there, [21:06] 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. [21:16] So returning to my conversations with my machine, my large language models, [21:20] 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, they do... [21:29] output the code essentially that I requested, [21:32] And they run out against the battery of tests [21:34] But they don't really have a deep understanding of how the page is running, what is actually on the page, what is rendered and how it's working inside the browser. [21:43] This... [21:43] This ability to really deeply inspect pages inside the browser, it's been a developer superpower for years. We all use Chrome DevTools or Safari DevTools, all the different DevTools. [21:54] But now we want to make sure that... [21:55] With DevTools for Agents, your tools also have the same ability to actually deeply inspect [22:01] your pages. [22:02] And so one example about this is 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,

[22:14] you're able to perform very sophisticated diagnostic tasks, like performance profiles, heap snapshots, memory debugging, and then automated Lighthouse tests as well. [22:24] 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. [22:32] And then really, all you have to do is then say, prompt the agent to run, say, a comprehensive performance analysis. [22:38] of developer.chrome.com [22:40] 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. [22:51] and also the manual fixes that you have to do, because you can get the tools to then subsequently [22:55] fix the issues that it finds, [22:58] When it runs something like a Lighthouse audit as well. [23:02] Now, when we first shipped this, I was like, great. [23:05] This is done. 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. [23:12] And so we've got a number of different features, and I'm going to go through them pretty quickly. So the first one is we've introduced [23:17] skills. [23:18] into the DevTools for Agents project. [23:22] And that's going to enable the tools to handle more complex tasks. So if it needs to do, [23:27] A memory debugging, we can instruct it to do heap snapshots and then understand how to actually reason about what is in the heap snapshot. [23:34] We have a CLI tool, so if you're on the command line, or you want your agents to be a little bit more token efficient. [23:39] 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.

[23:48] We also have the ability to connect to a running instance inside Chrome. [23:53] So the idea here is that your agent can then pick up from where you left off. [23:58] which I think is pretty cool. And obviously people are using it for things like OpenClaw. [24:02] We can also support multi-agent workflows. Now, this is great, so you can connect to multiple instances of Chrome. [24:08] 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 two, three, or four different versions of Chrome at the same time. [24:17] And one thing as well is that if you're inside Chrome DevTools and you're inside the network panel, [24:21] You can say select an element in the network panel and then ask your agent, [24:25] to analyze what is selected as well. So we have this really nice hookup between [24:29] DevTools. [24:30] 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 [24:39] Chrome extensions. So if you're a Chrome extension developer, you can now inspect [24:43] We can do the install, you can inspect the service worker, the side panels, the pop-ups, [24:48] It's a whole new level of automation. [24:50] for Chrome extensions as well, all powered by DevTools for Agents. [24:54] I'm very excited about this. [24:55] 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, Chrome DevTools for Agents. The goal is to just give your tools the ability to really deeply understand the ability to really understand [25:10] what's on the page. [25:11] any issues and fix them. It's a really nice tool assisted loop for building [25:16] sites. [25:17] And obviously...

[25:19] I can't stop here. Loads more to go still. As the tools improved just broadly, we were able to build higher quality sites. [25:26] I think it is important to look at what is the... [25:30] 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. [25:39] And also what is going to come to hopefully Chrome soon. [25:42] But one of the things you'll hear me say quite a lot and the team talk about is baseline. This is a really important component for us because [25:49] baseline. [25:50] is the [25:52] cross-browser [25:54] Like, how-- like, all the features that every single browser supports. So it's what you as developers can really, really rely on. [26:01] Since last year when I was on the stage, [26:03] 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, off screen canvas, MathML. There's like, oh, 50 more after this as well. [26:20] But I think the bit here is that the exciting thing is not just the features. It's the fact that every single browser vendor [26:26] It's trying to push. [26:27] on the platform at the same time. [26:29] to make it easier for every single developer to build for. [26:33] And again, since I was here last year, 44 features as of April the 22nd, [26:38] have become newly available. [26:40] Things that you can start to plan to use in the near future. They are available across all browsers, but they might not meet your usage requirements in terms of [26:48] your browser support matrix. Now, I don't have enough time to go through all 44.

[26:52] But I do want to kind of give you a highlight of how some of these things that have come to the platform is going to change how the web feels. And actually, before I go to the next slide. [27:00] I did a little check this morning. We're at 52 features as of this morning are now baseline, newly available. [27:07] 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. [27:19] without the need for complex JavaScript like libraries and animation libraries. [27:24] And it's going to help basically improve the perceived performance of the web. [27:28] And to complement view transitions, [27:30] The Navigation API is now newly available. And the Navigation API, the goal here is to replace the Aging History API. [27:38] inside the browser. [27:39] And it lets you kind of [27:41] manage your application state, all your navigations, through one event, essentially. So you can understand whether someone is pressing backwards and forwards, and 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. [27:56] And then the final piece is... [27:58] You know, you hear us talk about Core Web Vitals a lot. [28:01] Largest content for Paint and Interaction to Next Paint are also newly available. And what this means is that you can just understand how your users [28:10] are using your site. [28:11] in terms of performance and responsiveness. [28:14] irrespective of a browser. [28:15] So if your user is using iOS, [28:18] you'll have these metrics available to you now. And I think this is one of those ones where [28:22] We're very excited to see what's happening with Core Web Vitals just for the last couple of years because it really does--

[28:27] help you improve the performance of your site. [28:30] And now you can understand it irrespective of whatever browser someone's using. [28:34] Now, [28:36] I mentioned that there's 44 new features or 52 technically. [28:39] baseline newly available features. It's a lot to keep up with, right? And so with [28:44] webstatus.dev, you can use this new thing called baseline alerts. [28:49] 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. [28:57] You can get notified by email, RSS, or even web hooks as well. And the goal is just to make it easier for you to understand [29:04] how the platform is evolving, so that you can just plan your business and your sites way more effectively into the future. [29:11] Now, one of the things I do, or a couple of things I love about my job is one... [29:14] I get to tinker a lot. I build lots of things at the very kind of cutting edge of web development with Chrome. [29:21] But I also get to talk to developers every single day. [29:24] Now, one of the things, or two of the things that people say is, firstly, [29:29] We just need to ship better. We need to be able to ship more easily, understand what's on the platform, make sure the platform's more predictable. Don't go breaking the web all the time. The goal there is like, that's baseline. [29:39] Modern web guidance, they're the tools that hopefully help you ship sites more effectively. [29:45] 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. [29:55] So... [29:56] I kind of want to show you some of the bits. This is the very tactile part of the web. I don't think you'll hear me say agents one more time.

[30:02] But these are the things that people will experience as they use the web. Now, actually, you will hear me say agents one more time, I'll tell a little bit of a lie. So the bit here is like, we have two areas or two ways I think about this. One, [30:14] how do we put on-device intelligence into people's hands, because the technology is very capable and very good. [30:20] And then the second is, how do we actually just help you [30:23] people's experience of the web. [30:25] So for the first area, obviously LLMs have changed [30:29] what is possible with a computer. [30:32] And obviously they've evolved from things like text completion, and then semantic data extraction. Then people moved on to more summarization. [30:39] And now people are starting to look at function calling for those kind of like agency use cases. [30:44] Now, [30:45] The tools I'm going to talk about are designed to kind of help everyone... [30:48] Think about these new types of experiences that they want to bring to the platform. [30:52] 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, [31:02] And they should be able to run them privately, and then also at no cost in the context of large language models. [31:07] Now, the prompt API, it came to Chrome in 1.48. [31:10] And it came with multimodal support as well, which means that you can also-- [31:14] analyze, for instance, images and understand what's happening. [31:17] And this basically means it makes it easy for you to kind of think about these... [31:21] new kinds of experiences that you want to add. But it is only available in Chrome, right? This is only a Chrome-based experience. [31:27] And so one of the things that we encourage people to do is to think about where you can 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 Timu.

[31:39] who have experimented with this API and also shipped it to production to their users. [31:43] And so I just want to give you a quick overview of Trip.com. It's a very short demo. [31:47] but they integrated the prompt API just to make it easier on the left-hand side to navigate flights. [31:53] If you don't have this prompt API, it doesn't appear. But if you do, it's a nice, simple, progressive enhancement [31:59] And a nice feature for them, and I believe they like using this technology on that side. [32:05] The prompt API also supports structured output. And 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 respond to things inside. [32:18] respond to [32:21] Yeah, 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. [32:31] We've also expanded language support from English only. [32:34] to include French [32:35] German, Japanese and Spanish. [32:37] with more to come in the future. And Kenji's at the back, and I hope Welsh is coming soon. Is Welsh coming? [32:43] Is Welsh come in? [32:45] Maybe. We'll see. We'll talk later. Anyway, it's fine. I'm learning Welsh. [32:49] Looking ahead, we're also kind of expanding what we can do with the prompt API. [32:54] 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 [33:02] function call-in, which is going to enable you to build these autonomous client side agents, inside the web. [33:09] Now, we do want to make sure...

[33:11] 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. [33:19] So you'll get access to the latest capabilities. But the ability to help us influence the shape of these APIs into the future as well. [33:25] 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. [33:38] Now when I think about... [33:40] the web and improving experiences, [33:42] There's been a huge amount of new capabilities that have come to the platform just in the year, last year alone. [33:48] 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. [33:58] And I think we've taken huge strides in kind of new capabilities on the platform this year. [34:02] You know, single-page applications... [34:04] are now able to correctly measure their core web vitals performance between routes with the introduction of soft navs. This is going to come in a slightly later version of Chrome. [34:13] But it does-- our data indicates that if you have a single page app, [34:17] your Core Web Vital pass rates will go up. [34:19] 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. [34:26] And I think it's one of the biggest changes to HTML in a decade. [34:29] So if you go back to my bedroom and look at the clock on my machine, [34:32] You can see it updating every single second. [34:35] Kind of what you'd expect from a clock. [34:37] But the thing is, there's no JavaScript on this page. [34:39] Like, it's updated in every single second.

[34:41] And that's because... [34:43] of the declarative partial updates, that implementation that is coming into Chrome. [34:47] You can now render updates to HTML [34:50] out of the order that they were sent on the wire and that they appear in the DOM. Now, the clock demo isn't all that useful by itself, but I do think it highlights some compelling... [35:00] potential use cases. So for example, if you have a huge amount of application structure, say a massive menu, [35:06] You can render it at the end of your page, let the critical content get rendered first, then you can patch it back into the DOM just a little bit later. It's available in Chrome 148 and also you don't need JavaScript for it, which is great. [35:19] I just want to show you this other demo as well. [35:21] You can think about UI placeholders. Like if you have a very slow task, [35:24] for looking up user data. [35:26] 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 HTTP request. And because the way that this API works, [35:36] It will just update the user interface with the kind of [35:40] Well, the latest data that's come from that, again, [35:42] 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. [35:49] 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 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 going to be even easier for us as just like plain JavaScript developers to do something very similar. [36:09] So the new streaming API for dynamic markup [36:11] gives you a revamped way

[36:13] to improve experiences by letting you inject HTML into documents [36:18] by the stream HTML and stream HTML unsafe methods. Actually, there's a whole family of different API calls in this. But what this really means is you can take the body from a fetch request [36:28] and then just stream it directly into the DOM. You don't need to do these JSON transforms anymore. I think it's very powerful, a very new powerful primitive. [36:37] These APIs have both been available in Chrome since Chrome 148, so pretty recent. [36:42] They're going to change the way I think personally. They're going to change the way that we build web experiences as well. But please do go to this URL, try it out, and give us feedback so we can get it across the platform. [36:53] Now obviously over the last year, [36:55] We've been focusing a lot on making the web just feel better, giving you way more APIs [37:01] 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. [37:09] But it really is more than just API and aesthetics. [37:13] Our goal is to help you build sites that just... [37:16] people like scroll better, transition between views better, enable people to interact with their devices in a more physical way. [37:23] and intuitive way. Now I don't have a huge amount of time to go through most of this, but Yuna and Brahmas have identified [37:29] five core UX principles. [37:31] that are going to change the way I think of how we think about building for the web. [37:35] 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. [37:42] And that is HTML in Canvas. I'm going to spend a little minute or two talking about

[37:46] So you saw from the demo at the start where this 3D experience, and we can integrate like a fake web browser into a computer. [37:52] That's HTML in Canvas. [37:53] And what it lets you do is just render standard DOM [37:57] directly into a Canvas element. And this can be used in a number of different ways. [38:00] You can imagine 2D application frameworks, maybe something like QT, or even 3D engines starting to integrate this. [38:08] so that they can just take the functional benefits of the web's rich semantic UI layer and have real DOM content that's searchable, translatable, accessible, [38:18] Sorry, there was another Ible-- Interactable as well, right inside the Canvras. But I just want to give you a little preview of some of the things that you might be able to do with this API. [38:28] on one level you could take an individual element, this is an input type equals range [38:33] and basically make it look very different to what we expect. This is semantically correct. There's the input element up just there, and we're providing a new, richer... [38:43] UI layer. Now I don't imagine every single website looking like this. I think that it would be actually pretty over the top. [38:49] But if you have like a consistent design language that you can't implement right now on a page, you can start to think about, well, maybe I can use something like HTML in Canvas to enhance it. And if the API is not there, that's great. It'll just look like your existing website right now. [39:02] You can go all the way to those 3D-like experiences by integrating it into something like 3.js. So you can have 3D card dashboard, interactive books. We have a whole demo station out there which you can look at. [39:13] which shows you what to do. [39:14] Again. [39:15] All accessible, interactable, takes advantage of all the browser's features, things like translate and search as well.

[39:23] 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. [39:33] Now, it is designed to be as simple as possible to integrate. And if you have Play Canvas... [39:38] or 3.js, you can use it today. [39:41] And it is just as simple as adding a new material or texture into three. [39:45] And then the library and the browser just handle all of that extra complexity for you. [39:49] I just think this is a game changing API. I think it's going to change the way that we experience the web. [39:55] And if you look at the rest of the ecosystem, this is something that WestBoss has done. [39:59] It's… [40:00] Hundreds of experiments are happening right now. If you're on X and you search for HTML in Canvas, you'll just see people tearing up webpages, exploding webpages. Again, these are all very fun demos. [40:11] but it just highlights how expressive this API can be. [40:14] And there's hundreds more things that are happening in the ecosystem right now. [40:19] I mean, we could... [40:21] I suppose we could watch. You can go to experience it outside. I think it's going to be great. I think the bit here, though, is if you want to try and see... [40:28] 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, [40:40] Send us a link. We'll try and get it on there as well. [40:43] It's a really kind of beautiful expressive API. [40:48] Okay? [40:49] So that was a lot. How many times did I say agent? [40:52] 62. Wow. Okay. Brilliant.

[40:55] You can probably tell I'm quite excited for the future of the web platform. I think the platform is going to evolve for the people who use it. You're going to see APIs like HTML and 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 WebMCP and getting into the experiences, like the agents and the tools that you're [41:24] I think it's going to make the web a first class experience across all these different types of platforms. And I think that the real important thing for me and why I'm in developer relations [41:33] is that we just want to help you do this as well. We know it's hard to navigate 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. [41:48] So that's it. [41:49] Thank you for coming along. You've been a great audience.