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

Talk transcript

1. 0:01

   Hey, folks. Uh, welcome to this session where we'll discuss a bit about the web and, uh, what the recent AI innovation changed for us as web developers.

2. 0:12

   So let's take just some time for a quick presentation. So my name is Yohan. Uh, I work as a developer advocate at Microsoft. I'm also a GDE for Angular, and I'm today with Olivier.

3. 0:24

   Yeah. I'm Olivier. I'm a developer advocate at AWS, and I'm also a GDE, but this time on web.

4. 0:31

   So no surprise here, uh, we'll talk about AI, and more specifically, in the last six months, the rising quality of the models have kinda changed the game for web developers.

5. 0:43

   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, uh, our web apps.

6. 0:53

   For development, of course, uh, but also for debugging, improving the performance, uh, natively also integrated in the browsers and, uh, even coming full cycle, uh, as agents are increasingly seen using our web apps along humans.

7. 1:08

   That also means that, uh, we have to adapt, uh, our web applications for it.

8. 1:14

   So the plan for today is to cover, uh, 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, uh, that have started to appear in our browsers.

9. 1:30

   And finally, uh, Olivier will show us how to fi- upgrade your web apps for the new agentic web app, uh, era.

10. 1:37

    What a teaser. [chuckles]

11. 1:41

    So it's twenty twenty-six. Uh, it's no longer, 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.

12. 1:53

    I still hear, uh, some folks arguing from time to time that they can't get good results with AI or, uh, it's never exactly as they want it, uh, when they're asking their coding agents.

13. 2:07

    The truth is that today it's mainly a matter of skills. But don't get me wrong, [chuckles] it's the one that you install and use with your favorite code agent.

14. 2:18

    So if you've never used them, uh, skills are lightweight plugins described in text format, uh, based on an open specification that's supported but by most coding agents, uh, nowadays.

15. 2:31

    Uh, basically, it's useful for adding, um, domain expertise, uh, for something very specifically to your, uh, use case to what you're developing, uh, new capabilities that are not built in, uh, into your agents.

16. 2:44

    We'll see a bit more, uh, about that, especially if you need to customize it. And, uh, also something very important in this, uh, uh, agentic code agents era is, uh, to do some repeatable workflows.

17. 2:57

    So we'll see just a quick demo, uh, now of, uh, what matters to you. So moving up to, uh, my VS Code. So let's just start, uh, something very simple.

18. 3:11

    And actually, before just moving the code, let's just show you an example application that we've built, uh, that we'll use for most of our demo today. So, uh, it's Seine.

19. 3:22

    Uh, it's a name of a French, uh, river, uh, just to have like, uh, some e-commerce website as an example. Like, here we have like a product page with a description, some reviews, uh, possibility to add your reviews, just like having some, uh, example for all our demos.

20. 3:41

    And in this, uh, product, I would like to add something new. So let's just try a very simple prompt. Uh, 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.

21. 3:55

    So it will take a f- uh, quite some time. So meanwhile, I will have to show you, uh, what will happen behind the hood. Uh, just as you can see, I've not specifically asked what to use.

22. 4:07

    Uh, you can see it's already trying to run the GitHub CLI.

23. 4:11

    Uh, 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, uh, what I want to see in this contact page for my website.

24. 4:26

    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, uh, trying to implement that. So I mentioned skills.

25. 4:38

    So if I look, uh, into my repo inside the .agent/skills, uh, folder, you can see that I have a few ones. And, uh, you've seen already that it has used the GitHub CLI to access the issue.

26. 4:50

    So, uh, this is the skill, uh, that implements that, something I already don't know that's already available. If you look into, uh, the, the SKILL.md file, you can see that each skill has a name, uh, basically matching, uh, what you have for the folder name.

27. 5:06

    It has a de- description. That's, uh, the important part where basically skills are not always loaded into your coding agents. It's basically pulled depending of, uh, what's needed to implement the current task.

28. 5:18

    So, uh, the description is, uh, there to explain your code agents when it's useful and when, uh, your code agents needs to get the information from this skill into its context.

29. 5:30

    And then, uh, you have basically the, the information for this skill, uh, explaining what the GitHub CLI does or with a lot of examples command and telling your agent how to use that one.

30. 5:41

    So you can see that I have, uh, a few skills here, uh, in my repo. I have, for example, one, uh, that, uh, allows to do better front-end design, uh, something important for us as, uh, web developers.

31. 5:54

    I have one, uh, that allows to use the Playwright CLI. Uh, for example, uh, you can see that, uh, you can see later that it will record, uh, a video of the feature, uh, hopefully.

32. 6:06

    I've built al- also a few custom skills using the skill creator skill. So yes, you, you have a skill that can help you, uh, customize and build your own, and I've built two actually.

33. 6:17

    One that's called Public Tunnel, uh, that can h- help, um, send, uh, to me what I wanted is basically when a feature is implemented, uh, by the coding agent, I want to be able to test it on my smartphone.

