[183.44s] be able to do some other cool stuff as
[185.12s] well. The input schema for the tool
[188.159s] only one tool on this page, the search
[191.44s] to use this. You can either give custom
[193.28s] input arguments that the AI model has to
[195.599s] fill out or you can set your Gemini API
[198.159s] key, give a user prompt in simple
[199.92s] English, and the page will be controlled
[201.68s] according to that. So, right now it has
[203.28s] these default inputs. We swapped them
[205.2s] out and it actually searched for flights
[207.12s] and got a bunch of results. I went back
[208.879s] and this time the web MCP travel site
[211.12s] had four tools available where three of
[213.04s] them are now filters that can be
[214.64s] applied. The input arguments for the
[216.239s] page had also changed. I added another
[218.0s] argument and it gave us a notification
[219.84s] that the filter settings were updated.
[221.68s] No flights matched those filter
[223.2s] settings, but all of them were applied.
[224.959s] We switched between Zen browser and
[230.56s] an open protocol that any browser could
[236.4s] release the standard so that everyone
[239.68s] official tooling goes right now. No
[241.439s] documentation, only two demos and it
[243.599s] only works on Chrome Canary and you
[248.72s] browser agents. So we found this custom
[250.799s] web MCP bridge that you can install on
[253.2s] your system and it gives you an MCP and
[255.599s] an extension as well. This is what
[257.199s] allows claude code to use web MCP and
[260.0s] navigate and use the tools that any
[261.919s] website offers to show how sites
[265.6s] with the simpler approach in the
[267.52s] declarative API which you saw with the
[269.68s] HTML form. All you really have to do is
[271.919s] declare three things inside the HTML
[274.08s] form. The tool name, tool description,
[277.759s] need to dive deep into them. You just
[279.44s] need to make sure your agent adds them
[280.96s] in. We had two guides made reverse
[282.96s] engineered from the demos in the web MCP
[285.28s] repo and we gave Claude code access to
[287.52s] those. Now during that process we
[289.28s] actually ran into some common problems
[291.04s] and had to fix these guides along the
[292.8s] way. Both of them are available in AIABS
[295.28s] Pro which is our community where you get
[297.12s] ready to use templates. You can plug
[298.96s] directly into your projects for this
[300.56s] video and all previous ones. The main
[302.4s] teaching is all here in the video. But
[304.0s] if you want the actual files, the links
[305.84s] in the description. If your agent adds
[307.52s] in these declarations, the rest is up to
[309.44s] the browser which reads them from the
[311.12s] HTML. The second way was the imperative
[314.0s] API for cases where you need more
[316.08s] complex interactions and JavaScript
[318.0s] execution. We had a Nex.js app
[320.0s] initialized gave claude code the next.js
[322.56s] guide and that was all it needed to
[324.32s] implement it. In React apps, it creates
[326.24s] a new file in the library folder where
[328.16s] it declares all the tools the site
[330.0s] needs. These are all the functions and
[331.919s] these are their definitions. But since
[333.6s] these web apps can become so big and
[335.6s] even have potentially more than 100
[337.6s] tools, we get the same problem we get in
[339.44s] clawed code where the context just
[341.12s] overloads everything and breaks the
[342.8s] whole thing. So instead of loading all
[346.4s] load only the tools a single page has.
[348.639s] This concept is called contextual
[350.32s] loading. So this is the next JS app we
[355.28s] demo app with the backend implemented.
[359.12s] this site only has three tools
[360.72s] available. I went into the cart page and
[362.88s] this time we had four tools and the
[364.639s] names had also changed. The availability
[366.56s] of tools changes based on the page
[369.759s] registration functions come in. Whenever
[371.68s] you land on a page like the homepage, it
[373.84s] runs the register home tools function
[375.759s] and when you leave, it runs unregister
[377.68s] home tools based on which tools belong
[379.759s] to that page. It just registers and then
[384.0s] depend on the browser alone in this
[385.6s] case, but the code also handles the
[389.199s] WebMCP with a browser agent, which is
[391.44s] what Google wants and what each browser
[394.96s] actually using a bridge that connects
[396.639s] Claude Code to Wem. And this is how we
[399.12s] control websites. And by the way, if you