Full transcript
0:14Hello, hello.
0:16Hello, can you hear me okay?
0:18Okay, cool.
0:20Let's get started.
0:22So,
0:23we are going to be talking a little bit
0:25about Web MCP. Has anybody, just out of
0:28curiosity, has anybody already played
0:29around with Web MCP?
0:32Only a few people. Okay, great. Those
0:34few people, you have a bit of a head
0:35start, but for everyone else, we'll be
0:36going into a bit more of the background,
0:38how it works, what it does. So, my name
0:41is Tara. I am part of the Google Chrome
0:44team. Um I'm a developer relations
0:47engineer, and I'm here with a few of my
0:49colleagues from Google Chrome, alongside
0:52the DeepMind team, too. So, we'll be
0:54really interested to talking to you
0:56afterwards around the DeepMind booth, if
0:58you like have thoughts around web and AI
1:01and the intersection between the two.
1:03That is where my focus is these days.
1:07So, let's get into it.
1:09The
1:10let's say past few decades,
1:13we have been building the web for human
1:16actions
1:17and human eyes, and we've been trying to
1:20optimize for that, but these days, it's
1:22not just humans that are using the web.
1:24We have agents using the web on the
1:27human behalf, too.
1:29And we are seeing an increasing number
1:32of agents using the web.
1:35But, the problem is
1:37the agents are having to do so much work
1:41to do simple actions on the sites that
1:44we've built.
1:45And just to give you a bit of an example
1:47of this, this is a a website that I've
1:49built coded,
1:51and it's a concert website for selling
1:53tickets for concerts.
1:55And we have Gemini in Chrome panel on
1:57the side here. And let's say you come
2:00along to this website
2:02and you've typed this prompt. You want
2:04to buy two tickets to the Afro Beats
2:05Festival. You've given it the details.
2:08The AI agent has to do so much work to
2:11make this happen. So, it'll probably
2:13look at the HTML because usually the
2:17agents will pass the entire DOM just to
2:18understand what's happening on your
2:20page. Then it will look into the
2:21accessibility tree just to understand
2:23the structure of your HTML page.
2:26Then it maybe it'll take a screenshot of
2:28the page, analyze all the different
2:30elements that couldn't see in the HTML
2:32and the accessibility tree. And then
2:34maybe it will measure how far down it
2:36needs to click, how far across, where
2:38the exact element that it needs to
2:40click, and then it'll click that
2:42element. And as you can see, this
2:44process is quite long. It can be
2:45brittle, and I don't even want to guess
2:47at how many tokens you probably just
2:49used trying to do this. It's probably a
2:51lot. And then after all that, maybe your
2:54ad has loaded at the top of the page,
2:55pushed all your content down, and your
2:58AI agent couldn't even click the right
2:59place in the end.
3:02So, there's so much to think about, but
3:04before we go into this proposed web
3:06standard, it's worth mentioning that you
3:10can do so much by improving web
3:12foundations first.
3:14So, making your site accessible
3:18for everyone makes it accessible to AI
3:20agents by default.
3:23So, if you improve your semantic HTML,
3:25if you focus on robust accessibility
3:28standards, and if you improve your page
3:31performance, make it load really
3:33quickly, think about those core web
3:35vitals, and then improve really good
3:39user experience flows through your site,
3:42you're already halfway to getting an
3:44agent-ready website.
3:46And it's only once you have those in
3:48place that it makes sense to start
3:49thinking about Web MCP.
3:53So, if you're not already aware, the Web
3:55Model Context Protocol
3:57is a a proposed web standard, and that
4:01gives you the ability to define your
4:03site's capabilities
4:05as structured tools for your AI agents
4:08to use.
4:09And so, you might have heard references
4:11to this as the USB-C
4:13of AI agent interactions.
4:16And that's because it instead of any
4:19agent guessing
4:20what your website does, you're kind of
4:23giving the AI agent a menu of tools that
4:26it can take of tools that it can use and
4:28actions that it can take.
4:31And so, because of this, we're seeing
4:32that WebMCP significantly improves the
4:36performance and the reliability of
4:39agents navigating your website.
4:43So,
4:44let's see it in action.
4:47Hopefully, Gemini treats me well today.
4:50So, this is the maze escape game built
4:53by our team in Chrome DevRel. And just
4:56on the side here, we have a Chrome
4:59extension. Um I'll show you a link to
5:01that afterwards. But, this is the model
5:03context tool inspector. And so, we're
5:06using this
5:08This is a standard Chrome extension
5:10extension that lives in your side panel,
5:12and it lists out all the tools that it
5:15finds on your website. So, at the
5:17moment, it only has one It can only see
5:19one tool, and that's the start maze game
5:21tool.
5:23And then at the bottom down here, it
5:24gives you two options to interact with
5:26the page. So, you can interact via a
5:30prompt like a user would prompt normally
5:32via the AI agent, or you can call tools
5:35directly at the bottom, but we won't be
5:37looking at that one today.
5:40So, this specific maze game
5:42is actually more unique in that you
5:45actually can't browse it by clicking
5:47around the UI. You can only use this
5:50app with the AI tooling.
5:54So, let's start a new maze game here.
5:57You can also choose
5:59your model on the side. So, let's stick
6:02with the Gemini 1.5.
6:04So, you'll see that at the bottom, when
6:07you send a prompt,
6:09it gives you all the information. So,
6:11the new prompt prompt to start a new
6:13maze game,
6:15and the AI agent, Gemini in our case,
6:17has called that tool start game.
6:20The tool itself has returned
6:24this information, and then the AI has
6:28read that and given me this response.
6:30And so, now we have our maze, and you'll
6:32notice that on this page, we have a
6:35bunch of new tools in the scope of this
6:37page, whereas the previous page only had
6:39that one tool. This page, we've got a
6:41bunch of tools to help us navigate the
6:44maze.
6:45So, in this maze, you can move around
6:48with the north, south, east, west
6:50directions. You can look to see where
6:53you are in the maze and which directions
6:56are open.
6:57And then, you can pick up items, drop
7:00items, use items as you navigate this
7:02maze.
7:03And
7:06if I pop in some prompts, I can see that
7:09I can
7:10move down,
7:12then maybe after that,
7:14then right.
7:16The AI agent should use my prompt, match
7:20it to the specific tools, so in this
7:22case, the move tool.
7:24It's taken my direction of down and
7:27right, matched that to the north, south,
7:30east direction, and sent that off to the
7:33tool that we have registered on this
7:36page, and then it's moved it down and
7:38right.
7:40And so, you can do
7:41And because it's an AI agent, it can
7:43understand a whole bunch of different
7:44things. So, I could just say, right,
7:47up,
7:49maybe right again. Let's try that.
7:52And so,
7:54the AI agent has seen that uh sounds for
7:56right, mapped that to the direction, and
7:59then called the move tool with those
8:00information.
8:03And because it's an AI agent, it can
8:04just keep repeating the same tool tool
8:07calls until it thinks that it's done
8:09what needs to be done. So, I could even
8:11say, complete the maze.
8:17And then the AI agent should use all the
8:19tools available to just keep moving
8:21around the maze to pick up items, to use
8:23the items when it needs to because it
8:25has all the information in the tools
8:27available.
8:28This specific prompt was not the most
8:30efficient, so sometimes you'll see it'll
8:32go backwards all the way to the start
8:34and then go forwards again. But, the
8:36more that you refine the prompt, the
8:38better the agent knows how to complete
8:41the maze in the most efficient way. For
8:42example, if you just say, the exit is in
8:45the bottom right corner, it'll be more
8:47efficient in its
8:49instructions to get to that to that
8:51direction.
8:53So, I won't
8:55I won't continue this cuz it can take
8:57quite a while to complete this maze.
8:59But, if we go back to the slides
9:03here,
9:08so this is the model context tool
9:10inspector that I mentioned. So, this is
9:13the web extension that our team in
9:15Chrome DevRel built. The QR code there
9:17is is if you want to see where that is
9:20in the Chrome Web Store, but anyone can
9:22use that and grab it from the Web Store.
9:26But, essentially, WebMCP kind of unlocks
9:28this new approach to using the web where
9:31your users don't have to spend a lot of
9:33time trying to figure out how to use
9:35more complicated sites.
9:37And they can figure out their own
9:39workflow. So, they can choose to browse
9:42your website the normal way for a bit,
9:44then they can hand over control to their
9:46AI agent, and the AI agent takes steps
9:48on their behalf. And then your user can
9:51come in at any time to take control
9:53again and browse your site again the way
9:56they normally would.
9:58And so, that ability to simplify user
10:01journeys and make those user journeys
10:04for people easier has been a large part
10:07of the reason we've seen interest and
10:09excitement in this new standard.
10:12So, I want to pause for a minute just to
10:14address the question that some people
10:16have.
10:17And that's what is the difference
10:19between
10:20Web MCP and MCP.
10:23But you can kind of see them as being
10:24complementary to each other.
10:26So, whereas Web So, whereas MCP enables
10:29AI agents to connect to applications on
10:32the server side, and you'd need to set
10:35up your own service for the agent to
10:37access, and then the agent can access
10:40the information anywhere, anytime, Web
10:43MCP is different in that it's kind of
10:46inspired by MCP. I like to think of it
10:48of as how JavaScript is inspired by
10:51Java.
10:52And that's in short, Web MCP is the
10:55implementation of the tools part of the
10:58MCP.
11:00And so, Web MCP allows engineers to
11:02provide tools to in-browser AI agents.
11:05And it's very specific for the
11:08client-side features.
11:10So, you have to have your browser window
11:12open for Web MCP to work, and then you
11:16can use it to help your agent interact
11:18with the browser.
11:20So, all of the tools live in the
11:21browser.
11:23But you can imagine this for quite a few
11:25different types of use cases.
11:27So, imagine those websites that are
11:29really complicated and have a lot of
11:32steps that a user needs to take,
11:34maybe like booking a flight or filtering
11:38products on a normal shopping website,
11:40or filling in complicated medical forms
11:44or financial forms,
11:46or to trigger fixes that need to be
11:50hidden on a page, that are hidden on a
11:51page.
11:53Or if you're like me, you're just on a
11:55normal shopping site
11:57and you're trying to find the right
12:00black faux leather clutch bag that can
12:03fit your mobile phone in, and instead of
12:06going through all the little filters,
12:08you just want to ask your AI agent to do
12:10it for you.
12:12So, these are a bunch of examples where
12:14any user can ask whatever AI agent they
12:16are using to complete these things on
12:18their behalf. So, the user doesn't have
12:21to manually do this.
12:23And they don't have to fill in each
12:25input, they don't have to select each
12:26checkbox, and using Web MCP in these
12:28cases can
12:30mean that you can make those actions
12:32much easier for users.
12:35So, let's look at the APIs. Web MCP
12:38proposes two approaches for
12:39implementation.
12:41So, we've got the declarative API and
12:43the imperative API. Let's start with the
12:46declarative API.
12:49So, if you have a normal HTML form, you
12:52can just add a few attributes to the
12:54HTML to get this to work. So, we've got
12:57the tool name and tool description here,
12:59and then your browser will automatically
13:01generate a JSON schema
13:04that the agent can use to read
13:07using the form fields as parameters for
13:10the tool. So, here's an example of what
13:12the JSON schema would look like for this
13:14form HTML.
13:16And there are a whole bunch of other
13:18attributes that can be used. So, there's
13:19like um an agent invoked Boolean
13:22attribute, so you can tell
13:24whether your form was filled in by a
13:26agent or if it was filled in by a human.
13:28And there's lots of like more specific
13:31attributes that can be used for things
13:34like that, too.
13:35But essentially, you want to use the
13:36declarative API when you have a standard
13:39form element.
13:41But when you have something more
13:43complicated,
13:44that's where you want to go back to the
13:46imperative API. So, this is where you
13:49can register and define your own custom
13:51tools for when you have more complex,
13:53maybe multi-step UI flows.
13:56So, here is an example. So, at the
13:58bottom, we have this register tool
14:00function.
14:02And when you call register tool with an
14:04object like this,
14:07you need to manually create your own
14:09schema similar to the one that we had in
14:12the declarative API that was generated.
14:15You name your tool and give it the
14:17description, and you want to make sure
14:19you have really descriptive descriptions
14:22that enable the AI agent to know when it
14:25should be calling this tool.
14:28And then, you have the execute block,
14:32which is essentially where you call
14:33normal JavaScript. So, maybe you already
14:35have functions that you're using that
14:37you can call in here, maybe do a light
14:40wrapper.
14:41In this add to do item example, you can
14:44like validate and trim text input, for
14:47example, and then you create the DOM
14:50elements or DOM nodes and add them to
14:52your page. And then, you want to return
14:54some information to the AI agent so it
14:57knows what happened if everything
14:58happened successfully so it can use that
15:00information for its next steps.
15:04So, those are the two APIs. The
15:06imperative API is probably the one
15:08that's most used because people have
15:10more complex UI flows that it wants the
15:13agent to complete.
15:16But if we go back to my Vibe Coded demo,
15:21I have added
15:24a few
15:26tools here.
15:30So, we have a few featured events in the
15:34demo, and then all of the events
15:35available down here, and then you can go
15:38in and
15:40purchase tickets for an on an individual
15:43concert page.
15:48So, I have noticed that this works much
15:52better with Gemini 3.1, so I'm going to
15:53try that one.
15:56If we wanted to buy tickets to one of
15:59these festivals, let's buy tickets
16:03to the Summer Vibes Festival.
16:07Summer Vibes
16:09Festival.
16:11Uh
16:12let's see, two VIP tickets.
16:15Cuz VIP only for me.
16:21Send that prompt.
16:24So, the A the AI saw the tool search
16:27concerts,
16:30which it has called to find the specific
16:32concert via the concert name,
16:35and the tool returned the
16:38information about the concert including
16:40the ID for that concert. Then it has
16:43called the second tool
16:45open concert page with the concert ID,
16:50and that has opened the Summer Vibes
16:51Festival page, and then this new page
16:54has separate tools.
16:55This one here called purchase ticket,
16:58and it's called that in the third tool
17:01call here
17:02with a quantity two and section name,
17:05and then we've got a little notification
17:07saying, "Oh, you've bought your tickets.
17:08You spent £356.
17:12Great, I'll put that on the Google's
17:13credit card."
17:16But you can see as well like in each
17:18step, it's updated the UI
17:20to make sure the user can also see
17:22what's happening. So, you also you
17:23always want to make sure that your UI is
17:26in sync with the tool calls that are
17:27happening.
17:28So, we've got the VIP selected, we've
17:30got the quantity selected, and then in
17:32real life it would go through to some
17:34checkout page. You'll probably want your
17:36user to manually do that step so they
17:39know that they're spending real money.
17:44Let's hit back.
17:46So, if you're interested in trying this
17:49out, it's probably worth just
17:50understanding the status of where we're
17:52at with Web MCP. So, we're still in
17:55early preview stage. This API is very
17:58experimental. It will change. It has
18:01been changing over the past few weeks.
18:03And so, the code that I've shown might
18:06be different next week.
18:08But that's because we want people to try
18:10it out. We want feedback. We want to
18:12know the best way to use this API.
18:15And if you're interested in doing that,
18:17these are a few steps to get set up.
18:21So,
18:22Web MCP is enabled in Chrome version 146
18:26upwards. I recommend using Chrome Canary
18:30just so you can
18:31keep things separate. Otherwise, in the
18:33normal Chrome, you have to enable
18:34experimental flags. And you might not
18:36want to do that on your normal
18:38your normal browser.
18:40Once you have Chrome Canary, you'll need
18:43to enable the Web MCP testing flag with
18:47by putting this flag in your URL.
18:51And then install the Model Context Tool
18:54Inspector extension
18:56from the Chrome Web Store that I
18:57mentioned earlier. Just so you can play
18:59around and debug and see what your tools
19:01are doing.
19:03Then, uh
19:05these are the two resources that I
19:07recommend taking a look at. So, this is
19:09our main blog post
19:11that gives you information on the early
19:13preview program for Web MCP. So, if you
19:16sign up there, you get access to all of
19:18our initial documentation.
19:21And you get extra information about the
19:24program, information on best practices,
19:27implement all the extra implementation
19:30details that you you might want to use
19:32while you're testing it out, and all of
19:34the API information.
19:36That is the first one, and the second
19:38one is the GitHub repository of all the
19:41tools. So, we've got the inspector tool
19:44here. We've got all the demos, so you
19:46can see the maze demo code is live there
19:48for you can to play around with. There's
19:50about six, seven different demos you can
19:52try out, and there's an eval CLI tool
19:55you can use to help you start testing
19:59your own sites in the Web MCP tools on
20:01your own sites today.
20:04So,
20:06I mentioned we're still in early
20:07preview. That's cuz and we're looking
20:09for feedback.
20:10So, try it out. Let us know
20:13what you think, if you have any friction
20:15points, if you find any bugs. We'd love
20:19to know that so we can keep iterating on
20:20this API,
20:22and eventually move onto the next stage
20:24and start getting Web MCP in front of
20:26more users.
20:29But to wrap up,
20:31AI agents are already using the web.
20:36We don't have to settle for these
20:38token-heavy,
20:40brittle
20:42screen-scraping processes that we have
20:45today.
20:46Instead, we can use Web MCP tools to
20:50turn every website into a
20:52high-performance API for agents, and at
20:55the same time build incredible user
20:59experiences for the users of our sites.
21:02So, now that you have the tools and the
21:03context, please give it a go,
21:06and try making your agent try making
21:09your website agent ready today.
21:11Thank you very much.