34. 6:31

    And to be able to do that, I need like a local tunnel between my dev machine and the smartphone. And to make thing easier, uh, I want, uh, to be able to receive the URL directly on my smartphone, so I've built this Telegram send skill, and, uh, I've asked the agents to send me a message with the

35. 6:48

    URL so I can test the application directly on my smartphone. So this is my workflow, and, uh, it all works through skills. And basically, uh, what I explained is just described here in my agents.md file, which is a standard file now, uh, that is used by, uh, almost all coding agents.

36. 7:07

    And I just, uh, put in there that every time, uh, the agent make 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, uh, uh, create a local tunnel, uh, and send me the URL Telegram.

37. 7:24

    And, uh, basically don't close the GitHub issue until I confirm, uh, it's done.

38. 7:29

    So it's still running. I can see that it's, uh, it has already run the Playwright CLIs. Uh, moving on to creating the tunnel. So I will show you the notification when it will be working.

39. 7:41

    Uh, back to the slides right now. Uh, I, I'll show you, uh, when it's, uh, when it's ended.

40. 7:48

    Mm-hmm.

41. 7:49

    Now moving on to Olivier. Uh, I leave you the hand, uh, to, to show you the next step, uh, in, in the development with agents.

42. 7:57

    Yes. Let's see how we can use agents to debug our application. So right now, most people, what they do, that's you can write tests to test your application and, uh, or you can do what more like a lot of people do.

43. 8:09

    You know, you go on the website, 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.

44. 8:19

    There's like so many things you can do. You can console issues, animation, the console layout. You get 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 what exactly what the Chrome MCP, um, does.

45. 8:38

    If you go on the, 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.

46. 8:57

    And so this is what you have to put to install the Chrome, uh, dev tools, uh, 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.

47. 9:14

    So everything I can do in the Chrome dev tools or in the browser, I can do it here, like click, fill form, get, get console message, the network request, the lighthouse audit, navigate page, take screenshots, everything.

48. 9:26

    Resize page and everything. So I can do everything from here. So let's say, for example, I have my,

49. 9:32

    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, uh, works in Chrome browser?"

50. 9:42

    So if I do that, let me open my dev, my tool here. If I do that, okay, it's gonna see the agent.md and everything, but then it's gonna say, "Okay.

51. 9:51

    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.

52. 10:02

    It's running the application. And now to test it, it's gonna need to open a Chrome, and that's when it's gonna call the,

53. 10:12

    the MCP tool here. Uh, so it's gonna say, "Okay. I can navigate to a page. I can list the page." And now it's opening Chrome. I haven't touched anything.

54. 10:21

    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.

55. 10:29

    Now I ask if it 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.

56. 10:38

    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..."

57. 10:45

    Okay, let's, let's kill it 'cause I don't need it anymore here. I can say, "You know what? Let's open a new window." And say, "You know what? Run the application in 3G, uh, 2G, and fast internet network and see how the application performance is and where it slows down."

58. 11:02

    So now the goal is to control the Chrome dev tools and including the network one and the performance one. So let's see. Uh, again, this prompt is very basic, so you can be way more, uh, specific with it.

59. 11:15

    Let's give it a minute to see what it's gonna go through. [clears throat]

60. 11:20

    Sometimes also... I didn't ask for it, but sometimes you also like generate like screenshots or like JSON files here of reports. Um,

61. 11:29

    okay. Okay, it's launching the application. Okay, it's navigating on it. And we can see like, okay, test one, it's going to use like another tool, a performance.trace,

62. 11:39

    uh, to test it on... Okay, fast internet, no throttling first. That's good. Um, it captured the baseline. Now it's doing some performance analysis. You can see that every time it calls a tool, you can see the tool it call with the, uh, the, the details.

63. 11:55

    So now it tests on fast 3G. Remember, I asked like three tests, three different, um,

64. 12:02

    connection speed. And let's see. Give it another minute. It emulates performance, uh, start trace. Okay, he has it, performance analysis. And then he's going to do the last one, hopefully.

65. 12:17

    Okay. Okay, let's see if he's going to generate a test, uh, like a report at the end. Sometimes he does, sometimes he doesn't. It depends. I haven't asked for one, so let's see what he came up with.

66. 12:29

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

67. 12:42

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

68. 12:58

    So it's checking the, the size of it. Um, it's analyzing the code. Okay. It usually doesn't go that far as analyzing code, so let's... I'm gonna give it, like, 15 seconds if it continues.

69. 13:11

    Okay, now it's done. Okay, you can see that it analyzes everything, and it can gives you all, like, this report saying, "Okay, for every internet connection speed, I have the LCP, the CLS, the Critical Path latency, and the Render-Blocking saving."

70. 13:23

    And then it gives you some, like, uh, guidelines. So the headphone image is too big, so on those 3G it's not good. And it's giving you ways of improving it, so you can put a price pri- place priority high.

71. 13:34

    You have the style.css, some, some issues in the JavaScript. You can put some, like, preload for some JSON. So you have all this that you, you can play with then to improve your, your application.

