979: WebMCP: New Standard to Expose Your Apps to AI  ## Document Notes ## Highlights - **WebMCP Publishes Tools For AI** - WebMCP lets websites publish structured tools so AIs can call them directly instead of simulating clicks. - That exposes app functionality with input/output schemas for fast, reliable AI interactions. Transcript: Wes Bos Now, if you have an application and you want to now surface your application's functionality to some sort of AI, you have kind of a couple options, right? Like one option is you can just build AI right into your application and your users can do that and you sort of like foot the bill for that. Another way is you can create a MCP server, which surfaces all of the tools. And then the AI chat will simply just talk back and forth via the MCP server, adding, removing and whatever. And then we also learned we had Ken C. Dodds on the other day where we have MCP UI or now it's called MCP apps, where you'll be able to actually return and generate like maybe you want to embed components and like stylize structure Right into a chat. This is different than that because the WebMCP essentially says, OK, I have a website, I have an app and it does these things. And if someone were to to visit my my, or if an AI were to programmatically open up a browser, and it wants to use your website, right now you kind of have a couple options, which is like, You can set up Playwright, and Playwright will either like dump the HTML or take the accessibility tree, or take screenshots of the UI. And then it will just go ahead and like use the website as if you were a human, click on buttons and whatnot. And in my experience, that's decent, but it's extremely slow to actually use because it has to like parse all of it, figure out which buttons it should press, et cetera, et cetera. So the solution to that is for your website to explicitly publish. Are the things that I can do, right? So I have a grocery list here, and I have several different tools, right? You have add item, get items, delete item, delete store, create store, get items by store, move item, all of these things. And that's not any different than like an MCP server that you would normally just publish these things. And the way that that works is that you would publish these tools, and then you also define what the input and output schemas are. Meaning that like, you say, hey, AI, here's a tool called add item. Here's a description of what it does. And then here's the input and output schemas. This is like, if you wish to call my tool, you must provide me which item you want to add in which store you would like to add it to. And then I will then return to you the following information, right? ([Time 0:01:38](https://share.snipd.com/snip/391f46cf-a39f-4044-b599-ff6466108579)) - **Demo: AI Edits Grocery App Live** - Wes demos adding bananas to Costco, moving them to Whole Foods, and adding a recipe shopping list via an AI using WebMCP. - The demo shows the AI parsing natural language and calling site tools to modify the grocery app directly. Transcript: Wes Bos So Chrome has published a little Chrome extension just as one example of what it might look like to interact with it. And I can simply just go to it and say, I load the page up and it says, all right, I found all of the tools. And then I can, I hooked it up to Gemini Flash 2.5 Flash. And I just say, please add bananas to Costco shopping list. Once that's done, show me everything on my grocery list. Oh, and can you remove, then move bananas from Costco to Whole Foods. And then I just go ahead and send it to the AI and it will parse what I need to do. Look at the tools that has available to itself. And you'll see that it added bananas to Costco. And then it went ahead and moved it to the Whole Foods. I can do something like I might go ahead and say something like, please add all items for chicken noodle soup to Whole Foods. Right. So it's going to go ahead and parse that. ([Time 0:05:20](https://share.snipd.com/snip/bbcf405d-7cc1-4da5-98e6-205c70819eea)) - **Two Simple Ways To Declare Tools** - WebMCP exposes tools either imperatively via window.navigator registration or declaratively via HTML form attributes. - Forms can let the spec infer schemas, making adoption extremely simple for existing sites. Transcript: Wes Bos And this is the documentation for WebMCP. Essentially, what you do is as part of publishing your website, you simply just publish what the tools are. And you can do that in two different ways. You can imperatively declare them with JavaScript. So it's just window.navigator And you can go ahead and register the tool with a description, the input, as well as the output data that you get, right? However, the other way that you can execute or sort of declare what your tools are is with form elements, which I thought this is absolutely genius. Because if your website already has like forms, or if you just want to simply declaratively publish what something can do, there's just a couple different properties that you can add. So tool name, tool description, tool param title, and tool param description. And then it will just simply just parse out the HTML elements and figure out, okay, these are the things. ([Time 0:06:58](https://share.snipd.com/snip/90dd50c8-bf7b-436c-acf1-42251df690d4)) - **Offer Both UI And AI Tooling** - Keep the full website UI available while offering AI tool endpoints so users can choose richer experiences. - Use natural language tooling for tasks like bulk adds or categorization that are awkward in traditional UIs. Transcript: Wes Bos I really enjoy because like we had like Kenzie Dodds on and he says, yeah, like everything's going to be like a UI widget that's either embedded into your chat or he talked about a several Different ways to do it. And I don't know that every single thing is going to want to just be a UI widget. Especially like you look at like booking a flight or whatever. I don't think that these people that sell flights are simply want to be distilled down into like just like a utility, like you're paying a water or electrical bill, you know, like book A flight. They want to provide you with a good experience. They want to upsell you. They want to say, oh, and not that those things can't be done inside of a chat interface, but sometimes people want to actually visit the website and use that UI. And if I'm able to now just use the website as I always have been, right? Like everything out there right now is simply just an app in a website. But then I can also interact with it with my natural language, which is way better. Because if I'm adding chicken noodle soup here, I'm not adding five or six different items and dragging them into the thing. It's way faster for me just to type, could you add X, Y, and Z? Or if I'm in my accounting software, I might just paste six or seven transactions from a credit card and say, hey, can you add these and categorize them all? That natural language is the best. ([Time 0:08:58](https://share.snipd.com/snip/e19dc423-ac78-4965-9ea9-6154834239c8)) - **Speed And Token Efficiency** - WebMCP is far faster and more token-efficient than browser-automation approaches like Playwright or screenshot parsing. - It sends compact tool calls instead of large DOM or screenshot data, reducing latency and cost. Transcript: Wes Bos Other thing is that it's much more token efficient, right? If you're paying by the token for these types of things, it's simply just sending the tool calls along with the possible options to the AI rather than having to send the entire DOM tree Or a whole screenshot and then have to go through that screenshot and figure out where the buttons are to click. Yeah. And then finally, this seems ripe for Rife, Ripe, whatever that is, for frameworks to implement this, right? You already have all of this data as part of your application, right? You already have your schemas. You already have your validation. ([Time 0:11:51](https://share.snipd.com/snip/cdce1dac-2d1c-40a7-b0e8-35249eb96841)) - **Add WebMCP To Frameworks** - Framework authors should add WebMCP support since forms, schemas, and validation already exist in apps. - Publishing tools with minimal changes gets sites ready for AI without extra servers or MCP reimplementation. Transcript: Wes Bos You already have all of this data as part of your application, right? You already have your schemas. You already have your validation. You already have your UI later for mucking up what your forms are going to be or or whatever simply just taking one more step and publishing those things that you can do via in in your HTML Website is so easy and then this doesn't require somebody else to now spin up a second MCP server you're not hosting anything more than than just your website yeah now wow what a neat API. Scott Tolinski Yeah, no, I just, I love finding out about stuff like this and then immediately understanding the utility as opposed to being like, oh, I have no idea when I would use this or how, yeah. Wes Bos A couple of questions I have, and this is like just released yesterday. I'm part of the early access. So obviously this is very early and they're trying to figure out what the spec will be. But some questions I have is like, will cross apps be possible? Because one thing Kent said when we talked about MCPUI is he's like, yeah, like people don't want to just like go to one website and do their thing. Like you want you want to say like, oh, grocery lists, go look at my calendar and see when that dinner is. And then if I have any dinners planned this week, add it to my grid. You want things to interact with each other. So will cross application stuff be possible? And I assume so, because this like little sidebar here in Chrome, this is not like the end UI for this. This is just for you to be able to test it out and debug it. Like what I assume will happen is that you will be using some sort of chat application or whatever. And very much like the MCPY, it will simply just visit the website, discover the tools, see that you're logged in, and then it can visit several websites at a time and sort of move data Between the two of them. Yeah. Scott Tolinski Wow. Cool. Yeah. Wes Bos Headless. It probably will be headless. I assume it will be headless at some point. And then last thing I have here is just like my take. I think that this is a great way for the web to adapt to AI. Right. Because I don't know that you're going to get every single person under the sun to publish an MCP server and have it make an app with ChatGPT and make it work? We might, we saw it. It happened with iPhone apps, right? Everybody has an iPhone app now. So, but I think that this is a very good bridge to that space where somebody can simply just go at a couple properties to forms on their HTML or publish whatever tools they want to be available In their JavaScript bundles. ([Time 0:12:19](https://share.snipd.com/snip/4f477df7-a3b2-4096-853b-39908fb6d850)) - **Cross-App Workflows Are Likely** - WebMCP should support cross-application workflows where an AI visits multiple sites and transfers data between them. - That enables richer automations like combining calendar events with grocery lists across sites. Transcript: Wes Bos But some questions I have is like, will cross apps be possible? Because one thing Kent said when we talked about MCPUI is he's like, yeah, like people don't want to just like go to one website and do their thing. Like you want you want to say like, oh, grocery lists, go look at my calendar and see when that dinner is. And then if I have any dinners planned this week, add it to my grid. You want things to interact with each other. So will cross application stuff be possible? And I assume so, because this like little sidebar here in Chrome, this is not like the end UI for this. This is just for you to be able to test it out and debug it. Like what I assume will happen is that you will be using some sort of chat application or whatever. And very much like the MCPY, it will simply just visit the website, discover the tools, see that you're logged in, and then it can visit several websites at a time and sort of move data Between the two of them. ([Time 0:13:11](https://share.snipd.com/snip/78b1bd3b-5b83-412e-9f67-0492d2da6ea0)) - **WebMCP As A Middle Path** - Big platforms may resist open AI-accessible APIs the way they limited public APIs in the past. - WebMCP offers a middle path for sites that want AI integration without exposing full public APIs. Transcript: Wes Bos Like, I don't know that every website is going to want to like surface these types of things. We saw what happened with APIs, like very early on, every website ever had an API. And anyone could go and use that API for free. Everybody was building. There was like 100 different Twitter clients. We were making mashups. Everything was totally fine. And then very slowly but surely, all of these apps were like, you know what? API access sucks. We want people to come to our site reddit api totally gone um the twitter api went away and it was like forty thousand dollars a month or something now they they just released the ability To pay as you go and it's like 200 uh requests for a dollar it's still extremely expensive instagram impossible to to interact with it via an api right? All of these big companies don't want you just being like, oh, sure. Would you like to use us as a utility? Just interact with us this way. ([Time 0:15:04](https://share.snipd.com/snip/905d614c-3b5a-4293-b0dd-f4f4a9ca2b48))