# WebMCP is MCP for Single Page Apps!

## Метаданные

- **Канал:** Jack Herrington
- **YouTube:** https://www.youtube.com/watch?v=IAfrzel524s
- **Источник:** https://ekstraktznaniy.ru/video/22792

## Транскрипт

### Segment 1 (00:00 - 05:00) []

There's a new version of Model Context Protocol or MCP out that's called WebMCP, and it's gonna help you enable your Single Page Applications to become part of the AI ecosystem. Let's give it a try. So here I have a very simple TanStack Start application it. It is actually a SPA. All this code is available to you for free in a GitHub link in the description right down below. So of course, we can just go and add our items to our cart if we want, but let's just say that we want to go and be agentic about it. We can bring up this MCP-B extension that's free on the Google Chrome store. And what it's gonna do is actually polyfill the standard for WebMCP into the browser so you can have it today. Our page is actually registered 3 MCP tools. We can actually see that over here. You've got get menu, add to cart and get cart. Now why There's six of 'em? I don't know. I think it's just a bug. I think the green ones are the ones that are actually active right now, so let's just give it a try. I I'm gonna ask it for a steak in pretzel combo. Let's see what it comes up with. So it's calling a tool that's actually on the page itself called Get Menu. It's gotten the menu back as data instead of having to actually scrape the page like so many of these AI extensions do. And it's given us a recommendation. Apparently we wanna a classic wiz or a provolone steak. Let's say I'm really hungry. I want to add all of that to the cart. And we can see we're adding all those items to the cart and they automatically show up. Alright, now we've got a full cart and we owe Phillies finest. 72 bucks. So let me go show you how this actually works in the code. so this is a React app, but I'm using a Zustand (German pronunciation) or a Zustand, if you prefer store to manage the state of the app. So it's kind of a model view controller app where the model is Zustand. Done. The store state has all the usuals. Remove from cart, add to cart. Here are the different menu items. Then we create our useStore hook using the Zustand create method, and it just does all of the usual stuff that you would have in a cart system. This is an in-memory card, of course. Now, to use that in our components, we just use that useStore hook. That's the way that Zustand works and all of that is just native. So now how do we connect it to WebMCP? Well if you go and check out the webmcp module, we've got this registerWebMCPTools, and this happens on the startup on the client. So then it looks for navigator. modelContext that will tell you whether you actually have WebMCP in your browser or you have that WebMCP polyfill. If you've got it, then you can use registerTool just like you do with any other MCP system. You give it the name of the tool. In this case get_menu, the description, the input schema, that's a JSON schema. So we look up here, you see the getMenuSchema has all the properties associated with category of food. Do you want cheese, steak sides, or drinks? and then you give it an execute function that can be sync, that can be async, however you wanna play it. And then you return your payload in MCP form. So you're gonna give it an object. That object contains content. And within that you're gonna give it basically the message content for the message stream of the LLM. So in this case, we're gonna have a type of text and then we're gonna give it text as a JSON stringified output of those items. And to do mutations like add to cart here, it's just the same thing. You're gonna go and get the state from that Zustand store, or Redux or however you wanna play your state inside your React app. And then you go and make those calls, like in this case we call addToCart on the store. Once we know what the LLM wants us to add to the cart, which is what the user wanted in this case was a whole bunch of stuff from Philly's Finest. Now in the case of MCP-B, the fun doesn't end there. So Web MCP-B is actually its own little thing. We can go over into settings. And these settings are actually quite extensive, but down here in the settings you'll get an MCP URL. And the really cool thing you can do with that is you can actually add it to Claude Desktop or anything that will handle MCP. So I've taken that URL and I've added it as a connector to my Claude. Now we can see down here the connector to MCPB is on. Awesome. Let's see. We want something with mushrooms from Philly's Finest. Now we say it, make the call. Excellent. It's got my mushroom Swiss. Let's add that to my cart. I'll bring up the card over here so we can see it. And there we go. That is so amazingly cool. We've got Claude on the desktop talking to a cloud server from MCP-B, which is in turn talking to the Chrome extension for page to run those functions, which are WebMCP registered. So like a lot of the stuff that I present on this channel, what you're seeing now is probably six months ahead of when this thing actually gets out into the real world, like I did with MCP back before it became the super big thing that it is today. So I gotta tell you, if you've got a spa, you've got an application that you think

### Segment 2 (05:00 - 05:00) [5:00]

would do well with this, I would try adding this into it and then start to see. If your browsers start picking it up, it's really cool. And as you can see, there's really no extra overhead if there is no WebMCP in the browser. Alright, we'll be sure to go and check out that free code and the link in the description right down below. And in the meantime if you have any questions or comments, sure to put that in the comments section. If you like the video, hit the like button and if you really like the video, hit the subscribe button and click on that bell and be notified the next time new Blue Collar Coder comes out.