72. 13:48

    Yohan, does it... Do you have any, any news on your, your notification and demo?

73. 13:53

    Uh, let's have a look. Yeah, I didn't receive anything. We can check. Uh, sometimes the agent gets stuck. Uh, it failed because it couldn't find, uh, oh, the token.

74. 14:06

    Uh, yes, I have a .env file. I'm not sure why sometimes it fail [laughs] to, to find it. Uh, I have a .env file. Use it and retry.

75. 14:16

    Yeah. Uh, sometimes [laughs] agents not always working-

76. 14:21

    Yeah

77. 14:21

    ... especially during demos. Uh, you know that. [laughs]

78. 14:24

    Yeah. The .env file is for your, um,

79. 14:28

    the messaging application, like, um-

80. 14:30

    Yeah, so, so it, it knows, uh, which channel to use to send me the, the Telegram message, so yeah.

81. 14:36

    Okay. Well, let's con- let's, let's continue, and we'll come back to that later, okay?

82. 14:40

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

83. 14:50

    I don't.

84. 14:51

    Yeah. I received a notification on my smartphone, so I will open it just so you can have a look. So yeah, uh, you can see... Trying to focus in there.

85. 15:01

    Yeah, can see here a preview of the video, uh, showing the feature it recorded. I will open the link so we can see the look of, uh, the contact page it did.

86. 15:11

    And yeah, this looks like a great contact page.

87. 15:16

    So yeah, uh, I can also show it to you since I have, uh, I have it running in there. So we can see now we have this, uh, contact, uh, page.

88. 15:25

    So yeah, basically done the thing, and, uh, I can just test it and have a look at the video. So, uh, this was a very simple feature. But you can see the...

89. 15:34

    why it can be useful for more complex feature and basically allow you to review everything directly from your smartphone and, uh, even without having to run anything in the case of looking at the video.

90. 15:45

    Just to be able to test it, uh, if you want to send it. I've sent it to myself using, uh, Telegram, but you can, uh, for example, use Slack to send it to your coworkers or anything else that you can imagine.

91. 15:56

    Uh, it's your workflows [laughs] so...

92. 16:00

    Yeah, it's pretty awesome actually.

93. 16:02

    Moving on to the next, uh, nice thing. Uh, we've seen that, uh, with Olivier, your dev, your dev tools can be controlled, uh, directly by agents through MCP. Uh, but do you know also that, uh, you can use AI directly into your browser dev tools?

94. 16:20

    Uh, you can get all sorts of insight directly, uh, from there, from your browser, to help you d- diagnose and fix issues. And, uh, yeah, instead of just describing any [laughs]...

95. 16:30

    all the kind of things that you can do, let me just show you actually. So moving back to the website. Uh, we'll move on to the About page, for example.

96. 16:41

    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 under the AI Innovation tab, you have, uh, enabled anything.

97. 16:58

    So it's not, uh, enabled by default. So you have to do that yourself if you want to get this, uh, AI assistance. And once you have done that, for example, here, uh, you can see that I have, like, a, uh, common error i- in the console saying that, yeah, I have some requests have been blocked by CORS

98. 17:17

    policy. And you can see this, uh, this little icon in there. I can directly click on it to get an explanation, uh, f- uh, using AI about this error, and even a suggested fix, uh, why this error, uh, happens and what to do to fix that.

99. 17:34

    So directly in your console, you don't have to, like, copy-paste errors, uh, using that on your coding agents or ChatGPT, depending on whatever you're using. It's directly in there, uh, inside your dev tools.

100. 17:48

     And, uh, yeah, you can see it's pretty extensive, uh, and giving you all sorts of hints, uh, to try to fix the issue. So let's try to, to see where else it can be useful.

101. 17:59

     For example, in the Network tab, let's reload the page. Uh, you can see one of the failing requests. It has, uh, like 400 errors. Again, uh, we have this Debug with AI icon, so I will click on it.

102. 18:14

     And, uh, just can see that my failing request has been added to this, uh, chat interface thing. And I can, for example, ask, "Why is the request failing?"

103. 18:26

     So I have a sort of built-in, uh, chat, uh, with AI that can directly access, uh, the context of my running application from directly from the dev tools. So again, uh, it's analyzing why this request is failing and saying, uh, giving me some hints about what I may try to do to try to, to fix that.

104. 18:46

     Okay, telling me it's bad request, most likely because, uh, that's a null endpoint that's no longer there. So yeah, I think that's kinda cool that you can do directly that, uh, from your dev tools inside your browser.

105. 18:59

     Can do all sorts of, uh, other fun stuff like, for example, uh, let me move on, for example, to GitHub. Uh, this will be [chuckles] more meaningful with that one.

106. 19:10

     I move on to the Performance tab. So, uh, this time I will click on the Refresh, uh, 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.

107. 19:25

     So I have, uh, this trace. So it's a bit similar to kind of the test that Olivier did earlier with the, uh, MCP dev tool server. For example, I can open the LCP breakdown, and again, you can, you can see that I have this Ask AI, uh, button.

