979: WebMCP: New Standard to Expose Your Apps to AI

Scott and Wes unpack WebMCP, a new standard that lets AI interact with websites through structured tools instead of slow, bot-style clicking. They demo it, debate imperative vs declarative APIs, and share their hottest take: this might be the web’s real AI moment. Show Notes 00:00 Welcome to Syntax! 00:16 Introduction to WebMCP 01:07 Understanding WebMCP Functionality. 03:06 Interacting with AI through WebMCP. 06:49 WebMCP browser integration. 08:25 Brought to you by Sentry.io. 08:49 Benefits of WebMCP. 11:51 Token efficiency. 13:02 My biggest questions. 14:13 My take on this tech. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:06Wes Bos?

  Welcome to Syntax. Today, we're talking about Web MCP. This thing is brand new. It's a new specification and we're going to explain what it is. We're going to show a demo and I got a couple of hot takes about it. But essentially, Web MCP is surfacing tools and ways to interact with your website via your website itself. So this is different than MCP servers and this is different than MCP UI and MCP apps. It's related, it works in the same way, but this is a new way to surface functionality simply just through your website without having to have additional servers. So let's get on into it. My name is Wes. With me as always is Scott. How are you doing, Scott?

• 0:44Scott Tolinski?

  Hey, I'm doing good. How are you doing, man? Yeah, I'm interested to learn about this because I hear Web MCP. My first thing goes to Chrome Dev Tools MCP or Agent Browser or those types of things.

• 0:55Wes Bos?

  Yes.

• 0:55Scott Tolinski?

  I'm curious to know.

• 0:56Wes Bos?

  Not that at all.

• 0:58Scott Tolinski?

  Yeah, so that in itself to me is a revelation here. So I'm excited to learn what this thing is and how people can take advantage of it.

• 1:06Wes Bos?

  Yes. All right, so all of this in context is going to be, I built a little app called a grocery app, right? And it's just a very simple, kind of like a Kanban where you have each of your grocery stores that you might want to go to. And then under each of those grocery stores, you can add, remove and check off food items that you want to do, right? So that's pretty standard. You're going to have, if you're building out an app like this, you're going to have something like add a store, add an item, reorder items, rename, delete item, like check off, you know, like all the standard kind of to do list application stuff. 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 of options, right?

• 1:50Wes Bos?

  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 Kenzie Dawes 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 stylized structure right into a chat. This is different than that because the web MCP essentially says, "Okay, I have a website, I have an app, and it does these things. And if someone were to visit my website,

• 2:32Wes Bos?

  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 of options, which is like, you can set up Playwright, and Playwright will either dump the HTML or take the accessibility tree, or take screenshots of the UI, and then it will just go ahead and use the website as if you were a human, or click on buttons and whatnot. And in my experience, that's decent, but it's extremely slow to actually use because it has to parse all of it, figure out which buttons it should press, etc., etc. So the solution to that is for your website to explicitly publish, "These are the things that I can do." Right? So I have a grocery list here,

• 3:16Wes Bos?

  and I have several different tools. 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 you say, "Hey, AI, here's a tool called add item, here's a description of what it does, and then here is 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 and which store you would like to add it to, and then I will then return to you

• 4:01Wes Bos?

  the following information, right? It's a nice, structured way to talk back and forth with an AI, right?

• 4:10Scott Tolinski?

  Interesting. So I've been wondering about this in regards to some projects that I've been working on. I was thinking about working on an API for my AI to consume for my habit tracker, which honestly, this feels so similar to your to-do list, your grocery list here. So this seems like that would be a better fit for that task than creating just what, an API, an API key, and then telling the AI how to use the API? Or would you do both? You would create the API, and then you'd create the MCP to communicate with that API?

• 4:45Wes Bos?

  It depends on how you you want people to interface with it. But if I'm looking at the web right now, there are millions of applications out there. And in order for an AI to interact with it right now, you either have to like publish your own MCP server and essentially to like re-implement a lot of your your logic as an MCP server. What this does is it allows you to imperatively or declaratively just publish as part of your website, either in the HTML or in the JavaScript, and say, these are the tools that you can then use when you visit it. So watch this example. 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,

• 5:29Wes Bos?

  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 it 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. It's going to figure out, okay, what do I need for chicken noodle soup? And boom, it went ahead

• 6:14Wes Bos?

  and just added chicken broth, chicken breasts, egg noodles, carrots, celery, and onion. And I can say like, mark off anything with chicken. I already have it. There we go. I spelled chicken wrong. Go ahead and send that off. And it should, there we go. It marked off chicken breast and chicken broth.

• 6:31Scott Tolinski?

  Can I just say, Dan, one of the benefits of AI is that like, I can spell things wrong. And it's just like, whatever, doesn't care.

• 6:40Wes Bos?

  It knows what you mean. Yeah, that's actually really fantastic.

• 6:43Scott Tolinski?

  Yeah.

• 6:44Wes Bos?

  So that is just like, kind of like a dead simple example of how this works. And the way that the browser is able to know what the tools are is there, there's kind of two ways to do it. And this is the, the documentation for web MCP. 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, in two different ways. You can imperatively declare them with JavaScript. It's so it's, it's just window dot navigator dot model context dot register tool. And you can go ahead and register the tool with a description, the input and the end, as well as the, the output data that you get, right?

