WebMCP Is A Free AI In Your App

I've been doing a lot with WebMCP lately, and I know I've done a video on it in the past, but I really, I wanna encourage you to use WebMCP. It is a fantastic standard that allows you to really just augment the functionality of your sites without actually doing all that much. If your site has a basic model view controller type pattern set up already where you have just the data in a store and then something is rendering it. That could be a Redux/React or Zustand/React or there's a thousand different variations. You probably got this already. You can just go and take that store and connect it to WebMCP Really simply. Let me give you a practical example of this.

In my garage, I've been working on setting up my shop and getting it all a lot more organized. And to do that, I've been building out using 3D, printing this system called Multiboard. That's what all these little hexagons are about. And the idea is that there's a whole ecosystem of stuff that you can just get off the shelf for Multiboard. And if it's not off the shelf. Then you can just go and create it on the fly using one of these parametric builders here. Now what this does actually render OpenSCAD code and OpenSCAD code can create 3D models. This is all the code for this particular model. And then you get all these options like internal dimensions, and this is where. I go and take out my calipers, and then whatever device I want to go and, you know, measure and I get the measurements and all this, and then I, I punch them into these dimensions here and I get a box that I can then print and then put my tape measure in this case into, and, yeah, there you go. It's super easy. The only problem is it. The interface kind of sucks and there's no WebMCP, so there's no way that I can just chat with an AI and have it go and set up the parameters for me. So I actually went over and one evening just had Claude go and kind of rebuild this. And for the OpenSCAD code work, you've got the code over here. This is exactly the same code as we had over in the other example. And for running OpenSCAD, we just use WASM for that. That returns us a mesh and then we use three JS to render it. What I really wanted to do was make it WebMCP compatible. Let me show you how that works. Over here I've got the MCP-B extension. I've just added that into the browser. And then you can see that I've added a bunch of tools from localhost:3000. Now, this actually has a lot of tools already that folks are using to just go and automate their browsers using MCP. But the stuff that I'm actually interested in is just augmenting the localhost, in this case, this particular design, with some really cool tools. For example, list parameters get parameters and set parameters. Those are the ones that are actually going to adjust the model. I can say, for example. Set the height to 81 millimeters and close off that front panel. I don't want the front panel exposed, so it's gonna go enlist all the parameters. Can I go and disable the front cutout? And then because I've got the MVC paradigm going, it automatically does the re-render. I can also go and just talk to it so I can hold the calipers in my hand and said, you know, yeah, set the height to such and blah, blah, and it would just work. How freaking cool is that? Of course all the code is available to you for free in GitHub and no link in the description right down below. And the rest of this video, I'm just gonna give you a quick walkthrough of how it all works. Let's get right into it. The first place we're gonna look is over here in src/mcp and into register, and

this is where we do our registration of all the tools that we have. We have a function here called registerWebMcpTools that we call on the start of the application. Then we poly fill the WebMCP context if it's not available. We grab model context from Navigator and we use that to register all these tools and we register the name of the tool, the description of the tool. The description is really where the AI is gonna go and try and figure out is this the right tool for me to use? And then it's gonna use the inputSchema to figure out; How do I actually send the right arguments to that tool? The execute function is what you think it is. Basically, if the AI asks us to do something with this tool, then it's up to us to go and execute on it. So what does that actually look like. If we go over to tools, we can see that one of my tools is just set parameter. Now set parameter is gonna take an individual property, say the height or the width or whatever, and then go and set that to a specific value. Now most of the code here is just trying to validate the input that the AI is sending us. And if it's not valid, then sending back a response text that actually gives the AI some indication of what it did wrong and what it might do better.

But once we finally get the actual value, then we go over here to projectActions. setOverride, and that's where we go and set the override value for this particular parameter. setOverride then talks to projectStore. So what's projectStore? Well, projectStore is a TanStack store. Yeah. That has the state of the project. And what we're gonna do is just go and call the setState function on that. We're gonna go get our overrides and we're gonna then going to go and add on to our history in this case with the overrides. At the end of the day, really simple. It's just the UI has TanStack Store and then when that TanStack Store is changed, then we automatically do a re-render. We run that OpenSCAD code through WASM, give it the values that we want. And then we get back a mesh and we use ThreeJS to go and render it. And that's why I think WebMCP is so cool. You can see how easy it is to just take an existing, fully featured system that is valuable inherently on its own. This ability to go and take a model and then parameterize it and get an STL output from it and send it to my printer and do all that. And just with a little bit of tool connections and some validation, you can go and connect that to an AI. You don't have to host the AI. All your site needs to do is just open up a few of these WebMCP hooks, and it is just immediately more valuable to the customer.

Alright, if you have any questions or comments, be sure to put that in the comment section right down below and I'll do my best to answer your questions. Honestly, if you end up using this example in particular, I would love to hear from you kind of in this whole multiboard thing and I'd just love to hear what people are doing with it. Some great ideas are fantastic in that space. 'cause to be honest, it just, it's mind blowingly huge. But in the meantime, if you like this video, hit that like button. If you really like the video, hit the subscribe button. Click on that bell, and you'll be notified. The next time a new Blue Collar Coder comes out. I gotta go with that. Take.