108. 19:41

     So I can ask it using my trace that I just recorded on the GitHub website to help me optimize, uh, my LCP score. So running it, it will analyze all the trace, uh, from the website, and telling me, okay, the LCP, the largest, uh, Contentful Paint for this page is, uh, okay this time, and, uh, basically what's

109. 20:03

     causing most of the delay, uh, because, uh, it's some stuff and... Oh, I can see, uh, investigate render-blocking issue. Sometimes it's more verbose, sometimes not. Again, uh-

110. 20:16

     It depends, yeah

111. 20:16

     ... this is AI. [laughs] So yeah, uh, it can tell me a, a few, uh, hints about what I, I need to optimize. Uh, other time it was telling me it was mostly because of CSS, and yeah, you can get some hints, uh, if you're not sure about what to, to start with, uh, for example, to optimize the

112. 20:33

     performance on, on your website. But it can do more than that. Uh, let's go back to our Send website. Uh, this time I will, for example, uh, select this About Send element.

113. 20:49

     Uh, I'm in the CSS. You can see, yeah, this is, uh, this H1. So here I'm navigating the DOM, and you can see again, I have this, uh, AI, Debug with AI button.

114. 20:59

     So selecting it, you can see that is, it has added this specific H1 element in the context, and I can ask thing, uh, for example, let's say that, uh, I want to, uh, change this boring title and make it a nice gradient.

115. 21:17

     So I will just tell it to make the Send text, uh, CSS have a nice gradient, and I want it to be in line, uh, with the existing color theme because I'm already using some CSS variables.

116. 21:30

     So yeah. So let's continue. I agree that, uh, the page can be modified. And yeah, can see that I have very nice gradients, uh, in line with all the other colors that I have in my, my website.

117. 21:46

     And you can see even more something, uh, interesting 'cause from there, I just modified, uh, the, 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, uh, changes.

118. 22:01

     So you can see that I have this Unsaved Change, uh, tab in there with, uh, the CSS that was added to my web page. I can try to apply that change directly, uh, to my, uh, code using Apply to Workspace.

119. 22:15

     What it will ask you basically is to add your source folder, uh, to the dev tools, and, uh, it will allow, uh, the, the dev tools to directly do this, uh, CSS modification back to your source code file.

120. 22:27

     So it will... It's now, uh, not only able to, to do, like, live modification on your DOM or CSS and JavaScript, but also, uh, able to, uh, apply back that changes, uh, back to, to your original source code.

121. 22:41

     So th- I think this is very interesting, uh, especially as, uh, yeah, as a web developer, I tend to fight with CSS most of the time, right, Olivier? [chuckles]

122. 22:52

     Yeah, and often, often, like, you do a lot of changes on the, 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, can't find it again," because then it refreshes anyway.

123. 23:05

     We've all been through that. [chuckles]

124. 23:07

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

125. 23:24

     So now-

126. 23:24

     All right. We- so we- we've seen how to code, how to debug with AI. Let's see how we can just include AI in our application. So, uh, you may have used some AI APIs, either directly from an AI provider, from a cloud provider, um, but that requires, uh, to make some calls on the internet, uh, usually to

127. 23:45

     pay for it, to use some tokens and everything. The good thing is that there's a new, um, API called, like, a Web AI API that would come directly in the browser.

128. 23:55

     So now it's, like, um, still in, like, a draft, I think, on the W3C. But you can see that they... we have a lot of different API. We have some Summarize API with some, like, uh, write, rewrite.

129. 24:06

     Um, we have the Prompt API. And, uh, 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, uh, browser.

130. 24:19

     So here I have an application like you've seen it, uh, from Yohan. I have some reviews. I can actually add some reviews. And you may have seen that in l- in some website now, that they give you, like, a summarize of all the reviews.

131. 24:31

     So let's see how we can implement that

132. 24:35

     So I'm gonna go to, uh, here my code, and I have some... I have, like, three different demo that we're going to, uh, to do. So the first one is summarize.

133. 24:43

     So I want to-- When I click on this button, it gives me a summarize of all the, all the, the reviews here. So right now it's doing nothing except for, like, calling this function.

134. 24:54

     So let's, let's start by checking because not all browser mana- uh, like, um, have that API yet. So let's see if my browser has it, and then I'm going to create a summar-summarizer, like summarizer.create.

135. 25:09

     Uh, then I'm going to give some options. So the options, I'm giving the type. So the type here is keyPoint, it's the default one. If you go on the documentation here, you can see that you have the different types you can have.

136. 25:20

     So you have TLDRs, teaser, key points, headline, and for each of them you can draw like a different length, and you can see the size of sentence or words, so you can decide which one you want to use.

137. 25:30

     I'm 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,

138. 25:38

     uh, several, um, um, output, uh, input actually. Um, okay, I'm going to give the context. I'm saying like, "Okay, these are reviews, um, for an article you give, uh, as a strong stringi- uh, stringified JSON.

