AI Didn’t Kill the Web, It Moved in! — Olivier Leplus (AWS) & Yohan Lasorsa (Microsoft)

Hey folks, uh, 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. My name is Yohan, 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 GD, but this time on web.

So, no surprise here, we'll talk about AI. And more specifically, in the last 6 months, the rising quality of the models has 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 and proving 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 means 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 AI APIs that have 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 want it 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 described in text format based on an open specification that's supported 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 built into your agents. We'll see a bit more about that, especially if you need to customize it.

And also, something very important in this agentic code agents era, it's to do some repeatable workflows. So we'll see just a quick demo now of what 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 Sen. 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 a description, 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 agent to implement the first one. So it will take quite some time. So meanwhile, I will have to show you what will happen behind the woods.

Just as you can see, I not specifically asked what to use. You 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 has used the GitHub CLI to pull that information and now it's trying to implement that.

So I mentioned skills. So if I look into my repo inside the .agent/skills folder, you 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 implements that.

Something I already download 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 the important part where basically skills are not always loaded into your coding agents.

It's basically pulled depending on what's needed to implement the current task. So the description is there to explain your code agents when it's useful and when your code agents need 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 your 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 frontend 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, hopefully.

I've built also a few custom skills using the skill creator skill. 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 agent 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 explained is just described here in my agents.md file, which is a standard file now that is used by almost all coding agents. And I just put in there that every time the agent makes a new change to the website, I want it to record a short video.

So it will use the Playwright CLI to do that, run the dev server, create a local tunnel, and send me the URL Telegram. And basically don't close the GitHub issue until I confirm it's done. So it's still running.

I can see that it has already run the Playwright CLI, moving on to creating the tunnel. So I will show you the notification when it will be working. Back to the slidesright now. I'll show you when it's when it's handled.

Now 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 we can use agents to debug our applications. Soright now, most people, what they do is that you can write tests to test your application. And all you can do, what more like a lot of people do, you know, you go on the websites, you go in the dev tools, and you try to, you know, make it work and everything.

Thing is, on Chrome, the Chrome dev tools are amazing. There's like so many things you can do. You can console issues, animation, the computer, the layout, the performance. You have access to all these tools here. What would be amazing if an MCP existed for that, like an agent can call it.

And that's exactly what the Chrome MCP does. If you go on the GitHub Chrome dev tool MCP here, you have the information on how to install it. Basically, an MCP server is a server that hosts 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 on my mcp.json, I have my Chrome dev tool MCP. And you can see that in my IDE here, I have it. And it has access to all these tools. So everything I can do in the Chrome dev tools or in the browser, I can do it here.

Like click, fill form, get console message, the network request, the lighthouse audit, navigate page, take screenshot, 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 dev tool here. If I do that, okay, it's going to see the agent.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.json. That's just like basic agent doing their job. It's opening a new terminal. It's running the application. And now to test it, it's going to need to open a Chrome.

And that's when it's 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. And now 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 opened the Chrome and it's going to test it. So I can either like run or test. Now it asks if you can take some screenshots. So here my prompt was very, very basic. I just ask, can you test the main page?

And so it's going there. It's taking a 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, okay, let's kill it because I don't need it 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 application performance is and where it slows down. So now the goal is to control the Chrome dev tools and including the network one and the performance one.

So let's see. Again, this problem is very basic. So it can be way more specific with it. Let's give it a minute to see what it's going to go through. Sometimes also, I didn't ask for it, but sometimes you also like generate like screenshots or like JSON files here of reports.

Okay. Okay. It's launching the application. Okay. It's navigating on it. And you can see like, okay, test one. It's going to use like another tool, a performance.trace to test it on, okay, fast internet no throttling first. That's good.

It captured the baseline. Now it's doing some performance analysis. You can see that every time you call the tool, you can see the tool is called with the details. So now it says on fast 3G. Remember, I asked like three tests, three different

connection speed. And let's see. Give it another minute. It emulates performance.trace. Okay. It has it. Performance analysis. And then it's going to do the last one. Hopefully. Okay. Okay. Let's see if it's going to generate a test like a report at the end.

Sometimes it does. Sometimes it doesn't. It depends. I haven't asked for one. So let's see what it came up with. Okay.

And I still have my window here. It doesn't open the Chrome dev tool, but it's using the tool in the background. Doing some performance analysis.

Okay. SP image and standard size. Okay.

Okay. Let's give it like just a few seconds to see what it's doing. It's checking the images. So it must have noticed that there's something we can optimize with the image, I guess. So it's checking the size of it.