• 7:29Wes Bos?

  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, 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 of 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. And in this case, you don't even need to publish the schema because it can infer the schema from your form, right?

• 8:12Scott Tolinski?

  Yeah.

• 8:13Wes Bos?

  Which is, which is, I think is, is awesome that you can, you can do it in both ways.

• 8:18Scott Tolinski?

  Wow, that's cool.

• 8:20Wes Bos?

  Yeah.

• 8:20Scott Tolinski?

  Yeah, I love that this, this meeting of worlds here. That's neat. And if you want to see all of the errors in your application, you'll want to check out Sentry at sentry.io forward slash syntax. You don't want a production application out there that, well, you have no visibility into in case something is blowing up and you might not even know it. So head on over to sentry.io forward slash syntax. Again, we've been using this tool for a long time and it totally rules. All right.

• 8:49Wes Bos?

  So let's talk about a couple of benefits, a couple of questions, and then a couple of takes I have here. So the first one is this sort of mixed UI approach I really enjoy because like we had like Kenzie Dodd's 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 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, you look at like booking a flight or whatever. I don't think that these people that sell flights are simply want, want to be distilled down into like, just like a utility,

• 9:31Wes Bos?

  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, 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, 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, hey, could you add X, Y, and Z?

• 10:13Wes Bos?

  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?

• 10:23Wes Bos?

  That natural language is the best.

• 10:25Scott Tolinski?

  You could get further with that. If you have historical grocery lists, you could say, add all of the vegetables from last week to this week, you know? And that's something that would be harder to do with an actual UI because you're getting into the natural language of it. If it wasn't a natural language, you'd have to be building in a whole tagging system for all of the different types of things. You'd be getting into like so many things to be able to even just get that piece of functionality. I think that's really neat.

• 10:54Wes Bos?

  The other thing is that like this is a great, this is way faster than like I've used several of these like AI interacting your browsers. And they work great when you simply just like let them rip and then you can walk away and do something else. But like if you're just sitting there waiting for it to do it because you need it, it's so slow and there's no chance that like. It was so painful using the chat GPT browser, whatever that was called. What is it called? I don't even know what it was called. It was, it was, it was brutally slow and I've used many of them in the past and. It is just, it's just way too slow right now. So being able to explicitly do it.

• 11:34Wes Bos?

  Rather than it try to infer it from your HTML is way better. Like, watch how fast this is. Add a new store, a drugstore, add lip balm, send. One, two, three, four, five, five seconds and it added a new store and added lip balm to it, right? Wow, that's pretty fast.

• 11:50Scott Tolinski?

  That's pretty cool.

• 11:51Wes Bos?

  The other thing is that it's like, it's much more token efficient, right? If you're, 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 like DOM tree or like a whole screenshot and then have to. Go through that screenshot and figure out where the buttons are to click.

• 12:10Scott Tolinski?

  Yeah.

• 12:11Wes Bos?

  Um, and then finally, like this seems just, this seems right for Rife, Ripe, whatever that is for. Frameworks to implement this, right? Like 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, your UI lighter for, 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 um, 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.

• 12:48Scott Tolinski?

  Yeah.

• 12:49Wes Bos?

  Now.

• 12:49Scott Tolinski?

  Well, what, what a neat API. Yeah, no, I, I just, uh. 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.

• 13:01Wes Bos?

  Couple of questions I have and, and this is, 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? Cause one thing Kent said when we talked about MCP UI. 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, ah. 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 garden. You know, you want things to interact with each other. So will cross application stuff be possible? And, and I, I assume so, because this like little sidebar here in Chrome, this is not like the end UI for this.

• 13:45Wes Bos?

  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 MCP, why 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.

• 14:07Scott Tolinski?

  Yeah. Wow. Cool.

• 14:09Wes Bos?

  Yeah. 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, my take. And 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 chat GPT and make it work. We might, we saw it. It happened with iPhone apps, right? Every, 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 add a couple of properties to forms on their HTML or, or publish whatever tools they want to be available in their JavaScript bundles. And then your website is just, it's, it's ready already, right?

• 14:51Wes Bos?

  It's similar to like responsive design where like, oh, I just need to change a little bit of things. And now my, my website is ready for mobile. And then the other thing is like APIs, 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 a hundred different Twitter clients, you know, we were making mashups. Everything was, 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.

• 15:36Wes Bos?

  The Twitter API went away and it was like $40,000 a month or something. Now, they just released the ability to pay as you go. And it's like 200 requests for a dollar. Still extremely expensive. Instagram, impossible to interact with it via an API, right? They, 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. They want you on their platform, using it in their way. So they can sell you stuff and make the most money. So I don't know if this is going to be the total end game for all of this stuff. But I certainly think for people who do want AI to interact with their, their applications, this is a great way forward.

• 16:18Scott Tolinski?

  Yeah, I think this is neat. I'm stoked to dive in more. And thank you as always, Wes. This is a great little explainer. Yeah.

• 16:25Wes Bos?

  That's it. You can sign, if you want to test it yourself, you can sign up for the Web MCP early preview. I'll leave links in the description below, but that's it.

• 16:33Scott Tolinski?

  Check. Peace. Peace.