139. 25:54

     Give me a summary of what people think." Then I'm going to, um... Oops.

140. 26:04

     I'm going to give it 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.

141. 26:13

     It's going to download only once, which is good because it takes four gigabytes right now. But when it's done, it's done for every website. It's... If your computer needs, uh, storage, like your, your like storage is running low, Chrome is going to delete it.

142. 26:27

     But by default, it's going to, uh, keep it. So I have this, uh, monitor, and then what I'm gonna do is

143. 26:35

     call it. So I'm gonna summarizers.summarize, and giving it the, the data, and then, uh, let's return summarizer. I just return the, the response, which I'm going to do here actually.

144. 26:48

     All right, 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, uh... Okay, it's doing something about the model.

145. 27:00

     So it's calling my function again, and it should give me in a second. So you can see that my... The model was already downloaded for me, so it goes from like zero percent to hundred percent directly because I don't have to download it again.

146. 27:14

     You can see here, I have a summarize of all my reviews. So, "Customers really praise the headphone for their sound quality and battery life," blah, blah, blah, blah, blah, blah.

147. 27:21

     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 gonna find it. So just for like, uh, Gemini.

148. 27:33

     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, in your application.

149. 27:44

     Uh, here you also have these on device internals on Chrome, so you can see a few things. You can load a model or load like a, like the, the sound model, and then you can just talk to it.

150. 27:55

     You can add images, audio, play with the top K temperature. You can see all the event logs. So these are the event logs of what I just did with the summarize.

151. 28:03

     Uh, you can see the model stages of how many tokens have been used for each of the, of the calls of the API. So yeah, this is like a good way to debug.

152. 28:15

     Now let's see another API. I'm gonna see the Proofreader. So, uh, same. Checking if I have access to the API.

153. 28:24

     I'm creating a proofreader. So the monitor is the same. I'm just monitoring if it downloads the, um, the, the model.

154. 28:33

     Then I'm gonna say, "Okay, I'm gonna give you a list of expected context language."

155. 28:41

     Okay. Here I'm gonna say, "Okay, this is gonna be, uh, English because I want you to correct it." And then I have this, uh, I'm calling the proofreader

156. 28:53

     and returning the proofreader. So now this is useful to, um, to fix like spelling issues. Let's say I have my write review here, and I'm just like, "This

157. 29:04

     is, is a very, uh, good article." I'm gonna check lower. Okay. So for example, I'm writing this, and if I leave the focus, you can see here I'm calling the...

158. 29:21

     Oops. I'm calling the API that's going to do text, texture 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.

159. 29:31

     And actually, if I... You know what? Let's... Do we have time? We have a little bit of time. Let me print it. If I print the...

160. 29:40

     Oh, it's-

161. 29:41

     Also looking.

162. 29:42

     Yeah. [laughs] That was bad. "This is good products." Again, going out or like click, clicking on the... 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 end, start index, end index and where it changed.

163. 30:05

     So you can even have like some like correction things if you want on your, on your input. So these are two examples. I'm gonna let you undo the, actually the cool one.

164. 30:14

     The cool, uh, the cool demo.

165. 30:17

     Yes. Let's, uh, add... So what Olivier showed you is, uh, basically the very, uh, focused API for summarization, for, uh, proofreading. Uh, but we also have access, uh, to, um, like more general API, like the one you may have been used.

166. 30:35

     Uh, for example, if you're using the, the OpenAI API or whatever, uh, AI provider you're using to just basically send it, uh, your prompt. So we have this, uh, language model that create API.

167. 30:48

     Uh, you can set what kind of expected input you have, uh, because you can set it text, and in our case, I want to be able to send it i-images.

168. 30:56

     Uh, you can also have audio as, as a type, so it's multimodal.

169. 31:02

     Now that I have, uh, here, uh, you basically build your general prompt. So, uh, what I want to do is basically have, uh, an auto-writing, uh, of a review based on, uh, just an image, uh, that I upload.

170. 31:16

     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, uh, when receiving the product and generate also title.

171. 31:30

     And I want, uh, the result to be a JSON object, uh, with the title and review contents. So okay, this is my prompt, just like, uh, when you're trying to use a regular AI API.

172. 31:41

     And, uh, next step is basically, uh, to, uh, run the Prompt API, so session.prompt here, to get the response. Uh, so the look of the input is basically, uh, set a, a list of messages.

173. 31:56

     Here I'm using, uh, the user message to, uh, send our prompt in there and the input image. So the content you can see can mix and match, uh, different kind of content.

174. 32:08

     I want to have, uh, JSON as an output, so I need to add some constraint to the, to the response. So I want just to say, uh, my response needs to follow a specified, uh, specific schema.

175. 32:23

     So let's define the schema in there. And the schema is just a, a JSON, plain JSON schema, uh, saying that I want an object, uh, that has a title, that's a string, and a description that's also string.

176. 32:37

     And now I should have, uh, everything except to, uh, return the result and also print that in the logs. So, uh, let's test what we just did.