It's analyzing the code. Okay. It 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. You can see that it analyzed everything and it can give you all like this report saying, okay, for every internet connection speed, I have the LCP, the CLS, the 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 on 3G. It's not good. It's giving you ways of improving it. So you can put a crash priority high. Use the side of CSS, some issues in the JavaScript.

You can put some like preload for some JSON. So you have all this that you can play with then to improve your application. Yohan, does it, do you have any news on your notification and demo?

Let's have a look. Yeah, I didn't receive anything. We can check. Sometimes the agent gets stuck. It 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 find it.

I have a dot on file. Use it and retry. Yeah.

Sometimes agents not always working, especially during demos. You know that.

The MFAT 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, let's continue and we'll come back to that later. Okay.

Oh, and there it goes. Just telling it. So let me try to show it to you. So yeah, I received the notification on my.

Don't.

Yeah. I received a 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.

So we can see now we have this contact us 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 why it 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 Telegram, but you can, for example, use Slack to send it to your coworkers 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 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 insights directly from there, from your browser to help you diagnose and fix issues.

And yeah, instead of just describing all the kind of things that you can do, let me just show you actually. So moving back to the website, I will 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 tool settings and make sure that under the AI innovation tab, you have enabled anything.

So it's not enabled by default. So you 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 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 coding agents or ChatGPT, 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 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 icon.

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 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 a 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 from your dev tools inside your browser. You 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 take 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 button.

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, the largest contentful paint 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 render blocking issues. Sometimes it's more verbal, sometimes not. Again, this is AI. So yeah, it 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 same website. This time I will, for example, select this about send elements. I'm in 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 button.

So selecting it, you can see that it has added this specific H1 element 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 with the 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 unsaved change tab in there with the CSS that was added to my web page.

I can try to apply that change directly to my code using apply to workspace. What it will ask you basically is to add your source folder to the dev tools. And it will allow the dev tools to directly do this CSS modification back to your source code file.

So it's not only able to do like live modification on your DOM, 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, yeah, as a web developer, I tend to fight with CSS most of the time,right, Olivier?

Yeah. And often like you do a lot of changes on the Chrome dev tools and then you don't remember which line you had to copy-paste on your CSS file and then you're like, ah, I can't find it again because then it refreshes.

Anyway, you've all been through that.

So yeah, I found that very interesting. Also it reduced like the back and forth that you can have sometimes between like your browser when debugging or tweaking the CSS and your coding agents because basically you have everything at one place.

So now.

Allright. So 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 directly 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 a Web AI API that would come directly in the browser. So now it's like still in like a draft, I think, on the W3C. But you can see that we have a lot of different APIs.

We have some summarize API with some like 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 Yohan. 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 summarize of all the reviews.

So let's see how we can implement that. So I'm going to go to here my code. And I have some, I have like three different things that we're going to do. So the first one is summarize. So I want to, when I click on this button, he gives me a summarize of all the reviews here.

Soright now it's doing nothing except for like calling this function. So let's start by checking because not all browsers 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.

Then I'm going to give some options. So the options, I'm giving the type. So the type here is keypoint, is the default one. If you go on the documentation here, you can see that here are the different types you can have.

So you have TLDRs, teaser, keypoints, 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. I'm giving the expect input language of my reviews and the expect output language.

You can see that this is narrated. So you can have different

several

outputs, input actually. Okay. I'm going to give you the context. I'm saying like, okay, these are reviews for an article give as a strong stringified JSON. Give me a summary of what people think. Then I'm going to,

oops, I'm going to give you a monitor. So 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 4 gigabytesright now.

But when it's done, it's done for every website. If your computer needs storage, like your 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 summarize, summarize, and giving it the data. And then let's return summarizer. I just returned the response I'm going to do here actually. Allright. So now let's see what we have here. Going back here. I'm going to click on summarize.

And now what is happening is that, okay, it's doing something about the model. So it's calling my function again. And it should give me in a second. So you can see that the model was already downloaded for me.

So it goes from like 0% to 100% directly because I don't have to download it again. You can see here I have a summarize of all my reviews. So customers already praised the headphone for their sound quality and battery life, blah, blah, blah, blah, blah, blah.

A few things there. For it 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 for like Gemini, Gemini have the prompt API, the proofreader API, you have the writer API, the rewriter and everything.

So just enable them so you can use them in your application. Here you also have these on-device internals on Chrome. So you can see a few things. You can load a model or load the standard model and then you can just talk to it.

You can add images, audio, play with the top key, temperature. You can see all the event logs. So these are the event logs of what I just did with the summarize. You can see the model statues of how many tokens have been used for each of the calls of the API.

So yeah, this is like a good way to debug. Now let's see another API. I'm going to 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 model. Then I'm going to say, okay, I'm going to give you a list of expected context language. Okay. Here I'm going to say, okay, this is going to be English because I want you to correct it.

