- AI is fundamentally changing web development, from coding and debugging with new agent capabilities to integrating powerful on-device AI tools directly into browsers.
- Developers can leverage AI coding agents more effectively by defining custom "skills" and automating complex workflows using configuration files like
agents.md. - New, experimental browser-native AI APIs enable local, multimodal AI features like summarization, proofreading, and advanced prompting, reducing reliance on external cloud services.
AI Didn’t Kill the Web, It Moved in! — Olivier Leplus (AWS) & Yohan Lasorsa (Microsoft)
- Customize AI Coding Agents with Skills: Extend agent functionality for specific domain expertise, new capabilities, and repeatable workflows by using lightweight, text-based "skills" plugins.
- Automate Development Workflows: Define multi-step processes for AI agents in an
agents.mdfile, such as recording feature videos, setting up local tunnels, and sending test URLs to a mobile device. - Debug with AI Agents via MCP: Integrate the Chrome DevTools Multi-Control Protocol (MCP) server with your agents to enable them to control browser actions for debugging, performance analysis, and automated testing.
- Leverage In-Browser AI DevTools: Enable "AI innovation" features in browser DevTools to get instant AI-powered explanations and suggested fixes for console errors (like CORS), network request failures, and performance bottlenecks (e.g., LCP optimization).
- Apply Live AI-Generated Changes to Source: Use DevTools AI to generate CSS/DOM modifications directly in the browser and apply these changes back to your source code files by adding the source folder to DevTools.
- Utilize On-Device AI APIs: Explore new, experimental Web AI APIs (e.g.,
navigator.ai) for client-side summarization, proofreading, and multimodal prompt interactions without external Claude calls. These models download once per device (~4GB). - Implement Local AI Features: Programmatically use
summarizer.create()orproofreader.create()to process text (e.g., review summaries, spelling corrections) andlanguageModel.create()for general multimodal prompts (text + image) with defined output schemas. - Prepare Web Apps for AI Agents: Beyond human usability and SEO, consider how AI agents consume and interact with your web application, potentially requiring new optimization strategies akin to
robots.txt.
AI agent — An autonomous program designed to perform tasks, often interacting with software or the web.
Skills (for AI agents) — Lightweight, text-based plugins that extend an AI coding agent's capabilities with specific domain expertise or new functions.
agents.md — A standard configuration file used by coding agents to define workflows and desired behaviors for web development tasks.
Chrome DevTools MCP (Multi-Control Protocol) — A server that hosts browser automation tools, allowing AI agents to control Chrome DevTools functionalities programmatically.
CORS (Cross-Origin Resource Sharing) — A security feature implemented in web browsers that restricts web pages from making requests to a different domain than the one that served the web page.
LCP (Largest Contentful Paint) — A key web performance metric that reports the render time of the largest image or text block visible within the viewport.
Web AI API (or on-device AI API) — Experimental browser-native APIs that allow web applications to run AI models directly on the client device, enabling features like summarization or proofreading without cloud services.
Multimodal (AI) — An AI system capable of processing and understanding multiple types of data, such as text, images, and audio.
Local tunnel — A service that exposes a local development server to the public internet, useful for testing on other devices or sharing.
Hey folks, welcome to this session where we'll discuss a bit about the web and what the recent AI innovation changed for us as web developers. So let's take just some time for a quick presentation. So my name is Yuan. I work as a developer advocate at Microsoft. I'm also a GDU for Angular and I'm today with Olivier. Yeah, I'm Olivier. I'm a developer advocate at AWS and I'm also a GDB at this time on web. So no surprise here. I will talk about AI and more specifically in the last six months, the rising quality of the models, I've kind of changed the game for web developers. And it's not just the models, it's also the integrations all around it. So AI is now there at every stage of the life cycle of our web apps for development, of course, but also for debugging improving the performance, natively also integrated in the browsers and even coming full cycle as agents are increasingly seen using our web apps along humans that also needs that we have to adapt our web applications for it. So the plan for today is to cover some of the latest progress in all these different stages, coding, of course, but also debugging and tuning our applications using the new local API APIs. That I've started to appear in our browsers. And finally Olivier will show us how to upgrade your web apps for the new agentic web app era. What a teaser. So it's 2026. It's no longer the question of can I code my web app with AI but rather how to get the best results out of AI coding agents. I still hear some folks arguing from time to time that they can't get good results with AI or it's never exactly as they wanted when they're asking their coding agents. The truth is that today it's mainly a matter of skills, but don't get me wrong. It's the one that you install and use with your favorite code agent. So if you've never used them skills are lightweight plugins, describe in text format based on an open specification that's supported but by most coding agents nowadays. Basically it's useful for adding domain expertise for something very specifically to your use case to what you're developing. New capabilities that are not building into your agents will see a bit more about that, especially if you need to customize it. And also something very important in this agent code agents era. It's to do some repeatable workflows. So we'll see just a quick demo now of what it matters to you. So moving up to my VS code. So let's just start something very simple. And actually before just moving the code, let's just show you an example application that we've built that we'll use for most of our demo today. So it's a name of a French river just to have like some e-commerce website as an example. Here we have like a product page with descriptions, some reviews, possibility to add your reviews, just like having some example for all our demos. And in this product, I would like to add something new. So let's just try a very simple prompt what I'm asking is just to look at open issues in the repo and I'm asking my coding agents to implement the first one. So it will take quite some time. So meanwhile, I will have to show you what will happen behind you. Just as you can see, I not specifically asked what to use. I can see it's already trying to run the GitHub CLI. Let's move on to show you GitHub. So basically, this is the repo for this application. I've created one issue that is to add a contact page. So I'm just describing what I want to see in this contact page for my website. And basically when I ask to implement the first open issue, it's as use the GitHub CLI to pull that information and know it's trying to implement that. So I mentioned skills. So if I look into my repo inside the dot agent slash skills folder, I can see that I have a few ones. And you've seen already that it has used the GitHub CLI to access the issue. So this is the skill that teempliments that something I already don't know that's already available. If you look into the skill.md file, you can see that each skill has a name. Basically, matching what you have for the folder name. It has a description that's at the important parts where basically skills are not always loaded into your coding agents. It's basically pooled depending of what's needed to implement the current test. So the description is there to explain your code agents when it's useful and when your code agents needs to get the information from this skill into its context. And then you have basically the information for this skill explaining what the GitHub CLI does with a lot of examples command and telling you agent how to use that one. So you can see that I have a few skills in my repo. I have for example one that allows to do better front end design, something important for us as web developers. I have one that allows to use the playwright CLI. For example, you can see that you can see later that it will record a video of the feature. Hope fully. I've built also a few custom skills using the skill creator skills. So yes, you have a skill that can help you customize and build your own and I've built two actually one that's called public tunnel that can help send to me what I wanted is basically when a feature is implemented by the coding agent. I want to be able to test it on my smartphone and to be able to do that I need like a local tunnel between my dev machine and the smartphone and to make things easier. I want to be able to receive the URL directly on my smartphone. So I've built this telegram send skill and I've asked the agents to send me a message with the URL so I can test the application directly on my smartphone. So this is my workflow and it all works through skills and basically what I explain is just described here in my agents that MD file which is the standard file now that is used by almost all coding agents. And I just put in there that every time the agent make a new change to the website, I wanted to record a short video so it will use the player X CLI to do that. Render dev server and create a local tunnel and send me the URL telegram and basically don't close the git ab issue until I confirm it's done. So it's still running I can see that it has already run the player X CLI moving on to creating the tunnel so I will show you the notification when it will be working back to the slides right now. I'll show you when it's when it's needed. No moving on to Olivier I leave you the hand to show you the next step in the development with agents. Yes, let's see how can use agents to debug our application so right now must people where they do that you can write test to test your application. And all you can do what more like a lot of people do you know you go on the website you go in the dev tools and you try to make it work and everything. And Chrome the Chrome dev tools are amazing there's like so many things you can do you can control issues animation the computer layout you get the performance you have access to all these tools here. Well, we are amazing if an mcp existed for that like an agent can call it that's exactly what the chrome mcp does if you go on the on the gtub chrome dev tool mcp here you have the information how to in story. Basically an mcp server is a server that host tools that can be called by your agent and it's very easy to set up on any IDE any CLI whatever you use for your agents. And so this is what you have to put to install the chrome dev tools mcp so that's what I've done here if I go to my mcp.gson I have my chrome dev tool mcp. And you can see that in my ID here I have it and it has access to all these tools so everything I can do in the chrome dev tools our end of browser I can do it here like click feel form get console message the network requests the light house audit navigate page takes screenshots everything resize page and everything so I can do everything from here so let's say for example I have my agent here if I open my agent window and I ask okay you know what can you run the application and see how the main page works in chrome browser so if I do that let me open my if I do that okay it's going to see the edge of the md and everything but then it's going to say okay to run the application I need to start it so it's going to have a look at my package of gson that's just like basic agent doing their job is opening a terminal is run the application and now to test it is going to need to open a chrome and that's what is going to call the mcp tool here so it's going to say okay I can navigate to a page I can list a page I know it's opening chrome I haven't touched anything you can see like it's chrome being controlled by automatic test software so now it's open the chrome and it's going to test it so I can either run or test now I see if you can take some screenshots so here my promo is very very basic I just ask you to test the main page and so he's going there is a new screenshot and listing it then you can do everything you want you can say okay you know what I want to do something else I want to let's let's kill it I don't need you anymore here I can say you know what let's open a new window say you know what run the application in 3g 2g and fast internet network and see how the applicant performance is and where it slows down so now the goal is to control the chrome dev tools and including the network point and the performance one so let's see again these probably is very basic so you can be way more specific whether let's give it a minute to see what is going to go through sometimes also I didn't ask it was sometimes you're so like general like screenshots or like GCN files here of reports okay okay it's launching the application okay it's navigating on it and you can see that okay test one it's going to use that to know the true the performance start trace to test it on okay fast internet north road the link first that's good he kept through the baseline it's going to perform analysis you can see that every time you call the tool you can see the tools call with the the details so now it says on fast 3g remember I like 3 tests 3 different connection speed and let's see give it another minute it emulates perform start trace okay has it perform analysis and then it's going to do the last one hopefully okay can I see if he's going to join the test like a reported the end sometimes it does something doesn't it depends I haven't asked for one so let's see what you came up with okay and I see have my window here you don't it doesn't open the chrome dev tool but he's using the tool in the background in some performance analysis okay SP image and stand size okay okay let's give it like just seconds to see what he's doing is checking the images so he must have notice that there's something we can optimize with the with the image I guess it's checking the size of it it's analyzing the code okay usually doesn't go that far as analyzing code so let's I'm going to give it like 15 seconds if it continues okay now it's done okay you can see that it allows everything and it can give you all like this reporting okay for every internet connection speed I have the LCP the CLS the critical pass latency and the random blocking saving and then it gives you some like guidelines so the headphone image is too big so it's not those 3G is not good as giving you ways are improving it so you can put a price priority high you have the silence CSS some issues in the JavaScript you can put some like pre load for some gson so you have all these that you can play with them to improve your your application you and does it do you have any any news on your your notification and demo let's have a look yeah I didn't receive anything you can check sometimes the agent gets stuck I failed because it couldn't find oh the token yes I have a dot on file I'm not sure why sometimes it failed to to find it I have a dot on file use it and retry yeah sometimes agents that are working especially during demos you know that the end file is for your the messaging application like yeah so it knows which channel to use to send me the telegram message so yeah okay well it's gonna let's continue and we come back to that later okay oh and that goes just telling it's so let me try to show it to you so yeah I received the notification yeah I received the notification on my smartphone so I will open it just so you can have a look so yeah you can see trying to focus in there yeah can see here a preview of the video showing the feature it recorded I will open the link so we can see the look of the contact page it did and yeah this looks like a great contact page so yeah I can also show it to you since I have I have it running in there you can see now we have this contact a page so yeah basically done the thing and I can just test it and have a look at the video so this was a very simple feature but you can see the wide can be useful for more complex features and basically allow you to review everything directly from your smartphone and even without having to run anything in the case of looking at the video just to be able to test it if you want to send it I've sent it to myself using a telegram but you can for example you select to send it to your co-workers or anything else that you can imagine it's your workflows so yeah it's pretty awesome actually moving on to the next nice thing we've seen that with Olivier your dev your dev tools can be controlled directly by agents through MCP but do you know also that you can use AI directly into your browser dev tools you can get all sorts of insight directly from there from your browser to help you diagnose and fix issues and yeah instead of just describing any all the kind of things that you can do let me just show you actually so moving back to the website we'll move on to the about page for example let's open the dev tools so we can see that we have an error so first thing if you want to have like all the new useful AI stuff you have to go to the dev tools settings and make sure that's under the AI innovation tab you have enabled anything so it's not enabled by defaults we have to do that yourself if you want to get this AI assistance and once you have done that for example here you can see that I have like a common error in the console saying that yeah I have some requests have been blocked by course policy and you can see this this little icon in there I can directly click on it to get an explanation using AI about this error and even a suggested fix why this error happens and what to do to fix that so directly in your console you don't have to like copy paste errors using that and your calling gen sort chat gpt depending on whatever you're using it's directly in there inside your dev tools and yeah you can see it's pretty extensive and giving you all sorts of hints to try to fix the issue so let's try to to see where else it can be useful for example in the network tab let's reload the page you can see one of the failing requests it has like 400 errors again we have this debug with AI icons so I will click on it and just can see that my failing request has been added to this chat interface thing and I can for example ask why is the request failing so I have a sort of built in chat with AI that can directly access the context of my running application from directly from the dev tools so again it's analyzing why this request is failing and saying giving me some hints about what I may try to do to try to fix that okay telling me it's bad request most likely because that's an old endpoint that's no longer there so yeah I think that's kind of cool that you can do directly that's from your dev tools inside your browser can do all sorts of other fun stuff like for example let me move on for example to GitHub this will be more meaningful with that one I move on to the performance tab so this time I will click on the refresh in there so it will gather some insights about the web page like how long does it takes to run the different things and some metrics about it so I have this trace so it's a bit similar to kind of the test that Olivier did earlier with the MCP Dev tool server for example I can open the LCP breakdown and again you can see that I have this ask AI buttons so I can ask it using my trace that I just recorded on the GitHub website to help me optimize my LCP score so running it it will analyze all the trace from the website and telling me okay the LCP dollar just a content full pain for this page is okay this time and basically what's causing most of the delay because it's some stuff and oh I can't see investigate around the blocking issue sometimes it's more verbal sometimes nuts again this is AI so yeah you can tell me a few hints about what I need to optimize all the time it was telling me it was mostly because of CSS and yeah you can get some hints if you're not sure about what to start with for example to optimize the performance on your website but it can do more than that let's go back to our send website this time I will for example select this about send elements I mean the CSS you can see yeah this is this H1 so here I'm navigating the DOM and you can see again I have this AI debug with AI buttons so selecting it you can see that is it has added this specific H1 elements in the context and I can ask thing for example let's say that I want to change this boring title and make it a nice gradient so I will just tell it to make the same text CSS have a nice gradient and I want it to be in line we do existing color theme because I'm already using some CSS variables so yeah so let's continue I agree that the page can be modified and yeah you can see that I have very nice gradients in line with all the other colors that I have in my website and you can see even more something interesting because from there I just modified the CSS live in the web page but what could be more useful is to directly modify the source code because here I'm just making non-permanent changes so you can see that I have this unsafe change tab in there with the CSS that was added to my web page I can try to apply that chant directly to my code using apply to workspace what it will ask you basically is to add your source folder to the DevTools and it will allow the DevTools to directly do this CSS modification back to your source code file so it will it's no not only able to do like live modification on your dumb CSS and JavaScript but also able to apply back that changes back to your original source code so I think this is very interesting especially as a web developer I tend to fight with CSS most of the time right Olivier? Yeah and after I was on like you do a lot of changes on the on the Chrome DevTools and then you don't remember which line you have to copy paste on your CSS file and then you're like I can't find it again because then we refresh this anyway you've all been through that so yeah I found that very interesting also it's reduced like the back and forth that you can have sometimes between like your browser when debugging you're tweaking the CSS and you're coding agents because basically you have everything at one place. So now we've seen how to code, how to debug with AI let's see how we can just include AI in our application so you may have used some AI APIs either from an AI provider, from a cloud provider but that requires to make some calls on the internet usually to pay for it, to use some tokens and everything. The good thing is that there's a new API called like with AI API that would come directly in the browser so now it's like still in like draft I think I'm not very busy but you can see that we have a lot of different API we have some summarized API with some like right rewrite we have the prompt API and basically let's see how we can use that in our browser so the goal is to have like a model directly running on our machine in our browser. So here I have an application that you've seen it from your end I have some reviews I can actually add some reviews and you may have seen that in some website now that they give you like a summarized of all the reviews so let's see how we can implement that so I'm going to go to hear my code and I have some I have like three different things that we're going to do so the person is summarized so I want to when I click on this button he gives me a summarized of all the reviews here so right now he's doing nothing he said for like calling this function so let's start by checking because not all browser like have that API yet so let's see if my browser has it and then I'm going to create a summarizer like summarizer.create that I'm going to give some options so the option I mean the type the type here is key point is the default one if you go under the documentation here you can see that you have the different types you can have to you have TLDR, TZR, key points, headline and for each of them you can do like a different length and you can see the size of sentence or words so you can decide which one you want to use and giving the expect input language of my reviews and the expect output language you can see that this is an array so you can have different several output input actually okay I'm going to give the context I'm saying okay these are reviews for an article you give as a strong stringify gson give me a summary of what people think then I'm going to I'm going to give you a monitor so this this function monitor is here to monitor the download of the model so how this API works is that it's going to download the model on your computer it's going to download only once which is good because it takes four gigabytes right now but when it's done for every website it's if your computer needs storage like your your like storage is running low Chrome is going to delete it but by default it's going to keep it so I have this monitor and then what I'm going to do is call it so I'm going to like summarize or done summarize and giving it the data and then let's return summarize or I just return the risk of I'm going to do here actually all right so now let's see what we have here going back here I'm going to click on summarize and what is happening is that okay so it's something but the model so it's going by function again and it should give me in a second so you can see that my the the model was already downloaded for me so it goes from like 0% to 100% directly because I don't have to delete again and you can see here I have a summarize of all my reviews of customer usually praise the headphone for their some quality and battery life blah blah blah blah few things therefore to work you have to activate some of the flags on Chrome so just search for AI usually and you're going to find it so just like uh Jamie Jamie nine have the prompt API the proofreader API you have the writer API the rewriter anything so just enable them so you can use them in your in your application uh here you also have these on device intervals on Chrome so you can see a few things you can load a model or load like like the the sound model and then you can just talk to it you can add images or do play with the top-k temperature you can see all the even logs so these are the even logs of what I just did with the summarize you can see the model statues of Omini tokens have been used for each of the of the calls of the API so yeah this is like a good way to debug now let's see another API I'm gonna see the proofreader so same checking if I have access to the API I'm creating a proofreader so the monitor is the same I'm just monitoring if it downloads the the the model then I'm gonna say okay I'm going to give you a list of expected context language okay here I'm gonna say okay this is going to be English because I want you to correct it and then I have this uh I'm coding the proofreader and returning the proofreader so this is useful to to fix like spending issues let's say I have my right review here and I'm just like this is is a very good article I'm gonna say like lower okay so for example I'm running this and if I leave the focus you can see here I'm coding the I'm coding the API that's going to this takes your analysis you can see that it correctly like this is a very good article so all the mistakes I did you can see that it's changed them and actually if I you know let's we have time yeah let me print it if I print the uh it's console okay yeah it was bad this is good products again going out I'm actually thinking about and you can see that it corrected again and you can see that it also gives me so the correct corrected output and all the correction with the and starting next and in next and waiting so you can even have like some like correction things if you want on your input so these are two examples I'm gonna let you and do the actually the cool one the cooler the cool demo yes let's add so what Olivier showed you is basically the very focused API for summarization for proofreading but we also have access to like more general API like the one you may have been used for example if you're using the the open AI API or whatever AI provider you're using to just basically send it your prompt so we have this language model that creates API you can set what kind of expected impute you have because you can set it text and in our case I want to be able to send it images you can also have audio as a type so it's multimodal now that I have here you basically build your general prompt so what I want to do is basically have a auto writing of review based on just an image that I upload so what I say is okay this is an image of the product and I want to generate a description for review to mention the connection in one sentence and basically tell how you felt when receiving the product and generator so title and I want the result to be a design object with the title and review contents so okay this is my prompt just like when you're trying to use a regular AI API and next step is basically to run the prompt API so session that prompt here to get the response so the look of the impute is basically set a list of messages here I'm using the user message to send our prompt in there and the impute image so the content you can see you can mix and match a different kind of content I want to have a JSON as an output so I need to add some constraint to the to the response so I want just to say my response needs to follow a specified specific schema so let's define the schema in there and the schema is just a JSON plain JSON schema I think that I want an object that has a title that's a string and the description that's also string and now I should have everything except to return the result and also print that in the locks so let's test what we just did moving on to the browser let's give it a bit more space so I want to try this prompt API to basically write the review in my place so I will upload this image so this is the at-front I received as you can see that's in pretty good shape so let's see what review it will come up with so if I select analyze oh just want to show the console in there oh that may be new I think it's I didn't specify the language so yeah as you can see Olivier as always specified in which language the request was sent so this is the result you can see the JSON and you can see that it has filled in the field for me so devastatingly the image broke and had set you upon the arrival and of course I was disappointed and frustrated when receiving this kind of of product so yeah I can just submit the review in there basically and I can see selling me some time just uploading the image and have the AI write everything for me and again just recalling what Olivier already said but this is all using a local model running on the client machine untouched really in the browser so nothing and no using any web APIs it's all within the browser so I think that's pretty cool and this is just a single example use case of the kind of things that you can do because this local model as you can see it's multimodal you can understand images you can understand audio and text and you can do all kind of stuff without having to pay like for an external API yeah this this this API I'm seeing you I mean if you can move to my to my screen I just I just went to open the the summarize API on on the MDN documentation and you can see that it's still like highly experimental and you can see that we actually I just feel like operational is already preventing it you have Chrome edge is coming so the API is still changed and what we just saw on on your screen is actually new we didn't have this like language exception a week ago when we we tried it so just be careful like these APIs can change so if you come in on your website you know now so yeah very experimental but I think it's very exciting for the kind of possibilities that it opens for web developers I mean the fact that you can take an image and come up with an explanation was on the image I mean we've seen like some picture-inary demo where you can like you have an image and people can should run there on the screen and then you can't press the image and give you like a presentation does it look like the same thing so it's actually pretty cool without relying on any Claude any online model any like talk and you have to send or whatever pretty cool okay yes we have next back to the slides last but not least section because this means okay hey hey agents do a lot of walks for us no day but we also have to do some walk for them this is the time that yeah you actually need some you my humans to like upgrade your websites for agents so yeah agents are capable of browsing the webs the new thing is that you have to optimize the website not only for humans usability and good SEO for being in discoverable in search engine but no we are so to think about the way agents can consume and use web your web apps so that's brand new thing and first we start with just a very simple proposal just like we already have like robots.txt that has been adopted for search engine that are already crawling the web just to give some rules about how the these scrollers navigate to your websites we also have like sit maps for humans to improve a whole they can navigate a website in more accessible way we have this new lm.txt proposal that's basically a bit of a mix of both so it's used by agents to act as a map to discover where you can find the information it needs on your website just kind of mix of robots.txt and for the format the text file format and the sit map and let me show you actually like an example one I already told you an angular gd so I will show you the lm.txt for the angular.dev website so this is what you get you get marked on file with a bunch of links so basically if an AI want to search for the documentation it doesn't have like to go through each web page to try to find the information it needs for example if I want to have something about animation it will basically directly guide the AI agents to move on to look at one of these documentation pages depending on what you're trying to do this is the basic lm.txt promo set so making it easier for your agents to try to find the content that they need but it can go a bit further because we have like this lm-full.txt variants where basically it brings in all the contents of your website into a single file so we have also one for angular this one is pretty extensive as you can see the scroll bar in there and if you're scrolling a bit inside there you can see that I even have like some code file example it's all the contents of the latest angular ration gather in one single text file that you can fill your agents for example one of the difficult thing with sometimes with using coding agents that their last checkpoint was based using like older version of the frameworks because yeah you can't always train the new model with the new contents sometimes it have month or years of delay regarding the contents so it doesn't know how to use that the brand new latest version of your framework let's say for example for angular so if you want to make sure that for example I want to code an application using the very latest feature of angular on the very last version I want to make sure that it use the most up-to-date reference I can fill it this lm-full.txt file to my calling agent so it has all the up-to-date information to make sure that I don't use like all feature from the training data like old angular gs example from 10 years ago and stuff like that so this is kind of cool and helpful for example to make sure that agents can have the latest information about this is like for a coding library but it can be translated to any kind of content that your website provides. Now last but not least web mcp moving on to the slides and I will give the hand to Olivier for this one the very last and fun demo that we have. Yeah we weren't from like experimental APIs to like very very highly experimental so web mcp can you share with print please yeah the web mcp I mean if you want to see how experimental it is go on the website of web mcp this is this is the website right now so not not much but the idea is that okay we have agents can browse the web as you unmentioned they go and they take the lms the things they file but more and more we're seeing like AI embedded on your browser that you you have like a we're called an agent browser so basically it's going to browse the web for you on your behalf and right now we have some tools that can do that they're going to open a browser they're going to click and browse but the way they do that is that they're trying to mimic human interactions that they're going to look either at the page by taking screenshots or by looking into the dump and say being like okay there's a button here that says that I can click on it taking the coordinates going and click on it same for a form but basically they are trying to mimic human behavior so the website I've been designed for humans not agents and so this is exactly what this proposal is trying to fix the web mcp the goal is to have like an mcp server let's say running on your web applications you have access to tools and we know that tools that agent understand agents can call tools because they have access to the name the definitions and then they want to call them so let me show you for example I have the application here again I have a add to cart here buttons so you can see that I have something like cart now and but if a new eye would have to do the same it would have to open the chrome try to guess that there's a button here get the coordinates and click on the button but what if it could have actually access to a tool I can AI tool to call it so here I have chrome chrome is not yet an agentic IDE but I have an extension here that can show if I have any tools is on my page so let's see how I can register a tool my page I have a cart tool here file that just basically import the add cart is the function is called when I click on add cart here they just add something to my cart and so I'm going to create a tool so if you if you remember if you're creating a tool before you had all these ac case this is how we used to do we use a like a jizm you would give it a name you would give it a description so here it's a tool to add items to cart and give it a schema so it's taking an object with the item it's item name and the quantity so I don't have it that I've based whatever so just the name and the quantity with it and then I have the the execute so the execution is a function that's going to have that the the business code in it so I'm going to get the the argument so I'm retrieving the item and the quantity I'm going to loop over the quantity because my add to cart only takes one it doesn't manage quantity so I'm moving and adding to cart what I have and I'm just returning like whatever just saying the quantity item has been added and the other thing I'm going to do is to register my my my tool so I go in my tool and I register it on my the navigator object of my my page now if I go back here and I refresh and see that my my data extension here see that I have an item cart tool and I can call it so I can say okay I want to add I don't know water bottles and I want to have five I'm going to execute the tool here basically you can see that either I did like five water bottle and it's basically like an AI who did it on my behalf it's coding the tool that you register on my page and let me see I had a we have a bit of time I'm I'm I'm testing it I think if I can correct directly from my my IDE yeah I know a lot of these let me see yeah so basically I could even do it like from here so yeah my agent I can say like you know add I can't go into remove the depth tool so don't have two methods add three I don't know three whole laptops through my cart so I'm going to do that and normally if everything works well it's going to call the the tool that is registered on my on my web page in my chrome so let's see so instead of this and I add two cart oh what is it doing it's a good tool that makes for content okay so it's coding yeah it's calling the tool add to cart laptop quantity three you can see here if I go back to my web page now okay let's see down three laptops I just have like three laptops here so now I called it either from like an extension or from my my IDE but the goal would be that your your your browser can do it for you because it's an agent type browser can let me get tabs and read for you so you can see that my tool is running on my web page so and it's not much code but there is even like a better like I don't know if it's a better way but let's say you don't want to add some new JavaScript your application because you're transitioning and you want to just test these these mcp tools on your application without changing much the code so let's say I have the form here the form is to write a review what I can do you can can say okay I'm gonna add a tool name right review tool I'm going to give it a tool description here I'm gonna say like add review to the product and by doing that I've transformed my form into a tool it's going to take all the different input in it and then transform them into arguments I can even like do some like tool prime description it's a like rate the product so I can add some descriptions to it for example I have the whatever do I have as like the input here it's like okay tool prime description it called like add a title oops add a title for the review and I can add this but I don't have to if I go back here you can see that now I have my right to review and this is the schema of that it has generated it's basically the same thing that we add here when I manually edit the schema but you can see that I have my uh where is it my tool so I have that the write the product and it took all the input options here from one to five I have the review title with my description I put the added title to review but also have the review text and the review photo and it automatically generate some description and to do that it took the nearest label on my on my HTML so if I go to the at a photo because you have a lot of label at photo optional and that's what it put here by by default so let's see if that can work I'm going to call the write review tool I don't have a photo I guess they like it's a good for um let's see if I can inspect so I can see it here I guess they like title awesome review I guess they like review text perfect product and I'm going to execute the tool so tiktik tiktik is it doing something now it's not supposed to I didn't hear anyway um oh yeah no no it's supposed to take take take aha it's happening that's that my file let's find it saved okay let's let's try again for so like awesome product love it and to execute it oh yeah and you can see that it filled the form for me yeah the awesome product here and I love it I don't have a picture but you could have it but you can also say okay this is good because it's filled the form but I want to also into validate the form so if I go back to my form here I'm going to say um tool to auto submit and by doing that it's going to both uh fill the form let's say three perfect also all of it okay don't pay attention to the mistakes and then if I click execute tool here it's going to fill the form but also validate the form is so it doesn't even like require any human interaction it's going to fill and validate so this is highly experimental again and actually the API changed like 10 days ago again so be careful but just know that it's like we used to say that that it's like you know responsive design at some point you had to add your website for mobile if you didn't do it then the competition did it and then people wouldn't go to your website on the mobile and so the thing that this is the same make sure your website is going to be prepared once we have all the agent agentique uh browser coming under the market and so you can start experimenting again I did experimental but start experimenting so you're ready when we have all these browsers coming up and the demo worked nice yeah I expect this is a glimpse of what we'll have to do as web developer in the near future because yeah agents are coming from the web very fast and I expect the this specification is already moving very fast it has been useful yeah if you looked at the state of human back it wasn't already usable just like you you shown and I especially like the feature or to upgrade like existing forms as MCP tools because it makes the life of developers like it's very simple and even agents to implement that for us yeah so in the end what we've seen during the decision is basically with AI it makes the life of web developers like us easier whether it's writing the code implementing better workflow debugging of course very important during the performance but also we have to help the AI tools be able to better use our website and web app so bit early in the process but yeah I can start already thinking about that lm.se.txt is already widespread nowadays MCP the norm is already widespread and web MCP is coming for the next big thing hopefully so yeah you have to prepare for that and hopefully it will just make better web apps in the end and yes thanks for seeing this session and we have a QR code in there with basically all the resources the code for the demo and the links to the different resources that we've used with shown during this session so yeah and just if you have any questions can ping us a LinkedIn and in the meantime have fun have fun see you bye bye
TL;DR
- AI is fundamentally changing web development, from coding and debugging with new agent capabilities to integrating powerful on-device AI tools directly into browsers.
- Developers can leverage AI coding agents more effectively by defining custom "skills" and automating complex workflows using configuration files like
agents.md. - New, experimental browser-native AI APIs enable local, multimodal AI features like summarization, proofreading, and advanced prompting, reducing reliance on external cloud services.
Takeaways
- Customize AI Coding Agents with Skills: Extend agent functionality for specific domain expertise, new capabilities, and repeatable workflows by using lightweight, text-based "skills" plugins.
- Automate Development Workflows: Define multi-step processes for AI agents in an
agents.mdfile, such as recording feature videos, setting up local tunnels, and sending test URLs to a mobile device. - Debug with AI Agents via MCP: Integrate the Chrome DevTools Multi-Control Protocol (MCP) server with your agents to enable them to control browser actions for debugging, performance analysis, and automated testing.
- Leverage In-Browser AI DevTools: Enable "AI innovation" features in browser DevTools to get instant AI-powered explanations and suggested fixes for console errors (like CORS), network request failures, and performance bottlenecks (e.g., LCP optimization).
- Apply Live AI-Generated Changes to Source: Use DevTools AI to generate CSS/DOM modifications directly in the browser and apply these changes back to your source code files by adding the source folder to DevTools.
- Utilize On-Device AI APIs: Explore new, experimental Web AI APIs (e.g.,
navigator.ai) for client-side summarization, proofreading, and multimodal prompt interactions without external Claude calls. These models download once per device (~4GB). - Implement Local AI Features: Programmatically use
summarizer.create()orproofreader.create()to process text (e.g., review summaries, spelling corrections) andlanguageModel.create()for general multimodal prompts (text + image) with defined output schemas. - Prepare Web Apps for AI Agents: Beyond human usability and SEO, consider how AI agents consume and interact with your web application, potentially requiring new optimization strategies akin to
robots.txt.
Vocabulary
AI agent — An autonomous program designed to perform tasks, often interacting with software or the web.
Skills (for AI agents) — Lightweight, text-based plugins that extend an AI coding agent's capabilities with specific domain expertise or new functions.
agents.md — A standard configuration file used by coding agents to define workflows and desired behaviors for web development tasks.
Chrome DevTools MCP (Multi-Control Protocol) — A server that hosts browser automation tools, allowing AI agents to control Chrome DevTools functionalities programmatically.
CORS (Cross-Origin Resource Sharing) — A security feature implemented in web browsers that restricts web pages from making requests to a different domain than the one that served the web page.
LCP (Largest Contentful Paint) — A key web performance metric that reports the render time of the largest image or text block visible within the viewport.
Web AI API (or on-device AI API) — Experimental browser-native APIs that allow web applications to run AI models directly on the client device, enabling features like summarization or proofreading without cloud services.
Multimodal (AI) — An AI system capable of processing and understanding multiple types of data, such as text, images, and audio.
Local tunnel — A service that exposes a local development server to the public internet, useful for testing on other devices or sharing.
Transcript
Hey folks, welcome to this session where we'll discuss a bit about the web and what the recent AI innovation changed for us as web developers. So let's take just some time for a quick presentation. So my name is Yuan. I work as a developer advocate at Microsoft. I'm also a GDU for Angular and I'm today with Olivier. Yeah, I'm Olivier. I'm a developer advocate at AWS and I'm also a GDB at this time on web. So no surprise here. I will talk about AI and more specifically in the last six months, the rising quality of the models, I've kind of changed the game for web developers. And it's not just the models, it's also the integrations all around it. So AI is now there at every stage of the life cycle of our web apps for development, of course, but also for debugging improving the performance, natively also integrated in the browsers and even coming full cycle as agents are increasingly seen using our web apps along humans that also needs that we have to adapt our web applications for it. So the plan for today is to cover some of the latest progress in all these different stages, coding, of course, but also debugging and tuning our applications using the new local API APIs. That I've started to appear in our browsers. And finally Olivier will show us how to upgrade your web apps for the new agentic web app era. What a teaser. So it's 2026. It's no longer the question of can I code my web app with AI but rather how to get the best results out of AI coding agents. I still hear some folks arguing from time to time that they can't get good results with AI or it's never exactly as they wanted when they're asking their coding agents. The truth is that today it's mainly a matter of skills, but don't get me wrong. It's the one that you install and use with your favorite code agent. So if you've never used them skills are lightweight plugins, describe in text format based on an open specification that's supported but by most coding agents nowadays. Basically it's useful for adding domain expertise for something very specifically to your use case to what you're developing. New capabilities that are not building into your agents will see a bit more about that, especially if you need to customize it. And also something very important in this agent code agents era. It's to do some repeatable workflows. So we'll see just a quick demo now of what it matters to you. So moving up to my VS code. So let's just start something very simple. And actually before just moving the code, let's just show you an example application that we've built that we'll use for most of our demo today. So it's a name of a French river just to have like some e-commerce website as an example. Here we have like a product page with descriptions, some reviews, possibility to add your reviews, just like having some example for all our demos. And in this product, I would like to add something new. So let's just try a very simple prompt what I'm asking is just to look at open issues in the repo and I'm asking my coding agents to implement the first one. So it will take quite some time. So meanwhile, I will have to show you what will happen behind you. Just as you can see, I not specifically asked what to use. I can see it's already trying to run the GitHub CLI. Let's move on to show you GitHub. So basically, this is the repo for this application. I've created one issue that is to add a contact page. So I'm just describing what I want to see in this contact page for my website. And basically when I ask to implement the first open issue, it's as use the GitHub CLI to pull that information and know it's trying to implement that. So I mentioned skills. So if I look into my repo inside the dot agent slash skills folder, I can see that I have a few ones. And you've seen already that it has used the GitHub CLI to access the issue. So this is the skill that teempliments that something I already don't know that's already available. If you look into the skill.md file, you can see that each skill has a name. Basically, matching what you have for the folder name. It has a description that's at the important parts where basically skills are not always loaded into your coding agents. It's basically pooled depending of what's needed to implement the current test. So the description is there to explain your code agents when it's useful and when your code agents needs to get the information from this skill into its context. And then you have basically the information for this skill explaining what the GitHub CLI does with a lot of examples command and telling you agent how to use that one. So you can see that I have a few skills in my repo. I have for example one that allows to do better front end design, something important for us as web developers. I have one that allows to use the playwright CLI. For example, you can see that you can see later that it will record a video of the feature. Hope fully. I've built also a few custom skills using the skill creator skills. So yes, you have a skill that can help you customize and build your own and I've built two actually one that's called public tunnel that can help send to me what I wanted is basically when a feature is implemented by the coding agent. I want to be able to test it on my smartphone and to be able to do that I need like a local tunnel between my dev machine and the smartphone and to make things easier. I want to be able to receive the URL directly on my smartphone. So I've built this telegram send skill and I've asked the agents to send me a message with the URL so I can test the application directly on my smartphone. So this is my workflow and it all works through skills and basically what I explain is just described here in my agents that MD file which is the standard file now that is used by almost all coding agents. And I just put in there that every time the agent make a new change to the website, I wanted to record a short video so it will use the player X CLI to do that. Render dev server and create a local tunnel and send me the URL telegram and basically don't close the git ab issue until I confirm it's done. So it's still running I can see that it has already run the player X CLI moving on to creating the tunnel so I will show you the notification when it will be working back to the slides right now. I'll show you when it's when it's needed. No moving on to Olivier I leave you the hand to show you the next step in the development with agents. Yes, let's see how can use agents to debug our application so right now must people where they do that you can write test to test your application. And all you can do what more like a lot of people do you know you go on the website you go in the dev tools and you try to make it work and everything. And Chrome the Chrome dev tools are amazing there's like so many things you can do you can control issues animation the computer layout you get the performance you have access to all these tools here. Well, we are amazing if an mcp existed for that like an agent can call it that's exactly what the chrome mcp does if you go on the on the gtub chrome dev tool mcp here you have the information how to in story. Basically an mcp server is a server that host tools that can be called by your agent and it's very easy to set up on any IDE any CLI whatever you use for your agents. And so this is what you have to put to install the chrome dev tools mcp so that's what I've done here if I go to my mcp.gson I have my chrome dev tool mcp. And you can see that in my ID here I have it and it has access to all these tools so everything I can do in the chrome dev tools our end of browser I can do it here like click feel form get console message the network requests the light house audit navigate page takes screenshots everything resize page and everything so I can do everything from here so let's say for example I have my agent here if I open my agent window and I ask okay you know what can you run the application and see how the main page works in chrome browser so if I do that let me open my if I do that okay it's going to see the edge of the md and everything but then it's going to say okay to run the application I need to start it so it's going to have a look at my package of gson that's just like basic agent doing their job is opening a terminal is run the application and now to test it is going to need to open a chrome and that's what is going to call the mcp tool here so it's going to say okay I can navigate to a page I can list a page I know it's opening chrome I haven't touched anything you can see like it's chrome being controlled by automatic test software so now it's open the chrome and it's going to test it so I can either run or test now I see if you can take some screenshots so here my promo is very very basic I just ask you to test the main page and so he's going there is a new screenshot and listing it then you can do everything you want you can say okay you know what I want to do something else I want to let's let's kill it I don't need you anymore here I can say you know what let's open a new window say you know what run the application in 3g 2g and fast internet network and see how the applicant performance is and where it slows down so now the goal is to control the chrome dev tools and including the network point and the performance one so let's see again these probably is very basic so you can be way more specific whether let's give it a minute to see what is going to go through sometimes also I didn't ask it was sometimes you're so like general like screenshots or like GCN files here of reports okay okay it's launching the application okay it's navigating on it and you can see that okay test one it's going to use that to know the true the performance start trace to test it on okay fast internet north road the link first that's good he kept through the baseline it's going to perform analysis you can see that every time you call the tool you can see the tools call with the the details so now it says on fast 3g remember I like 3 tests 3 different connection speed and let's see give it another minute it emulates perform start trace okay has it perform analysis and then it's going to do the last one hopefully okay can I see if he's going to join the test like a reported the end sometimes it does something doesn't it depends I haven't asked for one so let's see what you came up with okay and I see have my window here you don't it doesn't open the chrome dev tool but he's using the tool in the background in some performance analysis okay SP image and stand size okay okay let's give it like just seconds to see what he's doing is checking the images so he must have notice that there's something we can optimize with the with the image I guess it's checking the size of it it's analyzing the code okay usually doesn't go that far as analyzing code so let's I'm going to give it like 15 seconds if it continues okay now it's done okay you can see that it allows everything and it can give you all like this reporting okay for every internet connection speed I have the LCP the CLS the critical pass latency and the random blocking saving and then it gives you some like guidelines so the headphone image is too big so it's not those 3G is not good as giving you ways are improving it so you can put a price priority high you have the silence CSS some issues in the JavaScript you can put some like pre load for some gson so you have all these that you can play with them to improve your your application you and does it do you have any any news on your your notification and demo let's have a look yeah I didn't receive anything you can check sometimes the agent gets stuck I failed because it couldn't find oh the token yes I have a dot on file I'm not sure why sometimes it failed to to find it I have a dot on file use it and retry yeah sometimes agents that are working especially during demos you know that the end file is for your the messaging application like yeah so it knows which channel to use to send me the telegram message so yeah okay well it's gonna let's continue and we come back to that later okay oh and that goes just telling it's so let me try to show it to you so yeah I received the notification yeah I received the notification on my smartphone so I will open it just so you can have a look so yeah you can see trying to focus in there yeah can see here a preview of the video showing the feature it recorded I will open the link so we can see the look of the contact page it did and yeah this looks like a great contact page so yeah I can also show it to you since I have I have it running in there you can see now we have this contact a page so yeah basically done the thing and I can just test it and have a look at the video so this was a very simple feature but you can see the wide can be useful for more complex features and basically allow you to review everything directly from your smartphone and even without having to run anything in the case of looking at the video just to be able to test it if you want to send it I've sent it to myself using a telegram but you can for example you select to send it to your co-workers or anything else that you can imagine it's your workflows so yeah it's pretty awesome actually moving on to the next nice thing we've seen that with Olivier your dev your dev tools can be controlled directly by agents through MCP but do you know also that you can use AI directly into your browser dev tools you can get all sorts of insight directly from there from your browser to help you diagnose and fix issues and yeah instead of just describing any all the kind of things that you can do let me just show you actually so moving back to the website we'll move on to the about page for example let's open the dev tools so we can see that we have an error so first thing if you want to have like all the new useful AI stuff you have to go to the dev tools settings and make sure that's under the AI innovation tab you have enabled anything so it's not enabled by defaults we have to do that yourself if you want to get this AI assistance and once you have done that for example here you can see that I have like a common error in the console saying that yeah I have some requests have been blocked by course policy and you can see this this little icon in there I can directly click on it to get an explanation using AI about this error and even a suggested fix why this error happens and what to do to fix that so directly in your console you don't have to like copy paste errors using that and your calling gen sort chat gpt depending on whatever you're using it's directly in there inside your dev tools and yeah you can see it's pretty extensive and giving you all sorts of hints to try to fix the issue so let's try to to see where else it can be useful for example in the network tab let's reload the page you can see one of the failing requests it has like 400 errors again we have this debug with AI icons so I will click on it and just can see that my failing request has been added to this chat interface thing and I can for example ask why is the request failing so I have a sort of built in chat with AI that can directly access the context of my running application from directly from the dev tools so again it's analyzing why this request is failing and saying giving me some hints about what I may try to do to try to fix that okay telling me it's bad request most likely because that's an old endpoint that's no longer there so yeah I think that's kind of cool that you can do directly that's from your dev tools inside your browser can do all sorts of other fun stuff like for example let me move on for example to GitHub this will be more meaningful with that one I move on to the performance tab so this time I will click on the refresh in there so it will gather some insights about the web page like how long does it takes to run the different things and some metrics about it so I have this trace so it's a bit similar to kind of the test that Olivier did earlier with the MCP Dev tool server for example I can open the LCP breakdown and again you can see that I have this ask AI buttons so I can ask it using my trace that I just recorded on the GitHub website to help me optimize my LCP score so running it it will analyze all the trace from the website and telling me okay the LCP dollar just a content full pain for this page is okay this time and basically what's causing most of the delay because it's some stuff and oh I can't see investigate around the blocking issue sometimes it's more verbal sometimes nuts again this is AI so yeah you can tell me a few hints about what I need to optimize all the time it was telling me it was mostly because of CSS and yeah you can get some hints if you're not sure about what to start with for example to optimize the performance on your website but it can do more than that let's go back to our send website this time I will for example select this about send elements I mean the CSS you can see yeah this is this H1 so here I'm navigating the DOM and you can see again I have this AI debug with AI buttons so selecting it you can see that is it has added this specific H1 elements in the context and I can ask thing for example let's say that I want to change this boring title and make it a nice gradient so I will just tell it to make the same text CSS have a nice gradient and I want it to be in line we do existing color theme because I'm already using some CSS variables so yeah so let's continue I agree that the page can be modified and yeah you can see that I have very nice gradients in line with all the other colors that I have in my website and you can see even more something interesting because from there I just modified the CSS live in the web page but what could be more useful is to directly modify the source code because here I'm just making non-permanent changes so you can see that I have this unsafe change tab in there with the CSS that was added to my web page I can try to apply that chant directly to my code using apply to workspace what it will ask you basically is to add your source folder to the DevTools and it will allow the DevTools to directly do this CSS modification back to your source code file so it will it's no not only able to do like live modification on your dumb CSS and JavaScript but also able to apply back that changes back to your original source code so I think this is very interesting especially as a web developer I tend to fight with CSS most of the time right Olivier? Yeah and after I was on like you do a lot of changes on the on the Chrome DevTools and then you don't remember which line you have to copy paste on your CSS file and then you're like I can't find it again because then we refresh this anyway you've all been through that so yeah I found that very interesting also it's reduced like the back and forth that you can have sometimes between like your browser when debugging you're tweaking the CSS and you're coding agents because basically you have everything at one place. So now we've seen how to code, how to debug with AI let's see how we can just include AI in our application so you may have used some AI APIs either from an AI provider, from a cloud provider but that requires to make some calls on the internet usually to pay for it, to use some tokens and everything. The good thing is that there's a new API called like with AI API that would come directly in the browser so now it's like still in like draft I think I'm not very busy but you can see that we have a lot of different API we have some summarized API with some like right rewrite we have the prompt API and basically let's see how we can use that in our browser so the goal is to have like a model directly running on our machine in our browser. So here I have an application that you've seen it from your end I have some reviews I can actually add some reviews and you may have seen that in some website now that they give you like a summarized of all the reviews so let's see how we can implement that so I'm going to go to hear my code and I have some I have like three different things that we're going to do so the person is summarized so I want to when I click on this button he gives me a summarized of all the reviews here so right now he's doing nothing he said for like calling this function so let's start by checking because not all browser like have that API yet so let's see if my browser has it and then I'm going to create a summarizer like summarizer.create that I'm going to give some options so the option I mean the type the type here is key point is the default one if you go under the documentation here you can see that you have the different types you can have to you have TLDR, TZR, key points, headline and for each of them you can do like a different length and you can see the size of sentence or words so you can decide which one you want to use and giving the expect input language of my reviews and the expect output language you can see that this is an array so you can have different several output input actually okay I'm going to give the context I'm saying okay these are reviews for an article you give as a strong stringify gson give me a summary of what people think then I'm going to I'm going to give you a monitor so this this function monitor is here to monitor the download of the model so how this API works is that it's going to download the model on your computer it's going to download only once which is good because it takes four gigabytes right now but when it's done for every website it's if your computer needs storage like your your like storage is running low Chrome is going to delete it but by default it's going to keep it so I have this monitor and then what I'm going to do is call it so I'm going to like summarize or done summarize and giving it the data and then let's return summarize or I just return the risk of I'm going to do here actually all right so now let's see what we have here going back here I'm going to click on summarize and what is happening is that okay so it's something but the model so it's going by function again and it should give me in a second so you can see that my the the model was already downloaded for me so it goes from like 0% to 100% directly because I don't have to delete again and you can see here I have a summarize of all my reviews of customer usually praise the headphone for their some quality and battery life blah blah blah blah few things therefore to work you have to activate some of the flags on Chrome so just search for AI usually and you're going to find it so just like uh Jamie Jamie nine have the prompt API the proofreader API you have the writer API the rewriter anything so just enable them so you can use them in your in your application uh here you also have these on device intervals on Chrome so you can see a few things you can load a model or load like like the the sound model and then you can just talk to it you can add images or do play with the top-k temperature you can see all the even logs so these are the even logs of what I just did with the summarize you can see the model statues of Omini tokens have been used for each of the of the calls of the API so yeah this is like a good way to debug now let's see another API I'm gonna see the proofreader so same checking if I have access to the API I'm creating a proofreader so the monitor is the same I'm just monitoring if it downloads the the the model then I'm gonna say okay I'm going to give you a list of expected context language okay here I'm gonna say okay this is going to be English because I want you to correct it and then I have this uh I'm coding the proofreader and returning the proofreader so this is useful to to fix like spending issues let's say I have my right review here and I'm just like this is is a very good article I'm gonna say like lower okay so for example I'm running this and if I leave the focus you can see here I'm coding the I'm coding the API that's going to this takes your analysis you can see that it correctly like this is a very good article so all the mistakes I did you can see that it's changed them and actually if I you know let's we have time yeah let me print it if I print the uh it's console okay yeah it was bad this is good products again going out I'm actually thinking about and you can see that it corrected again and you can see that it also gives me so the correct corrected output and all the correction with the and starting next and in next and waiting so you can even have like some like correction things if you want on your input so these are two examples I'm gonna let you and do the actually the cool one the cooler the cool demo yes let's add so what Olivier showed you is basically the very focused API for summarization for proofreading but we also have access to like more general API like the one you may have been used for example if you're using the the open AI API or whatever AI provider you're using to just basically send it your prompt so we have this language model that creates API you can set what kind of expected impute you have because you can set it text and in our case I want to be able to send it images you can also have audio as a type so it's multimodal now that I have here you basically build your general prompt so what I want to do is basically have a auto writing of review based on just an image that I upload so what I say is okay this is an image of the product and I want to generate a description for review to mention the connection in one sentence and basically tell how you felt when receiving the product and generator so title and I want the result to be a design object with the title and review contents so okay this is my prompt just like when you're trying to use a regular AI API and next step is basically to run the prompt API so session that prompt here to get the response so the look of the impute is basically set a list of messages here I'm using the user message to send our prompt in there and the impute image so the content you can see you can mix and match a different kind of content I want to have a JSON as an output so I need to add some constraint to the to the response so I want just to say my response needs to follow a specified specific schema so let's define the schema in there and the schema is just a JSON plain JSON schema I think that I want an object that has a title that's a string and the description that's also string and now I should have everything except to return the result and also print that in the locks so let's test what we just did moving on to the browser let's give it a bit more space so I want to try this prompt API to basically write the review in my place so I will upload this image so this is the at-front I received as you can see that's in pretty good shape so let's see what review it will come up with so if I select analyze oh just want to show the console in there oh that may be new I think it's I didn't specify the language so yeah as you can see Olivier as always specified in which language the request was sent so this is the result you can see the JSON and you can see that it has filled in the field for me so devastatingly the image broke and had set you upon the arrival and of course I was disappointed and frustrated when receiving this kind of of product so yeah I can just submit the review in there basically and I can see selling me some time just uploading the image and have the AI write everything for me and again just recalling what Olivier already said but this is all using a local model running on the client machine untouched really in the browser so nothing and no using any web APIs it's all within the browser so I think that's pretty cool and this is just a single example use case of the kind of things that you can do because this local model as you can see it's multimodal you can understand images you can understand audio and text and you can do all kind of stuff without having to pay like for an external API yeah this this this API I'm seeing you I mean if you can move to my to my screen I just I just went to open the the summarize API on on the MDN documentation and you can see that it's still like highly experimental and you can see that we actually I just feel like operational is already preventing it you have Chrome edge is coming so the API is still changed and what we just saw on on your screen is actually new we didn't have this like language exception a week ago when we we tried it so just be careful like these APIs can change so if you come in on your website you know now so yeah very experimental but I think it's very exciting for the kind of possibilities that it opens for web developers I mean the fact that you can take an image and come up with an explanation was on the image I mean we've seen like some picture-inary demo where you can like you have an image and people can should run there on the screen and then you can't press the image and give you like a presentation does it look like the same thing so it's actually pretty cool without relying on any Claude any online model any like talk and you have to send or whatever pretty cool okay yes we have next back to the slides last but not least section because this means okay hey hey agents do a lot of walks for us no day but we also have to do some walk for them this is the time that yeah you actually need some you my humans to like upgrade your websites for agents so yeah agents are capable of browsing the webs the new thing is that you have to optimize the website not only for humans usability and good SEO for being in discoverable in search engine but no we are so to think about the way agents can consume and use web your web apps so that's brand new thing and first we start with just a very simple proposal just like we already have like robots.txt that has been adopted for search engine that are already crawling the web just to give some rules about how the these scrollers navigate to your websites we also have like sit maps for humans to improve a whole they can navigate a website in more accessible way we have this new lm.txt proposal that's basically a bit of a mix of both so it's used by agents to act as a map to discover where you can find the information it needs on your website just kind of mix of robots.txt and for the format the text file format and the sit map and let me show you actually like an example one I already told you an angular gd so I will show you the lm.txt for the angular.dev website so this is what you get you get marked on file with a bunch of links so basically if an AI want to search for the documentation it doesn't have like to go through each web page to try to find the information it needs for example if I want to have something about animation it will basically directly guide the AI agents to move on to look at one of these documentation pages depending on what you're trying to do this is the basic lm.txt promo set so making it easier for your agents to try to find the content that they need but it can go a bit further because we have like this lm-full.txt variants where basically it brings in all the contents of your website into a single file so we have also one for angular this one is pretty extensive as you can see the scroll bar in there and if you're scrolling a bit inside there you can see that I even have like some code file example it's all the contents of the latest angular ration gather in one single text file that you can fill your agents for example one of the difficult thing with sometimes with using coding agents that their last checkpoint was based using like older version of the frameworks because yeah you can't always train the new model with the new contents sometimes it have month or years of delay regarding the contents so it doesn't know how to use that the brand new latest version of your framework let's say for example for angular so if you want to make sure that for example I want to code an application using the very latest feature of angular on the very last version I want to make sure that it use the most up-to-date reference I can fill it this lm-full.txt file to my calling agent so it has all the up-to-date information to make sure that I don't use like all feature from the training data like old angular gs example from 10 years ago and stuff like that so this is kind of cool and helpful for example to make sure that agents can have the latest information about this is like for a coding library but it can be translated to any kind of content that your website provides. Now last but not least web mcp moving on to the slides and I will give the hand to Olivier for this one the very last and fun demo that we have. Yeah we weren't from like experimental APIs to like very very highly experimental so web mcp can you share with print please yeah the web mcp I mean if you want to see how experimental it is go on the website of web mcp this is this is the website right now so not not much but the idea is that okay we have agents can browse the web as you unmentioned they go and they take the lms the things they file but more and more we're seeing like AI embedded on your browser that you you have like a we're called an agent browser so basically it's going to browse the web for you on your behalf and right now we have some tools that can do that they're going to open a browser they're going to click and browse but the way they do that is that they're trying to mimic human interactions that they're going to look either at the page by taking screenshots or by looking into the dump and say being like okay there's a button here that says that I can click on it taking the coordinates going and click on it same for a form but basically they are trying to mimic human behavior so the website I've been designed for humans not agents and so this is exactly what this proposal is trying to fix the web mcp the goal is to have like an mcp server let's say running on your web applications you have access to tools and we know that tools that agent understand agents can call tools because they have access to the name the definitions and then they want to call them so let me show you for example I have the application here again I have a add to cart here buttons so you can see that I have something like cart now and but if a new eye would have to do the same it would have to open the chrome try to guess that there's a button here get the coordinates and click on the button but what if it could have actually access to a tool I can AI tool to call it so here I have chrome chrome is not yet an agentic IDE but I have an extension here that can show if I have any tools is on my page so let's see how I can register a tool my page I have a cart tool here file that just basically import the add cart is the function is called when I click on add cart here they just add something to my cart and so I'm going to create a tool so if you if you remember if you're creating a tool before you had all these ac case this is how we used to do we use a like a jizm you would give it a name you would give it a description so here it's a tool to add items to cart and give it a schema so it's taking an object with the item it's item name and the quantity so I don't have it that I've based whatever so just the name and the quantity with it and then I have the the execute so the execution is a function that's going to have that the the business code in it so I'm going to get the the argument so I'm retrieving the item and the quantity I'm going to loop over the quantity because my add to cart only takes one it doesn't manage quantity so I'm moving and adding to cart what I have and I'm just returning like whatever just saying the quantity item has been added and the other thing I'm going to do is to register my my my tool so I go in my tool and I register it on my the navigator object of my my page now if I go back here and I refresh and see that my my data extension here see that I have an item cart tool and I can call it so I can say okay I want to add I don't know water bottles and I want to have five I'm going to execute the tool here basically you can see that either I did like five water bottle and it's basically like an AI who did it on my behalf it's coding the tool that you register on my page and let me see I had a we have a bit of time I'm I'm I'm testing it I think if I can correct directly from my my IDE yeah I know a lot of these let me see yeah so basically I could even do it like from here so yeah my agent I can say like you know add I can't go into remove the depth tool so don't have two methods add three I don't know three whole laptops through my cart so I'm going to do that and normally if everything works well it's going to call the the tool that is registered on my on my web page in my chrome so let's see so instead of this and I add two cart oh what is it doing it's a good tool that makes for content okay so it's coding yeah it's calling the tool add to cart laptop quantity three you can see here if I go back to my web page now okay let's see down three laptops I just have like three laptops here so now I called it either from like an extension or from my my IDE but the goal would be that your your your browser can do it for you because it's an agent type browser can let me get tabs and read for you so you can see that my tool is running on my web page so and it's not much code but there is even like a better like I don't know if it's a better way but let's say you don't want to add some new JavaScript your application because you're transitioning and you want to just test these these mcp tools on your application without changing much the code so let's say I have the form here the form is to write a review what I can do you can can say okay I'm gonna add a tool name right review tool I'm going to give it a tool description here I'm gonna say like add review to the product and by doing that I've transformed my form into a tool it's going to take all the different input in it and then transform them into arguments I can even like do some like tool prime description it's a like rate the product so I can add some descriptions to it for example I have the whatever do I have as like the input here it's like okay tool prime description it called like add a title oops add a title for the review and I can add this but I don't have to if I go back here you can see that now I have my right to review and this is the schema of that it has generated it's basically the same thing that we add here when I manually edit the schema but you can see that I have my uh where is it my tool so I have that the write the product and it took all the input options here from one to five I have the review title with my description I put the added title to review but also have the review text and the review photo and it automatically generate some description and to do that it took the nearest label on my on my HTML so if I go to the at a photo because you have a lot of label at photo optional and that's what it put here by by default so let's see if that can work I'm going to call the write review tool I don't have a photo I guess they like it's a good for um let's see if I can inspect so I can see it here I guess they like title awesome review I guess they like review text perfect product and I'm going to execute the tool so tiktik tiktik is it doing something now it's not supposed to I didn't hear anyway um oh yeah no no it's supposed to take take take aha it's happening that's that my file let's find it saved okay let's let's try again for so like awesome product love it and to execute it oh yeah and you can see that it filled the form for me yeah the awesome product here and I love it I don't have a picture but you could have it but you can also say okay this is good because it's filled the form but I want to also into validate the form so if I go back to my form here I'm going to say um tool to auto submit and by doing that it's going to both uh fill the form let's say three perfect also all of it okay don't pay attention to the mistakes and then if I click execute tool here it's going to fill the form but also validate the form is so it doesn't even like require any human interaction it's going to fill and validate so this is highly experimental again and actually the API changed like 10 days ago again so be careful but just know that it's like we used to say that that it's like you know responsive design at some point you had to add your website for mobile if you didn't do it then the competition did it and then people wouldn't go to your website on the mobile and so the thing that this is the same make sure your website is going to be prepared once we have all the agent agentique uh browser coming under the market and so you can start experimenting again I did experimental but start experimenting so you're ready when we have all these browsers coming up and the demo worked nice yeah I expect this is a glimpse of what we'll have to do as web developer in the near future because yeah agents are coming from the web very fast and I expect the this specification is already moving very fast it has been useful yeah if you looked at the state of human back it wasn't already usable just like you you shown and I especially like the feature or to upgrade like existing forms as MCP tools because it makes the life of developers like it's very simple and even agents to implement that for us yeah so in the end what we've seen during the decision is basically with AI it makes the life of web developers like us easier whether it's writing the code implementing better workflow debugging of course very important during the performance but also we have to help the AI tools be able to better use our website and web app so bit early in the process but yeah I can start already thinking about that lm.se.txt is already widespread nowadays MCP the norm is already widespread and web MCP is coming for the next big thing hopefully so yeah you have to prepare for that and hopefully it will just make better web apps in the end and yes thanks for seeing this session and we have a QR code in there with basically all the resources the code for the demo and the links to the different resources that we've used with shown during this session so yeah and just if you have any questions can ping us a LinkedIn and in the meantime have fun have fun see you bye bye