177. 32:50

     Uh, moving on to the browser. Let's give it a bit more space. So I want, uh, to try this Prompt API to basically write the review in my place.

178. 33:04

     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.

179. 33:14

     So if I select analyze or just want to show the console in there.

180. 33:27

     Oh, that may be new. Uh, it's saying that I didn't specify the language. So yeah, as you can see, Olivier has, uh, always specified in which language the request was sent.

181. 33:39

     So, uh, this is the result. You can see the JSON, and you can see that, uh, it has filled in the, the field for me. So devastatingly damaged, broken headset upon arrival.

182. 33:50

     And of course, uh, I was disappointed and frustrated when receiving, uh, this kind of, uh, of product. So yeah, can just submit the review in there, uh, basically. And, uh, you can see, saving me some time just uploading the image and have the AI write everything for me.

183. 34:07

     And again, uh, just recalling what Olivier already said, but this is all using a local model, uh, running on the client machine entirely in the browser. So nothing, uh, no using any web APIs.

184. 34:18

     It's all within, uh, the browser. So I think that's pretty cool, and this is just a single, uh, example use case of the kind of things that you can do, uh, because this, uh, local model, as you can see, it's, uh, multimodal.

185. 34:30

     It can understand images, it can understand audio and text, and you can do all kind of stuff, uh, without having to pay like for an external API.

186. 34:42

     Yeah, it i-- this, this, this API are still new. I mean, if you can move to my, um, to my screen. I just, I just want to open the, the Summarize API on, on the, uh, MDN documentation.

187. 34:53

     And you can see that it's still like highly experimental. And you can see that... Well, actually, I just feel like Opera is already implementing it. You have Chrome. Um, Edge is coming.

188. 35:04

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

189. 35:13

     So just be careful, like these APIs can change. So if you implement in your website,

190. 35:21

     you know now. [laughs]

191. 35:23

     So yeah, very experimental, but I think also very exciting for the kind of, uh, possibilities that it opens for, for web developers.

192. 35:30

     I mean, the fact that it can take an image and come up with, uh, an explanation 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 their, on the screen.

193. 35:41

     And then it compares the image and give you like a percentage on 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.

194. 35:55

     Pretty cool. Okay.

195. 35:58

     Uh, yes.

196. 35:59

     What do we have next?

197. 36:00

     Back to the slides.

198. 36:01

     Oh.

199. 36:02

     Last but not least section, uh, because this means, okay, AI agents do a lot of works for us, uh, nowadays, but we also have to do some work for them. [laughs]

200. 36:14

     This, this is the time that, yeah, you actually need some, uh, human, humans to like, uh, upgrade your websites, uh, for, for agents. So yeah, agents are capable of browsing the webs.

201. 36:26

     Uh, the new thing is that you have to optimize the website not only for humans' usability, uh, and good SEO for being discoverable in search engine, but now we have also to think about, uh, the way agents can consume and use web, your web apps.

202. 36:41

     So that's brand new thing. And, uh, first we'll start with just a very simple proposal. Uh, just like we already have, like, robots.txt, uh, that has been adopted for search engine, uh, that are already crawling the web.

203. 36:58

     Uh, just to give some rules about how the, these crawlers, uh, navigate through your websites. We also have, like, sitemaps, uh, for humans to improve how they can navigate a website in a more accessible way.

204. 37:11

     We have this new llm.txt proposal that's basically a bit of, uh, mix of both. So it's used by agents to act as a map, uh, to discover where it can find the information it needs on your website.

205. 37:24

     Just kind of mix of robots.txt and, uh, for the format, the text file formats and, uh, the sitemap. And, uh, let me show you actually, like, an example.

206. 37:37

     One, uh, I already told you I'm an Angular GDE, so I will show you the llm.txt for the angular.dev website. So, uh, this is what you get. You get a markdown file with a bunch of links.

207. 37:50

     Uh, so basically if an AI want to search for the documentation, it doesn't have, like, to go through each webpage to try to find the information it needs. Uh, for example, if I want to have something about, uh, animation, uh, it will basically directly, uh, guide the AI agents to move and to look at one of these

208. 38:09

     documentation page, depending of what you're trying to do. This is, uh, the basic llm.txt, uh, promises. So making it easier for your agents to try to find the content, uh, that they need.

209. 38:22

     But, uh, it can go a bit further because we have, like, this llm, uh, dash full.txt variants where, uh, basically it brings in all the contents of your website into a single file.

210. 38:35

     So, uh, we have also one for Angular. Uh, this one is pretty extensive, like, as you can see the scroll bar in there. If... And if you're, uh, scrolling a bit inside there, you can see that I even have, like, some code, uh, file example.

211. 38:49

     It's all the contents of the latest Angular version gather in one single text file that you can feed your agents. Uh, for example, one of the, [lip smacks]

212. 38:59

     uh, difficult thing with, uh, sometimes with using, uh, coding agents is that, uh, uh, their, their last checkpoint was based, uh, using, like, older version of the frameworks because, uh, yeah, you can't always train the new model with the, the new contents.