And then I have this. I'm calling the proofreader and returning the proofreader. So this is useful to fix like spending issues. Let's say I have myright review here and I'm just like, this is a very

good

article. I'm going to say like lower. Okay. So for example, I'm running this. And if I leave the focus, you can see here I'm calling the, oops, I'm calling the API that is going to take an analysis. You can see that it corrected like this is a very good article.

So all the mistakes I did, you can see that it changed them. And actually, if I, you know what, let's, do we have time? We have a bit of time. Let me print it. If I print the, oh, wait.

Console log.

Yeah. That was bad.

This is good products. Again, going out. I click on the, and you can see that it corrected again. And you can see that it also gives me, so the corrected output and all the correction with the end, start index, end index, and where it changed.

So you can even have like some correction things if you want on your input. So these are two examples. I'm going to let Yohan do the, actually the cool one, 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 OpenAI 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 input you have because you can send 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 an auto writing of a 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 a review to mention the condition in one sentence and basically tell how you felt when receiving the product and generate also title.

And I want the result to be a JSON 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.prompt here to get the response. So the look of the input is basically set a list of messages. Here I'm using the user message to send our prompt in there and the input image. So the contents you can see, you can mix and match different kinds of content.

I want to have JSON as an output. So I need to add some constraint 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 a string. And now I should have everything except to return the result and also print that in the logs.

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 headphone 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, I just want to show the console in there.

Oh, that may be new. It's saying that I didn't specify the language. So yeah, as you can see, Olivier has 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 devastingly damaged, broken headset upon arrival. And of course, I was disappointed and frustrated when receiving this kind of product. So yeah, I can just submit the review in there basically. And I can see saving me some time just uploading the image and have the AI write everything for me.

And again, just recording what Olivier already said, but this is all using a local model running on the client machine entirely in the browser. So nothing, 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. It can understand images, it can understand audio and text, and you can do all kinds of stuff without having to pay like for an external API.

Yeah. This API is still new. I mean, if you can move to my screen. I just want to open the summarize API on the MDN documentation. And you can see that it's still like highly experimental. And you can see that actually I just like authorized already implementing it.

You have Chrome, Edge is coming. So the APIs can still change. And what we just saw on Yohan's screen is actually new. We didn't have this like language exception like a week ago when we tried it. So just be careful.

Like these APIs can change. So if you implement a new website, you know now.

So yeah, very experimental, but I think also 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 of what's on the image. I mean, we've seen like some pictionary demo where you can like, you have an image and people can should draw on the screen and then it compares the image and give you like a percentage and does it look like the same thing?

So it's actually pretty cool without relying on any cloud, any online model, any like token you have to send or whatever. Pretty cool. Okay.

Yes.

What do we have next?

Back to the slides. Last but not least section because this means, okay, AI agents do a lot of works for us nowadays, but we also have to do some work for them. This is the time that, yeah, you actually need some 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 discoverable in search engines. But now we are also to think about the way agents can consume and use your web apps.

So that's brand new thing. And first, we'll start with just a very simple proposal. Just like we already have like robots.txt that has been adopted for search engines that are already crawling the web just to give some rules about how these crawlers navigate to your websites.

We also have like sit maps for humans to improve how they can navigate a website in a more accessible way. We have this new LLM.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 it can find the information it needs on your website.

Just kind of mix of robots.txt and for the format, the text file formats and the sit map. And let me show you actually like an example. One already told you I'm an Angular GDU. So I will show you the LLM.txt for the Angular.dev website.

So this is what you get. You get markdown file with a bunch of links. So basically, if an AI wants 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 LLM.txt promise.

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 LLM-full.txt variants where basically it brings in all the content 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 version gathered in one single text file that you can feed your agents. For example, one of the difficult things 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 has months or years of delay regarding the content. So it doesn't know how to use like 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 and the very last version, I want to make sure that it uses the most up-to-date reference.

I can feed it this LLM-full.txt file to my coding agent. So it has all the up-to-date information to make sure that I don't use like old feature from the training data, like old Angular JS 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 went

from like experimental APIs to like very, very highly experimental. So Web MCP, can you share my screen 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 a websiteright now. So not much. But the idea is that, okay, we have agents can browse the web. As Yohan mentioned, they go and they check the LLM.txt files. But more and more we're seeing like AI embedded on your browser that you have like what we call like an agentic browser.

So basically it's going to browse the web for you on your behalf. Andright 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.

So they're going to look either at the page by taking screenshots or by looking at the DOM 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

a human behavior. So the website has been designed for humans, not agents. And so this is exactly what this proposal is trying to fix, the Web MCP. The goal would be to have like an MCP server, let's say, running on your web application so you'd 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 they know when to call them. So let me show you. For example, I have the application here again.

