Full transcript
0:00Hey folks, welcome to this session where
0:03we'll discuss a bit about the web and
0:05what the recent AI innovation change for
0:08us as web developers.
0:12So, let's take just some time for a
0:14quick presentation. So, my name is
0:16Yohan. I work as a developer advocate at
0:18Microsoft. I'm also a GDE for Angular
0:21and I'm today with Olivier.
0:23Yeah, I'm Olivier, my developer advocate
0:26at AWS and I'm also a GDE, but this time
0:28on web.
0:31So, no surprise here. We'll talk about
0:34AI and more specifically, in the last 6
0:37months, the rising quality of the models
0:40have kind of changed the game for web
0:42developers. And it's not just the
0:44models, it's also the integrations all
0:46around it. So, AI is now there at every
0:49stage of the life cycle of our web apps.
0:53For development, of course, but also for
0:55debugging, improving the performance,
0:57natively also integrated in the
0:59browsers.
1:00And even coming full cycle as agents
1:04increasingly seen using our web apps
1:06along humans. That also means that we
1:09have to adapt our web applications for
1:12it.
1:14So, the plan for today is to cover some
1:16of the latest progress in all these
1:18different stages.
1:19Coding, of course, but also debugging
1:21and tuning our applications using the
1:24new local AI APIs
1:27that have started to appear in our
1:29browsers. And finally, Olivier will show
1:31us how to upgrade your web apps for the
1:35new agentic web app era.
1:38For the teaser.
1:41So, it's 2026.
1:44It's no longer no longer the question of
1:46can I code my web app with AI, but
1:49rather how to get the best results out
1:51of AI coding agents.
1:53I still hear some folks arguing from
1:56time to time that they can't get good
1:58results with AI.
2:00Or it's never exactly as they want it
2:03when they're asking their coding agents.
2:07The truth is that today it's mainly a
2:09matter of skills. But don't get me
2:12wrong. It's the one that you install and
2:14use with your favorite code agent.
2:18So, if you've never used them, skills
2:20are lightweight plugins described in
2:23text format based on an open
2:25specification that's supported by by
2:28most coding agents nowadays.
2:30Basically, it's useful for adding
2:34domain expertise for something very
2:36specifically to your use case, to what
2:38you're developing.
2:40New capabilities that are not built in
2:42into your agents. We'll see a bit more
2:44about that, especially if you need to
2:46customize it.
2:48And also something very important in
2:50this
2:52agentic code agents era, it's to do some
2:55repeatable workflows.
2:57So, we'll see just a quick demo now of
3:00what it matters to you.
3:02So, moving up
3:05to
3:06my VS code.
3:08So, let's just start something very
3:10simple. Actually, before just moving the
3:12code, let's just show you an example
3:14application that we've built
3:16that we'll use for most of our demo
3:18today.
3:19So, it's Seine.
3:22It's a name of a French river.
3:25Just to have like some e-commerce
3:28website as an example. Here we have like
3:30a product page with a description, some
3:33reviews, possibility to add your
3:35reviews. Just like having some
3:38example for all our demos. And in this
3:42product, I would like to add something
3:44new. So, let's just try
3:46a very simple prompt. What I'm asking is
3:48just to look at open issues in the repo
3:51and I'm asking my coding agents to
3:53implement the first one.
3:55So, it will take a
3:57quite some time. So, meanwhile, I will
3:59have to show you what will happen behind
4:02the wood. Just as you can see, I not
4:04specifically asked what to use. You can
4:07see it's already trying to run the
4:09GitHub CLI.
4:11Let's move on to show you GitHub. So,
4:15basically, this is the repo for this
4:16application. I've created one issue that
4:19is to add contact page. So, I'm just
4:21describing
4:23what I want to see in this contact page
4:25for my website. And basically, when I
4:27ask to implement the first open issue,
4:29it has used the GitHub CLI to pull that
4:32information and now it's
4:34trying to implement that.
4:36So, I mentioned skills. So, if I look
4:39into my repo inside the .agent/skills
4:43folder, you can see that I have a few
4:45ones. And
4:46you've seen already that it has used the
4:48GitHub CLI to access the issues. So,
4:50this is the skill
4:52that implements that. Something I
4:54already done know that's already
4:55available. If you look into
4:58the the skill.md file, you can see that
5:01each skill has a name
5:03basically matching what you have for the
5:06folder name. It has a description.
5:08That's the important part where
5:10basically skills are not always loaded
5:12into your coding agents. It's basically
5:14pulled depending of what's needed to
5:17implement the current task. So, the
5:19description is there to explain your
5:22code agents when it's useful and when
5:25your code agents needs to get the
5:27information from the skill into its
5:28context. And then you have basically the
5:31the information for the skill explaining
5:34what the GitHub CLI does with a lot of
5:37examples command and telling your agent
5:39how to use that one. So, you can see
5:42that I have a few skills here in my
5:45repo. I have for example one
5:48that's uh
5:49allows to do better front-end design.
5:51Something important for us as web
5:54developers. I have one
5:56that allows to use the Playwright CLI.
5:58For example, you can see that
6:01you can see later that it will record
6:03a video of the feature, hopefully. I've
6:06built also a few custom skills using the
6:09skill creator skill. So, yes, you you
6:11have a skill that I can help you
6:13customize and build your own. And I've
6:15built two, actually. One that's called
6:17public tunnel
6:19that can help
6:21send to me what I wanted is basically
6:24when a feature is implemented
6:27by the coding agent, I want to be able
6:28to test it on my smartphone. And to be
6:31able to do that, I need like a local
6:33tunnel between my dev machine and the
6:35smartphone. And to make things easier, I
6:38want
6:39to be able to receive the URL directly
6:41on my smartphone. So, I've built this
6:43Telegram send skill and I've asked the
6:45agents to send me a message with the URL
6:48so I can test the application directly
6:50on my smartphone.
6:51So, this is my workflow and it all works
6:55through skills. And basically,
6:58what I explain is just described here in
7:00my agents.md file, which is a standard
7:02file now that is used by almost all
7:05coding agents. And I just put in there
7:09that every time
7:10the agent make a new change to the
7:12website, I want it to record a short
7:14video. So, it will use the Playwright
7:16CLI to do that, run the dev server,
7:19create a local tunnel
7:22and send me the URL Telegram. And
7:25basically, don't close the GitHub issue
7:26until I confirm it's done.
7:29So, it's still running. I can see that
7:31it's
7:32it has already run the Playwright CLI.
7:34It's
7:35moving on to creating the tunnel. So, I
7:37will show you the notification when it
7:39will be working.
7:41Back to the slides right now.
7:44I'll show you when it's when it's ended.
7:48Now, moving on to Olivier. I leave you
7:51the hand to to show you the next step in
7:54the development with agents.
7:57Yes, let's see how we can use agents to
8:00develop our application. So,
8:02right [clears throat] now, most of you
8:02already do this. You can write test to
8:05test your application.
8:06And or you can do what more like a lot
8:09of people do, you know, you go on the
8:10websites, you go in the dev tools and
8:12you try to, you know, make it work and
8:14everything.
8:15Thing is, on Chrome, the Chrome dev
8:18tools are amazing. There's like so many
8:20things you can do. You can console
8:22issues,
8:23animation, the computer layout, you get
8:25the performance. You have access to all
8:27these tools here.
8:28It would be amazing if an MCP existed
8:32for that. Like an agent can call it.
8:34That's what exactly what the Chrome MCP
8:38does. If you go on the
8:40on the GitHub Chrome
8:42dev tool MCP here, you have the
8:44information on how to install it.
8:45Basically, an MCP server is a server
8:49that hosts tools that can be called by
8:51your agent. And it's very easy to set up
8:54on any IDE, any CLI, whatever you use
8:56for your agents. And so, this is what
8:58you have to put to install the Chrome
9:01dev tools
9:02MCP. So, that's what I've done here. If
9:05I go to my MCP.json, I have my Chrome
9:08dev tool MCP. And you can see that in my
9:10IDE here, I have it and it has access to
9:13all these tools. So, everything I can do
9:14in the Chrome dev tools
9:17or in the browser, I can do it here.
9:18Like click, fill form, get get console
9:20message, the network request, the
9:22lighthouse audit, navigate page, take
9:24screenshot, everything. Resize page and
9:27everything. So, I can do everything from
9:29here. So, let's say for example, I have
9:30my
9:32my agent here. If I open my agent window
9:35and I ask,
9:36"Okay, you know what? Can you run the
9:38application and see how the main page
9:41works in Chrome browser?" So, if I do
9:43that and you open my dev my tool here,
9:46if I do that, okay, it's going to see
9:48the agent.md and everything. But then
9:50he's going to say, "Okay, to run the
9:51application, I need to start it." So,
9:53it's going to have a look at my
9:54package.json. That's just like basic
9:57engine
9:58doing their job. It's opening a new
10:00terminal.
10:02It's running the application.
10:04And now to test it, it's going to need
10:06to open a Chrome. And that's when it's
10:09going to call the
10:12the NCP tool here. Uh so, it's going to
10:15say, "Okay, I can navigate to a page. I
10:17can list the page." I know it's opening
10:19Chrome. I haven't touched anything. You
10:21can see like it's Chrome being
10:22controlled by automatic test software.
10:24So, now it opened the Chrome and it's
10:26going to test it. So, I can either like
10:28run or test. Now, it
10:30I see if it can take some screenshots.
10:32So, here my prompt was very very basic.
10:34I just asked, "Can you test the main
10:36page?" And so, it's going there. It's
10:38taking a screenshot and listing it. Then
10:39you can do everything you want. You can
10:41say, "Okay, you know what? I want to do
10:43something else.
10:44I want to Okay, let's
10:47let's kill it.
10:49Cuz I don't need it anymore here.
10:51I can say, "You know what? Let's open a
10:53new window." Say, "You know what? Run
10:55the application in 3G, uh 2G, and fast
10:58internet network and see how the
11:00application performance is and where it
11:01slows down." So, now the goal is to
11:03control the Chrome DevTools and
11:05including the network one and the
11:07performance one. So, let's see.
11:09Uh again, this prompt is very basic. So,
11:11you can be way more uh specific.
11:14Let it Let's give it a minute to see
11:16what it's going to go through.
11:20Sometimes also I didn't ask for it, but
11:21sometimes it will also like generate
11:22like screenshots or like JSON files here
11:25of reports.
11:26Um
11:29Okay. Okay, it's launching the
11:30application. Okay, it's navigating on
11:32it.
11:33And now you can see that Okay, test one.
11:35It's going to use like a no or true that
11:37performance start trace
11:39uh to test it on Okay, fast internet no
11:43throttling first. That's good.
11:45Um it captured the baseline. Now, it's
11:47doing some performance analysis.
11:50You can see that every time you call the
11:51tool, you can see the tool it calls is
11:53the uh the the details. So, now it tests
11:56on fast 3G. Remember, I asked like three
11:58tests, three different
12:00um
12:01connection speed.
12:03And let's see.
12:06Give it another minute.
12:08It emulates performance start trace.
12:12Okay, it has it. Performance analysis.
12:14And then it's going to do the last
12:16one. Hopefully, okay.
12:18Okay, let's see if it's going to
12:19generate a test like a report at the
12:22end.
12:23Sometimes it does, sometimes it doesn't.
12:25It depends. I haven't asked for one, so
12:27let's see what it came up with.
12:29Okay.
12:32And I still have my window here. You
12:34don't It doesn't open the Chrome
12:35DevTools, but it's using the the tool in
12:37the background.
12:38Doing some performance analysis.
12:42Okay.
12:44LSP image and Stanley size. Okay.
12:49Okay, let's give it like just a few
12:50seconds to see
12:52uh what it's doing. It's checking the
12:54images. So, it must have noticed that
12:55there's something we can optimize with
12:57the with the image, I guess. So, it's
12:59checking the the size of it.
13:01Um it's analyzing the code. Okay.
13:04Usually, it doesn't go that far as
13:05analyzing code.
13:07So, let's
13:08I'm going to give it like 15 seconds. If
13:10it continues Okay, now it's done. Okay,
13:12you can see that it analyzed everything
13:14and it can give you all like a these
13:15reports saying, "Okay, for every
13:17internet connection speed, I have the
13:19LCP, the CLS, the critical path latency,
13:21and the random blocking saving." And
13:23then it gives you some like guidelines.
13:25So, the headphone image is too big, so
13:28it don't through 3G is not good. It's
13:30giving you ways of improving it. So, you
13:31can put a place priority high. You have
13:34the size of CSS and some issues in the
13:37JavaScript. You can put some like
13:39preload for some JSON. So, you have all
13:42these that you you can play with them to
13:44improve your
13:46your application.
13:48Yann, does it Do you have any any news
13:50on your your notification and demo? Uh
13:53let's have a look.
13:55Yeah, I did not receive anything. We can
13:57check. Sometimes the agent gets stuck.
14:01Uh it failed because it couldn't find
14:05Oh, the token.
14:06Yes, I have a data file. I'm not sure
14:08why sometimes it failed to to find it. I
14:11have a data file.
14:13Use it and let me try.
14:16Yeah.
14:18Sometimes agents not always working,
14:21especially during demos. You know that.
14:25The alpha is for your um
14:28the messaging application like uh Yeah,
14:30so so it it knows which channel to use
14:33to send me the the Telegram message. So,
14:35yeah. Okay. Well, let's let's let's
14:38continue and we'll come back to that
14:39later, okay? Oh, and
14:41there goes just telling it.
14:44Uh so, let me try to show it to you. So,
14:47yeah, I received the notification I
14:50don't Yeah.
14:52I received the notification on my
14:54smartphone. So, yeah, we'll open it just
14:56so you can have a look. So, yeah, you
14:58can see
15:00trying to focus in there. Yeah, can see
15:02here preview of the video uh showing the
15:05feature it recorded. I will open the
15:07link. So, we can see the look of the
15:10contact page it did. And yeah, this
15:12looks like a great contact page.
15:16So, yeah, I can also show it to you
15:18since I have
15:20uh
15:21I have it running in there. So, you can
15:22see now we have this uh contact page.
15:25So, yeah, basically done the thing and I
15:27can just test it and have a look at the
15:29video. So, this was very simple feature,
15:32but can see the why can be useful for
15:35more complex feature and basically allow
15:37you to review everything directly from
15:40your smartphone and even without having
15:42to run anything in the case of looking
15:44at the video just to be able to test it.
15:46Uh if you want to send it, I've sent it
15:48to myself using a Telegram, but you can
15:51uh for example, use Slack to send it to
15:53your coworkers or anything else that you
15:55can imagine.
15:57It's your workflows.
15:58So,
16:00Yeah, it's pretty awesome, actually.
16:02Moving on to the next uh nice thing. Uh
16:05we've seen that uh with Olivier, your
16:07dev your dev tools can be controlled
16:10directly by agents through MCP. Uh but
16:13do you know also that
16:15uh you can use AI directly into your
16:18browser dev tools?
16:20Uh you can get all sorts of insight
16:22directly uh from there, from your
16:23browser to help you diagnose and fix
16:26issues. And uh yeah, instead of just
16:29describing any all the kind of things
16:31that you can do, let me just show you
16:33actually.
16:34So, moving back to the website,
16:38uh we'll move on to the about page, for
16:40example. Let's open the dev tools.
16:43So, we can see that we have an error.
16:45So, first thing, if you want to have
16:47like all the new useful AI stuff, you
16:50have to go to the dev tools settings and
16:52make sure that under the AI innovation
16:55tab, you have uh enabled anything. So,
16:58it's not uh enabled by default. You have
17:00to do that yourself if you want to get
17:03this AI assistance.
17:05And once you have done that, for
17:06example, here uh you can see that I have
17:09like uh
17:10uh common error in the console saying
17:13that yeah, I have
17:15some requests have been blocked by CORS
17:17policy. And you can see this
17:19uh this little
17:21icon in there. I can directly click on
17:22it to get an explanation uh
17:26uh using AI about this error
17:29and even a suggested fix why this error
17:32happens and what to do to fix that. So,
17:34directly in your console, you don't have
17:37to like copy paste errors uh using that
17:40and your coding engines or ChatGPT
17:42depending on whatever you're using. It's
17:44directly in there inside your dev tools.
17:48And uh yeah, you can see it's pretty
17:50extensive
17:51uh and giving you all sorts of hints uh
17:53to try to fix the issue. So, let's try
17:56to to see where else it can be useful,
17:59for example, in the network tab. Let's
18:02reload the page. Uh you can see one of
18:04the failing request that has like 400
18:08errors. Again, uh we have this debug
18:10with AI icon. So, I will click on it
18:14and uh just can see that my failing
18:17request has been added to this uh chat
18:19interface thing. And I can, for example,
18:22ask why is the request failing?
18:26So, I have a sort of built-in uh
18:29chat uh with AI that can directly access
18:32uh the context of my running application
18:34from directly from the dev tools.
18:36So, again, uh it's analyzing why this
18:38request is failing and saying
18:41uh giving me some hints about what I may
18:44try to do to try to to fix that. Okay,
18:46telling me it's bad request, most likely
18:48because
18:49uh that's an old endpoint that's no
18:51longer there.
18:52So, yeah, I think that's kind of cool
18:54that you can do directly that uh from
18:56your dev tools inside your browser.
18:59Can do all sorts of uh other fun stuff
19:01like, for example, uh
19:04Let me move on, for example, to GitHub.
19:07Uh this will be more meaningful with
19:09that one. I move on to the performance
19:11tab.
19:12So, uh this time I will click on the
19:14refresh
19:16uh in there. So, it will gather some
19:18insights about the web page like how
19:20long does it take to run the different
19:22things and some metrics about it. So, I
19:25have
19:26uh this trace. So, it's a bit similar to
19:28kind of the test that Olivier did
19:30earlier with the MCP dev tool server.
19:33For example, I can open the LCP
19:35breakdown. And again, you can you can
19:37see that I have this ask AI
19:40uh button. So, I can ask it using my
19:43trace that I just recorded on the GitHub
19:45website to help me optimize uh my LCP
19:48score. So,
19:50running it, it will analyze all trace
19:52from the website and telling me, "Okay,
19:55the LCP, the largest uh contentful paint
19:58for this page is uh okay this time." And
20:02uh basically what's causing most of the
20:03delay
20:05uh
20:05because uh it's some stuff and
20:09Oh, I can't see uh investigate render
20:11blocking issues. Sometimes it's more
20:13verbose, sometimes not. Again, uh this
20:16is AI.
20:17So, yeah.
20:18Uh it can tell me uh a few uh hints
20:21about what I I need to optimize. Uh all
20:24the time it was telling me it was mostly
20:25because of CSS and yeah, you can get
20:28some hints
20:29uh if you're not sure about what to to
20:31start with uh for example to optimize
20:33the performance on on your website.
20:36But it can do more than that. Uh let's
20:39go back to our send website.
20:42Uh this time
20:43I will for example uh select this about
20:47send elements.
20:49Uh I'm in the CSS. You can see here,
20:51this is uh this H1. So, here I'm
20:54navigating the DOM and you can see again
20:56I have this uh AI debug with AI button.
20:59So, selecting it, you can see that is it
21:02has added this specific H1 element in
21:05the context. And I can ask thing for
21:08example, let's say that uh I want to
21:12uh change this boring title and make it
21:16a nice gradient. So, I will
21:19just tell it to make the send text uh
21:22CSS have a nice gradient and I want it
21:24to be in line uh with the existing color
21:27theme because I'm already using some CSS
21:30variables. So, yeah.
21:32So, let's continue. I agree that uh
21:37the page can be modified. And yeah, you
21:39can see that I have very nice gradients
21:42uh in line with all the other colors
21:43that I have in my my website. And you
21:46can see even more something uh
21:48interesting cuz from there I just
21:50modified uh the the CSS live in the web
21:53page, but what could be more useful is
21:55to directly modify the source code
21:57because here I'm just making
21:59non-permanent uh changes. So, you can
22:01see that I have this unsaved change uh
22:03tab in there with uh the CSS that was
22:06added to my web page. I can try to apply
22:10that change directly uh to my uh code
22:13using apply to workspace. What it will
22:16ask you basically is to add your source
22:18folder uh to the dev tools. And uh it
22:21will allow uh the the dev tools to
22:23directly do this uh CSS modification
22:25back to your source code file. So, it
22:27will it's now uh
22:29not only able to to do like live
22:32modification on your DOM CSS and
22:34JavaScript, but also
22:36uh able to uh apply back that changes uh
22:39back to to your original source code.
22:41So, I think this is very interesting uh
22:44especially as uh yeah, as a web
22:46developer, I tend to fight with CSS most
22:49of the time. Right, Olivier?
22:51>> [laughter]
22:52>> Yeah, and after after like you do a lot
22:54of changes on the on the Chrome dev
22:55tools and then
22:57you don't remember which line you had to
22:59copy paste on your CSS file and then
23:01you're like, "I can't find it again."
23:03because then it refreshes anyway.
23:05We've all been through that.
23:07So, yeah. I found that very interesting.
23:09Also, it reduces like the back and forth
23:11that you can uh have sometimes between
23:14like uh your browser when debugging or
23:17tweaking the CSS and uh your coding
23:19agents because basically you have
23:21everything at one place.
23:24So, now
23:26>> Okay, so we we've seen how to code, how
23:28to debug with AI. Let's see how we can
23:31just include AI in our application. So,
23:33uh you may have used some AI APIs either
23:36directly from an AI provider, from a
23:38cloud provider. Um but that requires uh
23:42to make some calls on the internet, uh
23:45usually to pay for it, to use some
23:46tokens and everything.
23:48The good thing is that there's a new um
23:50API called like a web AI API that would
23:54come directly in the browser. So, now
23:56it's like um still in like a draft, I
23:58think under the W3C. But you can see
24:00that we have a lot of different API. We
24:02have some summarize API, we have some
24:03like uh write rewrite, um we have the
24:07prompt API. And uh basically, let's see
24:10how we can use that in our browser. So,
24:12the goal is to have like a model
24:14directly running on our machine in our
24:17uh browser.
24:19So, here I have an application that
24:21you've seen it from your end. I have
24:23some reviews, I can actually add some
24:25reviews. And you may have seen that in
24:26in some website now that they give you
24:28like a summarize of all the reviews. So,
24:31let's see how we can implement that.
24:35So, I'm going to go to uh here my code.
24:38And I have some I have like three
24:39different demos that we're going to uh
24:41to do. So, the first one is summarize.
24:43So, I want to when I click on this
24:44button he gives me a summarize of all
24:47the all the the reviews here. So, right
24:50now he's doing nothing except for like
24:51calling this function.
24:53So, let's let's start by checking
24:57because not all browser manage like um
24:59have that API yet. So, let's see if my
25:02browser has it. And then I'm going to
25:04create a summarizer summarizer like
25:06summarizer.create.
25:09Uh then I'm going to give some options.
25:11So, the options I'm giving the type. So,
25:13the type here is key point. It's the
25:15default one. If you go on the
25:16documentation here, you can see that
25:18here are the different types you can
25:19have. So, we have TLDR, teaser, key
25:21points, headline. And for each of them
25:23you can do like a different length and
25:24you can see the size of sentence or
25:27words. So, you can decide which one you
25:29want to use. I'm giving the expect input
25:31language of my reviews and the expect
25:33output language. You can see that this
25:35is an array, so you can have different
25:38uh several um
25:40um
25:42output uh input actually. Um
25:45Okay, I'm going to give the context. I'm
25:47going to say like, "Okay, these are
25:48reviews um for an article you give
25:52uh as a strong stringified JSON. Give me
25:54a summary of what people think."
25:57Then I'm going to
25:59um
26:01Oops.
26:03I'm going to give you a monitor. So,
26:05this this function monitor is here to
26:07monitor the download of the model. So,
26:09how this API works is that it's going to
26:11download the model on your computer.
26:13It's going to download only once, which
26:14is good because it takes 4 GB right now.
26:17But when it's done, it's done for every
26:19website.
26:20It's if your computer needs uh storage
26:23like your your like storage if you're
26:25running low, Chrome is going to delete
26:27it, but by default it's going to uh keep
26:29it.
26:30So, I have this uh monitor and then what
26:33I'm going to do is
26:35call it. So, I'm going to like
26:36summarizer.summarize
26:38and giving it the the data and then uh
26:41let's
26:43return summarizer. I just return the the
26:46response as I'm going to do here
26:47actually.
26:48All right. So, now let's see what we
26:50have here. Going back here.
26:52I'm going to click on summarize and now
26:55what is happening is that
26:57uh okay, saying something about the
26:58model.
27:00So, it's calling my function again.
27:02And it should give me in a second. So,
27:05you can see that my the model was
27:07already downloaded for me. So, it goes
27:09from like 0% to 100% directly because I
27:12don't have to download it again. You can
27:14see here I have a summarize of all my
27:16reviews. So, customers are really
27:17praising the headphone for their sound
27:19quality and battery life. Blah blah blah
27:20blah blah.
27:21Few things there. For it to work, you
27:23have to activate some of the flags on
27:25Chrome. So, just search for AI usually
27:28and you're going to find it. So, just
27:29for like uh
27:32Gemini
27:33Gemini and have the prompt API, the
27:35proofreader API, you have the writer
27:37API, the rewriter and everything. So,
27:38just enable them so you can use them in
27:41your
27:42in your application.
27:44Uh here you also have these on-device
27:46internals on Chrome. So, you can see a
27:48few things. You can load a model or load
27:51like uh the sound model and then you can
27:53just talk to it. You can add images,
27:56audio, play with the top K, temperature.
27:58You can see all the event logs. So,
28:00these are the event logs of what I just
28:01did with the summarize.
28:03Uh you can see the model status of how
28:05many tokens have been used for each of
28:08the
28:09of the calls of the API. So, yeah, this
28:12is like a good way to debug. Now, let's
28:15see another
28:17API. I'm going to see the proofreader.
28:19So,
28:20uh save.
28:21Checking if I have access to the API.
28:24I'm creating a proofreader. So, the
28:27monitor is the same. I'm just monitoring
28:29if it downloads the uh
28:31the the model.
28:33Then I'm going to say, "Okay, I'm going
28:35to give you a
28:37list of expected complex language."
28:41Okay, here I'm going to say okay, this
28:43is going to be uh English because I want
28:45you to correct it.
28:47And then I have this
28:49uh
28:50I'm calling the proofreader.
28:52And returning the proofreader. But now
28:54this is useful to um to fix like
28:57spelling issues. Let's say I have my
29:00write review here and I'm just like this
29:04is is
29:06a
29:07very
29:09uh
29:10good
29:12article. I'm going to say like lower.
29:15Okay. So, for example, I'm writing this
29:17and if I leave the focus, you can see
29:20here I'm calling the oops, I'm calling
29:22the API that's going to take the
29:24analysis. You can see that it corrected
29:26like this is a very good article. So,
29:27all the mistakes I did you can see that
29:30it changed them. And actually if I you
29:32know what, let's we have time? We have a
29:34little bit of time. Let me print it.
29:37If I print the
29:40uh wait, it's console.log
29:42Yeah.
29:44That was bad.
29:45>> [laughter]
29:47>> This is good
29:50products. Again, going out. All right,
29:53click clicking on the And you can see
29:55that it corrected again. And you can see
29:57that it also gives me so the correct
30:00corrected output and all the correction
30:02with the and start index and index and
30:04what it changed. So you can even have
30:05like some like correction things if you
30:07want on your on your input.
30:10So these are two examples. I'm going to
30:11let you on do the actually the cool one,
30:14the cool demo.
30:16Yes, let's
30:18add So what Olivier showed you is uh
30:21basically the very uh focused API for
30:24summarization,
30:25for uh proofreading, uh but we also have
30:28access uh to um
30:31like more general API like the one you
30:34may have been used uh for example, if
30:36you're using the the OpenAI API or
30:39whatever uh AI provider you're using to
30:41just basically send it uh your prompt.
30:43So we have this uh long language model
30:45that create API.
30:48Uh you can set what kind of expected
30:50input you have uh because you can send
30:52it text and in our case I want to be
30:54able to send it uh images.
30:56Uh you can also have audio as a type, so
30:59it's multimodal.
31:02Now that I have uh
31:04here uh you basically build your general
31:06prompt. So uh what I want to do is
31:09basically have uh
31:11an auto writing uh of a review based on
31:14a uh just an image uh that I upload. So
31:16what I say is okay, this is an image of
31:18the product and I want to generate a
31:20description for a review to mention the
31:22condition in one sentence and basically
31:25tell how you felt uh when receiving the
31:27product and generate also title. And I
31:30want uh the result to be a JSON object
31:32uh with the title and review contents.
31:35So okay, this is my prompt just like uh
31:37when you're trying to use a regular AI
31:39API.
31:41And uh next step is basically uh to uh
31:45run the prompt API. So session.prompt
31:48here to get the response. Uh so the look
31:51of the input is basically uh set a list
31:54of messages. Here I'm using uh the user
31:58message to uh send our prompt in there
32:01and the input image. So the content you
32:04can see you can mix and match different
32:06kind of content.
32:07>> [sighs]
32:08>> I want to have uh JSON
32:11as an output. So I need to add some
32:13constraint to the to the response. So I
32:15want just to say uh
32:18my response needs to follow a specified
32:21uh specific schema. So
32:24let's define the schema in there. And
32:26the schema is just a a JSON plain JSON
32:29schema. I think that I want an object
32:32that has title that's a string and a
32:34description that's also string.
32:37And now I should have uh everything
32:40except to uh return the result and also
32:43print that in the logs.
32:46So uh let's test what we just did.
32:50Uh moving on to the browser.
32:53Let's give it
32:55a bit more space. So
32:57I want
32:58uh to try this prompt API to basically
33:01write the review in my place. So I will
33:04upload this image. So this is the
33:07headphone I received. As you can see,
33:09not in pretty good shape. So let's see
33:11what review it will come up with. So if
33:15I select analyze, oh
33:18just want to show the console in there.
33:27Oh, that may be new. Uh it's saying that
33:31I didn't specify the language. So yeah,
33:33as you can see, Olivier has uh always
33:36specified in which language the request
33:38was sent.
33:39So uh this is the result. You can see
33:41the JSON and you can see that uh it has
33:44filled in the the field for me. So
33:46devastatingly damaged, broken headset
33:49upon arrival. And of course uh I was
33:52disappointed and frustrated when
33:54receiving uh this kind of uh
33:57of product. So yeah, I can just submit
34:00the review in there basically and uh can
34:02see saving me some time just uploading
34:04the image and have the AI write
34:06everything for me. And again uh just
34:09recalling what Olivier already said, but
34:10this is all using a local model uh
34:13running on the client machine entirely
34:14in the browser. So nothing and no using
34:17any web APIs. It's all within uh the
34:20browser. So I think that's pretty cool
34:22and this is just a single uh example use
34:24case of the kind of things that you can
34:26do uh because this uh local model, as
34:29you can see, it's uh multimodal. It can
34:31understand images, it can understand
34:33audio and text and you can do all kind
34:35of stuff uh without having to pay like
34:37for an external API.
34:41Yeah, is it this is this these APIs are
34:43still new. I mean, if you can move to my
34:46um to my screen. I just I just went to
34:48open the the summarize API on on the uh
34:52MDN documentation and you can see that
34:55it's still like highly experimental and
34:57you can see that but actually I just
34:59feel like Opera is already implementing
35:01it. You have Chrome. Um Edge is coming.
35:04So the APIs can still change. And what
35:06we just saw on on your own screen is
35:08actually new. We didn't have this like
35:10language exception like a week ago when
35:12we we tried it. So just
35:15be careful. Like these APIs can change.
35:17So if you implement it in your website,
35:21you know now.
35:22So yeah, very experimental, but I think
35:24also very exciting for the kind of
35:26uh possibilities that it opens for for
35:28web developers.
35:30I mean, the fact that you can take an
35:31image
35:32and come up with uh an explanation
35:35what's on the image. I mean, we've seen
35:36like some Pictionary demo where you can
35:38like you have an image and people can
35:40should draw on their on the screen and
35:41then it compares the image and give you
35:43like a percentage on does it look like
35:45the same thing? So it's actually pretty
35:46cool without relying on
35:49any cloud, any online model, any like
35:52token you have to send or whatever.
35:55Pretty cool.
35:56Okay. Uh yes.
35:59>> have next? Back to the slides.
36:01>> Oh.
36:02Last [snorts]
36:03uh but not least section uh because this
36:05means okay, AI AI agents do a lot of
36:08works for us uh nowadays, but we also
36:11have to do some work for them.
36:13>> [laughter]
36:14>> This is the time that yeah, you actually
36:16need some
36:17human humans to like
36:19upgrade your websites uh for
36:22for agents. So yeah, agents are capable
36:24of browsing the webs.
36:27The new thing is that you have to
36:28optimize your website not only for
36:30humans, usability
36:32uh and good SEO for being discoverable
36:34in search engine, but now we are also to
36:37think about uh the way agents can
36:39consume and use web your web apps. So
36:41that's brand new thing.
36:45And uh first we'll start with just a
36:47very simple proposal. Uh just like we
36:50already have like robots.txt
36:53uh that has been adopted for search
36:55engine uh that are already crawling the
36:57web uh just to give some rules about how
37:00the these crawlers uh navigate to your
37:03websites. We also have like sitemaps uh
37:06for humans to improve how they can
37:08navigate the websites in more accessible
37:10way. We have this new LLM.txt proposal
37:13that's basically a bit of uh mix of
37:16both. So it's used by agents to act as a
37:20map uh to discover where it can find the
37:22information it needs on your website.
37:24Just kind of mix of robots.txt and uh
37:28for the format the text file format and
37:30uh the sitemap. And uh let me show you
37:33actually like an example.
37:36One
37:38uh already told you I'm an Angular GD.
37:40So I will show you the LLM.txt for the
37:42angular.dev website. So uh this is what
37:45you get. You get a markdown file with a
37:48bunch of links. Uh so basically if an AI
37:52want to search for the documentation, it
37:54doesn't have like to go through each web
37:56page to try to find the information it
37:58needs. Uh for example, if I want to have
38:01something about animation,
38:03it will basically directly uh guide the
38:06AI agents to move on to look at one of
38:09these documentation page depending of
38:10what you're trying to do. This is uh the
38:13basic LLM.txt
38:15uh premises. So making it easier for
38:18your agents to try to find the content
38:20uh that they need. But uh it can go a
38:23bit further because we have like this
38:24LLM uh dash full.txt variants where uh
38:29basically it brings in all the contents
38:32of your website into a single file. So
38:36uh we have also one for Angular.
38:39Uh this one is pretty extensive like as
38:41you can see the scroll bar in there. If
38:43And if you're uh scrolling a bit inside
38:45there, you can see that I even have like
38:47some code uh file example. It's all the
38:50contents of the latest Angular version
38:52gather in one single text file that you
38:54can feed your agents. Uh for example,
38:56one of them
38:58uh difficult thing with uh sometimes
39:01with using coding agents is that uh uh
39:05their their last checkpoint was based uh
39:08using like older version of the
39:09frameworks because uh yeah, you can't
39:11always train the new model with the the
39:13new contents. Yeah, sometimes it have a
39:15month or years uh of delay uh regarding
39:18the content. So it doesn't know how to
39:20use like the the brand new latest
39:22version of your framework. Let's say for
39:23example for Angular. So if you want to
39:25make sure that uh for example, I want to
39:28code an application using the very
39:30latest feature of Angular and the very
39:33last version, I want to make sure that
39:35it use the most up-to-date reference. Uh
39:38I can feed it this LLM uh dash full.txt
39:41file uh to my coding agents. So, uh it
39:44has all the
39:45the up-to-date information to make sure
39:48that I don't use like old feature from
39:50the training data like old Angular JS
39:53example from 10 years ago and stuff like
39:55that. So, this is
39:57kind of cool and helpful.
39:59For example,
40:01to make sure that agents can have the
40:03latest information about
40:05this is like for a coding library, but
40:07it can be you translated to any kind of
40:10content that your website provide.
40:14Now,
40:15last but not least Web MCP. Moving on
40:19to the slides and I will give the hand
40:20to Olivier for this one, the very last
40:23and fun demo that we have.
40:26Yeah, we went from
40:29from like experimental
40:31APIs to like very very highly
40:34experimental.
40:35So, Web MCP, can you share my screen,
40:37please? Yeah. The Web MCP, I mean, if
40:39you want to see how experimental it is,
40:41go on the website of Web MCP. This is
40:44this is the website right now. So, not
40:46not much.
40:48But the idea is that
40:49okay, we have agents can browse the web
40:51as Yuan mentioned, they go and they
40:53check the LMS, that takes text files.
40:56But more and more we're seeing like
40:59AI embedded on your browser that you you
41:02have like a we we call it like an
41:03agentic browser. So, basically it's
41:04going to browse the web for you on your
41:07behalf.
41:08And right now we have some tools can do
41:10that. They're going to open a browser,
41:12they're going to click and browse. But
41:14the way they do that is that they're
41:16trying to mimic human interactions. So,
41:19they're going to look either at the page
41:20by taking screenshots or by looking at
41:22the DOM and say and like okay, there's a
41:24button here that says that I can click
41:27on it taking the coordinates, going and
41:29click on it. Same for a form. But
41:31basically, they are trying to mimic um
41:35a human behavior. So, the website I've
41:37been designed for humans, not agents.
41:40And so, this is exactly what this
41:42proposal is trying to fix, the Web MCP.
41:45The goal would be to have like an MCP
41:47server, let's say, running on your web
41:50application. So, you'd have access to
41:52tools.
41:53And we know that tools that agent
41:55understand. Agents can call tools
41:57because they have access to the name,
41:58the definitions,
41:59and they know when to call them. So, let
42:02me show you. For example, I have the
42:03application here again. I have a add to
42:06cart here
42:08button. So, you can see that I have
42:09something in my cart now.
42:11And but if an AI would have to do the
42:14same, it would have to open a Chrome,
42:17try to guess that there's a button here,
42:19get the coordinate, and click on the
42:20button.
42:21But what if it could have actually have
42:23access to a tool,
42:25like an AI tool,
42:26to call it. So, here I have Chrome.
42:29Chrome is not yet an agentic
42:32IDE,
42:34but I have an extension here that can
42:36show if I have any tool registered on my
42:38page. So, let's see how I can register a
42:40tool on my page. I have a cart tool here
42:45file that just basically import the add
42:47cart. Add cart is the function that is
42:49called when I click on add cart here. It
42:51just add something to my cart.
42:54And so, I'm going to
42:57create a tool.
42:58So, if you if you remember if you're
43:00creating tool before we had all these
43:02SDKs, this is how we used to do. We used
43:04to have like a JSON.
43:06You would give it a name.
43:08You would give it a description. So,
43:10here it's a a tool to add items to cart.
43:15And give me a a schema. So, it's taking
43:17an object with the item its item name
43:21and the quantity. So, I don't have a
43:23database, whatever. So, just the name
43:24and the quantity with it.
43:27And then I have the the execute. So, the
43:30execute function is a function that's
43:31going to have that uh
43:32the business code in it.
43:35So, I'm going to get the the arguments.
43:38So, I'm retrieving the item and the
43:40quantity.
43:42I'm going to loop over the quantity
43:43because my add to cart only takes one.
43:46It doesn't manage quantity. So, I'm
43:49looping and adding to cart
43:51um
43:53what I have. And I'm just returning like
43:56whatever. Just say the quantity item has
43:58been added.
43:59And the other thing to do is to register
44:01my my my tool. So, I created my tool and
44:04I registered it on my the navigator
44:07object of my
44:08my page. Now, if I go back here
44:12and I refresh, you can see that my
44:15my data extension here, see that I have
44:17a add to cart tool and I can call it.
44:19So, I can say okay, I want to add I
44:21don't know
44:23water
44:25bottles and I want to have five.
44:28And when I execute the tool here,
44:30basically, you can see that it added
44:31like five water bottle.
44:33And it's basically like an AI who did it
44:36on my behalf. It's calling the tool that
44:38is registered on my page.
44:40Let me see. I had a We have a bit of
44:43time. I'm I'm I'm testing it.
44:47Testing if I if I can call it directly
44:48from my my IDE here.
44:51Yeah, I know. I have a lot of things.
44:52Let me see.
44:55Yeah. So, basically, I can I could even
44:57do it like from here. So, here I have my
44:59agent. I can say like, you know, add
45:02Okay, I'm going to remove the dev tool
45:03so I don't have too many tools.
45:05Add three
45:07I don't know.
45:09Three
45:11phone laptops
45:14to my cart.
45:16So, I'm going to do that and normally if
45:18everything works well, it's going to
45:19call the
45:22the tool that is registered on my
45:27on my web page in my Chrome. So, let's
45:29see. So, it said that there is an add to
45:32cart. Oh, what is it doing?
45:35>> [clears throat]
45:36>> It's creating tool that makes my
45:37content.
45:40Okay. So, it's calling yeah, it's
45:42calling the tool add to cart, laptop
45:44quantity three. You can see here if I go
45:46back to my web page now. Okay, let's
45:48see. Down three laptop. I should have
45:50like three laptops here. So, now I
45:52called it either from like an extension
45:54or from my
45:56my IDE, but the goal would be that you
45:58your your browser can do it for you
46:00because it it's an agent type browser.
46:02It can navigate tabs and do it for you.
46:04So, you can see that my tool is running
46:05on my web page. So, and it's not much
46:08code, but there is even like a better I
46:10don't know if it's a better way, but
46:12let's say you don't want to add some new
46:14JavaScript to your application because
46:15you're transitioning and you want to
46:17just
46:18test these these MCP tools
46:21on your application without changing
46:23much the code.
46:25So, let's say I have the form here. The
46:26form is to write a review. What I can do
46:29is I can say okay, I'm I'm going to add
46:31a tool name.
46:33Write
46:34review tool.
46:37I'm going to give it a tool description.
46:41Here I'm going to say like add review to
46:43the product.
46:45And by doing that, I've transformed my
46:47form into a tool. It's going to take all
46:49the different inputs in it and then
46:52transform them into
46:54arguments. I can even like do some like
46:57tool
46:58param description. You say like rate the
47:02product. So, I can add some descriptions
47:04to it. For example, I have the
47:06whatever do I have as like the input
47:08here. It's like okay, tool param
47:10description equal like add a title
47:14oops, add a title for the review.
47:20And I can add these, but I don't have
47:22to. If I go back here, you can see that
47:23now I have my write to review. And this
47:25is the schema of that it has generated.
47:28You see it's basically the same thing
47:29that we had here
47:31when I manually added the schema.
47:35But
47:36you can see that I have my
47:40Where is it?
47:43My tool. So, I have that the write the
47:45product and it took all the input
47:47options here from one to five. I have
47:50the review title with my description. I
47:51put the add title to review, but also
47:53have the review text and the review
47:55photo. And it automatically generates
47:58some description. And to do that, it
47:59took the nearest label on my
48:04on my HTML. So, if I go to the add a
48:07photo, you can see I have a label add
48:09photo optional and that's what it put
48:11here by by default. So, let's see if
48:13that can work. I'm going to call the
48:15write review tool.
48:17I don't have a photo. I can say like
48:19it's a it's a good for
48:21um let's see if I can inspect so I can
48:23see it here.
48:25I can say like title
48:27awesome review. I can say like review
48:29text
48:30perfect
48:32product.
48:34And I'm going to execute the tool.
48:37So,
48:42is it doing something?
48:45No, it's not supposed to add it here
48:46anyway.
48:47um
48:50Oh, yeah. No, no. It's supposed to
48:52like like that.
48:56Uh-huh.
48:58What's happening?
49:00I said my file is finally saved.
49:04Okay, let's
49:06let's try again.
49:07For so like
49:10awesome
49:11product.
49:12Love it.
49:14I'm going to execute it. Oh, yeah. And
49:15you can see that it filled the form for
49:17me. Yeah, the awesome product here. It
49:19added love it. I don't have a picture,
49:20but it could have it. But you can also
49:22say okay, this is good because it filled
49:23the form, but I want also it to validate
49:26the form. So, if I go back to
49:28my form here,
49:29I'm going to say
49:31um tool
49:35tool
49:36auto submit. By by doing that, it's
49:38going to both
49:41uh fill the form. Let's say three.
49:44Perfect.
49:47Also, well, wait. Okay. Don't pay
49:50attention to the mistakes.
49:53And then, if I click execute tool here,
49:55it's going to fill the form, but also
49:57validate the full form itself. It
49:59doesn't even like require any human
50:01interaction. It's going to fill and
50:03validate. So, this is highly
50:05experimental again. And actually, the
50:07API changed like 10 days ago again.
50:10So, be careful, but just know that it's
50:13like we we used to say that that it's
50:15like uh you know, responsive design at
50:18some point. You had to adapt your
50:20website for mobile. If you didn't do it,
50:22then the competition did it, and then
50:25people wouldn't go to your website on
50:26the mobile. And so, I tend to think that
50:28this is the same. Make sure your your
50:30website
50:31is going to be prepared once we have all
50:33the agent agent peak uh browser coming
50:36out on the market. And so, you can start
50:38experimenting, again, highly
50:40experimental, but start experimenting so
50:41you're ready when we have all these new
50:44browsers coming up.
50:46And the demo worked.
50:48>> [laughter]
50:49>> Nice. Yeah, I expect this is a glimpse
50:52of what we'll have to do as web
50:54developer in in the near future cuz
50:57yeah, agents are coming from the web
50:59very fast, and
51:01I expect the the this specification is
51:04already moving very fast. It has been
51:07useful. Yeah, if you looked at the state
51:09a few months back, it wasn't already
51:12usable just like you you shown. I
51:14especially like the feature how to
51:16upgrade like existing forms
51:18as MCP tools cuz it makes the life of
51:20developers like us very simple, and
51:23even agents to implement that for us.
51:27Yeah. So,
51:29uh in the end,
51:31what we've seen during the this session
51:34is basically
51:35with AI, it makes the life of web
51:38developers like us easier.
51:42Whether it's writing the code,
51:45implementing
51:46better workflow, debugging, of course
51:48very important, showing the performance.
51:51But also, we have to help the AI tools
51:55be able to better use our website and
51:58web apps. So, it's a bit early in the
52:00process, but yeah, you can start already
52:02thinking about that.
52:05LLMs.txt
52:06is already widespread nowadays. MCP the
52:10norm is already widespread, and Web MCP
52:12is coming for the next big thing,
52:15hopefully. So, yeah, you have to prepare
52:17for that, and hopefully,
52:20it will just make
52:22better web apps in the end.
52:24Yes.
52:27And yes, thanks for for seeing this
52:30session. And we have a QR code in there
52:33with basically all the resources, the
52:35the code for the demo, and the links to
52:38the different resources that we've used,
52:40we've shown during during this session.
52:42So, yeah, and just if you have any
52:44question, you can ping us on LinkedIn.
52:48In the meantime, have fun. Have fun. See
52:50you. Okay. Bye-bye.