213. 39:14

     Yeah, sometimes it have, uh, month or years, uh, o-of delay, uh, regarding the content, so it doesn't know how to use, like, the, the brand-new latest version of your framework, let's say for example, for Angular.

214. 39:25

     So if you want to make sure that, uh, for example, I want to code an application using the very latest feature of Angular on the very la- uh, last version, I want to make sure that it use the most up-to-date reference.

215. 39:38

     Uh, I can feed it this llm, uh, dash full.txt file, uh, to my coding agents. So, uh, it has all the l- the up-to-date information to make sure that I don't use, like, old, uh, feature from the training data, like old, uh, AngularJS example from ten years ago and stuff like that.

216. 39:56

     So, uh, this is kinda cool and helpful, uh, for example, uh, to make sure that agents can have the latest information about, uh... This is, like, for a coding library, but it can be u- translated to any kind of content that your website provide.

217. 40:14

     Now, uh, last but not least, WebMCP. Uh, moving on to the slides. And I will give the hand to Olivier for this one, the very last and fun demo, uh, that we have.

218. 40:26

     Yeah. We went from, um, from, like, experimental, uh, APIs to, like, very, very highly experimental. So WebMCP... Can you share my screen, please? Yeah. The WebMCP... I mean, if you want to see how experimental it is, go on the website of WebMCP.

219. 40:43

     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 Yohan mentioned. They go and they check the llms.txt files.

220. 40:56

     But more and more we're seeing, like, AI embedded on your browser, that you, you have, like, a, what we call, like, an agentic browser. So basically it's going to browse the web for you on your behalf.

221. 41:08

     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.

222. 41:19

     So they're gonna 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.

223. 41:30

     Same for a form. But basically they are trying to mimic, um, a human behavior. So the website have been designed for humans, not agents. And so this is exactly what this, uh, proposal is trying to fix, the WebMCP.

224. 41:45

     The goal would be to have, like, an MCP server, let's say, running on your, uh, web application, so you'd have access to tools. And we know that tools, that agent understand.

225. 41:56

     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.

226. 42:05

     I have a Add to Cart here, uh, button. So you can see that I have something in my 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.

227. 42:21

     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, um, IDE, but I have an extension here that can show, uh, if I have any tool registered on my page.

228. 42:39

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

229. 42:45

     um, file that just basically import the addCart. addCart is the function that 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.

230. 42:58

     So if you, if you remember, if you're creating tool before where you had all these ADKs, this is how we used to do. We used to have like a JSON.

231. 43:06

     Uh, you would give it a name, you would give it a description. So here it's a, a tool to add items to cart, and give it a sh- a schema.

232. 43:16

     So it's taking an object with the item, its item name, uh, and the quantity. So I don't have a database, whatever. So just the name and the quantity, uh, with it.

233. 43:27

     And then I have the, uh, the execute. So the execute function is the function that's going to have that, uh, the, the business code in it.

234. 43:35

     Um, so I'm going to get the, the argument. So I'm retrieving the item and the quantity.

235. 43:42

     I'm going to loop over the quantity because my add to cart only takes one. Uh, it doesn't manage quantity, so I'm looping and adding to cart, um, what I have.

236. 43:54

     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, my, uh, my tool.

237. 44:03

     So I created my tool, and I registered it on my, the navigator object of my, my page. Now, if I go back here and I refresh, you can see that my,

238. 44:15

     my little extension here, see that I have a add to cart tool, and I can call it. So I can say, "Okay, I want to add," I don't know,

239. 44:23

     "water bottles, and I want to have five." And when I execute the tool here, basically you can see that it added like five water bottle. And it's basically like an AI who did it on my behalf.

240. 44:37

     It's calling the tool that you register on my page. Um, let me see. I had a... We have a bit of time. I'm, I'm, I'm testing it. [laughs]

241. 44:47

     Testing if I, if I can call it directly from my, my IDE here.

242. 44:51

     Yeah, I know a lot of things. Let me see. Um,

243. 44:55

     yeah. So basically I can... I could even do it like from here. So here my agent can say like, you know, add... Okay, I'm going to remove the devtool so I don't have too many tools.

244. 45:05

     Add, uh, three, I don't know, uh, three

245. 45:11

     Paul laptops to my cart. So I'm gonna do that, and normally if everything works well, it's going to call the, um, the tool that is registered on my,

246. 45:27

     on my webpage in my Chrome. So let's see. So it said that there's an add to cart. Oh, what is it doing? [laughs]

247. 45:36

     Execution tool.extra-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 webpage now, okay, let's see.

248. 45:48

     Down three laptop. I should have like three laptops here. So now I called it either from like an extension or from my, uh, my IDE, but the goal would be that your, your, your browser can do it for you because it, it's an agent type browser.

249. 46:02

     It can navigate tabs and do it for you. So you can see that my tool is running on my webpage. So... And it's not much code, but there is even like a better...