I have an add to cart here button. So you can see that I have something like cart now. And but if an AI would have to do the same, it would have to open the Chrome, try to guess that there's a button here, get the coordinate, and click on the button.

But what if it could have actually had access to a tool, like an 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 tool register on my page.

So let's see how I can register a tool on my page. I have a cart tool here

file that just basically import the add cart. Add cart is the function that is called when I click on add cart here. It just adds something to my cart. And so I'm going to create a tool. So if you remember, if you're creating tool before, we had all these SDKs.

This is how we used to do. We used to have like a JSON. 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 its item name and the quantity. So I don't have a database, whatever. So just the name and the quantity with it. And then I have the execute. So the execute function is a function that's going to have the business code in it.

So I'm going to get 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 looping and adding to cart

what I have. And I'm just returning like whatever. Just say the quantity item has been added. And the last thing I need to do is to register my tool. So I created my tool and I registered it on the navigator object of my page.

Now, if I go back here and I refresh, you can see that my little extension here, see that I have an add to 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 it added like five water bottles. And it's basically like an AI who did it on my behalf. It's calling the tool that you register on my page.

Let me see. I had a, we have a bit of time. I'm testing it. Testing if I can call it directly from my IDE here. Yeah, I know a lot of things. Let me see.

Yeah. So basically, I could even do it like from here. So here I have my agent. I can say like, you know, add. Okay, I'm going to remove the dev tool so I don't have too many tools. Add three, I don't know, three phone laptops to my cart.

So I'm going to do that. And normally, if everything works well, it's going to call

the tool that is registered

on my web page in my Chrome. So let's see. So it said that there's an add to cart. Oh, what is it doing? It's saying tool double extract content.

Okay. So it's calling, 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 laptop. I should have like three laptops here.

So now I called it either from like an extension or from my IDE. But the goal would be that your browser can do it for you because it's an agent type browser. It can navigate tabs and do it for you.

So you can see that my tool is running on my web page. So, and it's not much code, but there's 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 to your application because you're transitioning and you want to just test 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, I can say, okay, I'm going to add a tool name, write review tool. I'm going to give it a tool description here.

I'm going to 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 inputs in it and then transform them into arguments. I can even like do some like tool prime description, say 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 param description equal 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 myright to review. And this is the schema that it has generated. This is basically the same thing that we had here when I manually added the schema.

But you can see that I have my, where is it?

My tool. So I have that to 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 add a title to review, but also have the review text and the review photo.

And it automatically generated some description. And to do that, it took the nearest label

on my HTML. So if I go to the add a photo, you can see I have a label, add photo optional. And that's what it put here by default. So let's see if that can work. I'm going to call theright review tool.

I don't have a photo. I can say like, it's a good for. Let's see if I can inspect so I can see it here. I can say like title, awesome review. I can say like review text, perfect product.

And I'm going to execute the tool. So

is it doing something?

No, it's not supposed to edit here anyway.

Oh, yeah, no, no. It's supposed to.

Uh-huh. It's happening.

Let's save my file. This file is saved. Okay, let's try again. For. So like, awesome product. Love it. I'm going to execute it. Oh, yeah. And you can see that it filled the form for me. It had the awesome product here.

I love it. I don't have a picture, but you could add it. But you can also say, okay, this is good because it filled the form. But I want also it to validate the form. So if I go back to my form here, I'm going to say, tool, tool, auto submit.

And by doing that, it's going to both

fill the form. Let's say three. Perfect.

Awesome. Love 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 for me. So it doesn't even 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 it's like, you know, responsive design. At some point, you had to adapt your website for mobile.

And 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 tend to think that this is the same. Make sure your website is going to be prepared once we have all the agentic browser coming on the market.

And so you can start experimenting again. I did experimental, but start experimenting so you're ready when we have all these new browsers coming up. And the demo worked.

Nice. Yeah. I expect this is a glimpse of what we'll have to do as web developers in the near future because, yeah, agents are coming from the web very fast. And I expect this specification is already moving very fast.

It has been useful. Yeah. If we looked at the state a few months back, it wasn't already usable, just like you've shown. And I especially like the feature to upgrade like existing forms as MCP tools because it makes the life of developers like us very simple and even agents to implement that for us.

So

in the end, what we've seen during this session 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 it's a bit early in the process, but yeah, you can start already thinking about that. LLMs.txt is already widespread nowadays. MCP, the norm is already widespread and WebMCP 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.

Yes.

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 we've shown during this session.

So yeah, and just if you have any questions, you can ping us on LinkedIn.

And in the meantime, have fun.

Have fun. See you.

Okay. Bye-bye.