250. 46:10

     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 are transitioning and you want to just test these, uh, these MCP tools, uh, on your application without changing much of the code.

251. 46:25

     So let's say I have the form here. The form is to write a review. What I can do, it can, it can say, "Okay, I'm, I'm gonna add a tool name, Write, uh, Review Tool."

252. 46:38

     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, um, arguments.

253. 46:55

     I can even like do some like tool, uh, param description. Say like rate the product. So I can add some descriptions to it. For example, I have the... What other do I have else?

254. 47:07

     Like the input here. And select, okay, tool param description equal like add a title. Uh, oops. Add a title for the review.

255. 47:20

     And I can add these, but I don't have to. If I go back here, you can see that now I have my write a review, and this is the schema of...

256. 47:27

     that it has generated. This is basically the same thing that we had here when I manually added the schema. But

257. 47:37

     you can see that I have my, uh,

258. 47:40

     where is it? Um, my tool. So I have that, the rate 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.

259. 47:56

     And it automatically generates it from description. And to do that, it took the nearest label on my, um,

260. 48:04

     on my HTML. So if I go to the add a photo, you can see I have a la- label, add photo optional, and that's what it put here by, by default.

261. 48:13

     So let's see if that can work. I'm going to call the write review tool. I don't have a photo. I can say like it's a, it's a good for, um...

262. 48:21

     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.

263. 48:34

     And I'm going to execute the tool. So tick, tick, tick, tick.

264. 48:42

     Is it doing something? No, it's not supposed to add it here anyway. Um,

265. 48:50

     oh, yeah, no, no. It's supposed to... Tick, tick, tick, tick

266. 48:56

     Aha. It's happening. Did I... Did I save my file? This file is saved.

267. 49:04

     Okay, let's, let's try again. Four, so like

268. 49:10

     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.

269. 49:20

     I don't have a picture, but you could have it. But you can also say, "Okay, this is good because it filled the form," but I want also it to validate the form.

270. 49:26

     So if I go back to my form here, I'm gonna say,

271. 49:32

     um, tool- tool auto submit. And by doing that, it's going to both,

272. 49:41

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

273. 49:47

     Awesome. Love it. Okay. Don't pay attention to the, the mistakes. And then if I click Execute Tool here, it's going to fill the form but also validate the form for me.

274. 49:58

     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.

275. 50:10

     So be careful, but just know that it's like we, we used to say that, like, it's like, uh, you know, responsive design. At some point you had to adapt your website for mobile.

276. 50:21

     And if you didn't do it, then the competition did it, and then people wouldn't even go to your website on their mobile. And so tend to think that this is the same.

277. 50:29

     Make sure your, your website is going to be prepared once we have all the agent- agentic, uh, browser coming onto the market. And so you can start experimenting. Again, highly experimental, but start experimenting so you're ready when we have all these new browsers coming up.

278. 50:46

     And the demo worked. [laughs] [laughs]

279. 50:49

     Nice. Yeah. I expect this is a glimpse of what we'll have to do as web developer in, in the near future 'cause, yeah, [laughs] agents are, are coming from the web very fast and, uh, I expect the, the...

280. 51:03

     this, uh, specification is already moving very fast. Uh, it has-

281. 51:06

     Mm-hmm

282. 51:06

     ... been useful. Uh, yeah, if you looked at the state a few months back, it wasn't already, uh, usable just like you, you've shown. And I especially like the feature how to upgrade, like, existing forms, uh, as MCP tools 'cause it makes the life of developers like us very simpler and, uh, have an agents to implement that,

283. 51:25

     uh, for us.

284. 51:27

     Yeah.

285. 51:27

     So, uh, in the end, uh, what we've seen during th- this session, uh, is basically, uh, with AI, it makes, uh, the life of web developers, uh, like us easier.

286. 51:42

     Uh, whether it's writing the code, uh, implementing-

287. 51:46

     Debugging

288. 51:46

     ... better workflow debugging, [laughs] of course, very important, ensuring the performance. Uh, but also we have to help, uh, the AI tools be able to better use our website and web app.

289. 51:59

     So it's bit early in the process but, uh, yeah, you can start already thinking about that.

290. 52:05

     Uh, llms.txt is already widespread nowadays. MCP, uh, the norm is already widespread, and WebMCP is coming, uh, for the next big thing, uh, hopefully. So yeah, you have to prepare for that, and, uh, hopefully it will just make, uh, better web apps in the end. [laughs]

291. 52:25

     Yes.

292. 52:27

     And, uh-

293. 52:28

     Olivier

294. 52:28

     ... yes, thanks for, uh, for seeing this session. And, uh, we have a QR code in there with, uh, basically all the resources, the, the code for the demo, and the links to the, to different resources that we've used, uh, we've shown dur- during this session.

295. 52:42

     So yeah. And just if you have any question, you can ping us, uh, on LinkedIn.

296. 52:48

     In the meantime, have fun.

297. 52:50

     Have fun. See you. [laughs]

298. 52:51

     Okay. Bye-bye.