Use MCP-UI with nanobot.ai

00:00 Hi, I want to show you the tools that you can use to test out MCPUI as of this recording. What tools support MCPUI and support them very well? Goose is a project from Block. It's an agent that can do a whole lot of things running locally on your machine, and it can connect to MCP servers, and they call them extensions. It's awesome.

00:22 And it supports MCPUI. Doesn't support all of MCPUI, but most of it. And it's pretty good. So If you want to, you can follow the instructions on getting set up with Goose. You're going to need to have an OpenAI key or a Anthropic key.

00:39 Or you can even use local models. And I have had some success running local models and working with tool calling. They're not the greatest, but it can work depending on the performance of your computer and everything. So yeah, Goose supports MCPUI. Postman also supports MCPUI.

00:56 Oh, and I should mention, Goose is free. Postman also is free, but there are some paid aspects of it as well. I'm not actually sure which aspects are paid or not but you should be able to debug an MCPUI server using Postman. I believe that using the agent is paid but yeah, you should be able to actually use Postman in lieu of the inspector and it will actually render the UI and everything. So if you want to play around with Postman, you can use Postman to test some MCPUI stuff And it's pretty cool.

01:31 The team is cool, too. The Goose team is also cool. And then my favorite right now is Nanobot. This is a really, really cool tool that effectively turns your MCP server into an agent. And then it actually exposes itself as an MCP server.

01:47 So MCP server, agent, MCP server. It's so cool. And one of the things that it supports is MCPUI. As far as all of the tools that I mentioned, this one supports MCPUI the best. And so it is what I'm going to primarily use in the MCPUI workshop.

02:05 And so you can go through here, get started. As of the time of this recording, this should work. It definitely works on Mac. It should work on Linux, I think. And hopefully will work on Windows.

02:20 The people, the maintainers of Nanobot are very interested in this, working on all the platforms. So maybe by the time you watch this, it'll support all of the platforms. So you want to just check at that time. I'm going to show you how I have this one configured locally for the workshop. So if you want to set it up and run it yourself as well, you can feel free to do that.

02:41 So what I did is I put a nanobot.ignored directory in here so that I can just like shove a bunch of stuff in here and doesn't go into the repository. In my git config, I have like my global git config, I have .ignored ignored. So I can put .ignored everywhere. You see I have .ignored on notes. That doesn't go into my repository.

03:01 Just hot tip for you. So I have nanobot.ignore, I have my config in here. And so I am calling my agent the journaler. The model is GPT 4.1. And that means I need to have an Epic AI API key.

03:18 And my MCP servers included in this journal are just the Epic Me MCP and then I've defined that here. I set the URL to localhost 56, 000. You determine that by opening up the workshop app right here. And when you have your Playground running, you'll see that URL shows up right here. So it's unlikely that this will change.

03:43 This should stay the same in the workshop app. But in the future, it's possible that this could change. So just run the Workshop app, run the Playground, and you'll see the inspector, and this URL will be the URL of the MCP server that's running in your local environment in the Workshop app. Of course, if you're doing this outside of the Workshop app, you should know what the URL is for the MCP server that you're creating. So that's how I got the URL for this.

04:12 And then to run it, Of course, you also have to have it installed. But once you have it installed, to run it, you have to have an open API key. So I have it right over here. So there's my open API key, open AI API key. Maybe I'll blur that out or something.

04:30 Or maybe I won't. And I'll just invalidate it. But yeah, so with that set, then you run nanobot run config. I expect that this will actually change in the future, and you won't have to set it this way. There will be some other configuration, maybe a .env file or something.

04:48 So just read the docs when you're getting this set up. So anyway, you're going to run nanobot run and point to the config, and you run that. Now, one thing that it's going to do is it'll create this .db file. This is going to be the database for your agent. During local development, you can just delete that at any time, and it will just create a new one.

05:06 So if things get kind of weird or whatever, just delete that, and everything should work just fine. You'll also see your configuration here as well. So if we open up localhost 8080, then you'll get a whole bunch of logs, all the stuff going on inside of Nanobot, which is fun. But it will also be running locally right here. And So now you have access to the entire MCP server.

05:33 So you can say, list my tags, please. List my tags. That's not what I wanted to say. Here, let's try that again. List my tags, please.

05:47 And it looks like maybe we ran into a little hiccup, maybe because I deleted that database while it was running. List my tags, please. And here we go, Okay, it's listing the tags. All right. Could you show one of those to me visually?

06:10 Sure. Coding. Coding. There we go. And ta-da, we've got MCPUI going on here.

06:18 OK, what about, now show me my journal, please. OK, sweet. That's my journal. Looks awesome. Let's post that I have five journal entries.

06:29 Hooray. So that's a link. Let's view details. Oh, man, those are the details. That's neat.

06:34 Let's summarize this one. Oh, look, this is a prompt that was sent. And now it summarized it for me. It even called a tool. That's neat.

06:43 And here, let's also delete the learning React server components. Delete that one. Boom, tool call. And something failed. We'll have to fix that later.

06:54 But yeah, so that is how you get Nanobot set up. You have to follow the instructions to install it. Then you're going to configure it. That hopefully gives you a good idea of where to find the URL and everything if you're running the MCP Workshop app. And yeah, and then as you're working through things, you're going to be navigating around to these different exercises.

07:17 Maybe you'll be on complex iframe stuff and you'll hit set to playground this can sometimes really mess up the nanobot and so if we say can you show me tag with the ID of two So sometimes you'll get something like this. And it just gets really messed up. Whenever this happens, here's what I do. I come over to Nanobot, I stop it completely. And I come over here, and you stop the app.

07:46 If you hold down Option, then you get a couple other options, and you can restart the app here. But you can stop it and start it again, or hold down Option, and it'll restart the app for you too. And Once that's restarted, then I will start up the nanobot again and then come over here, we'll refresh. I'll go new one and then we can say, please show me tag with the ID of three. And then it's able to do that.

08:15 So sometimes you'll run into situations like that. Another problem that you might run into during development with some of the other stuff as we go is VEET is very aggressive in its like optimize on demand and that really messes things up. In fact, even in the inspector, you're going to get this connection error the first time. And if you look at the output, the error that you get is this error posting to endpoint, da, da, da. Here it is.

08:45 Mini flare not defined. If you run it again, yeah, it's still not working. Let's restart the app. And that does take a second. It's starting like four servers.

08:58 But now we connect. The first time it's going to fail because you get this optimization of dependencies thing. I really don't like this at all. It's super annoying and I hope that I'll fix this for you. But if we try again, here, let's refresh and try again.

09:15 There we go. Now that is working and that's a good indication that this is going to work as well. So here we say, can you please show me my journal? And you'll notice here we got some errors. These look like these are application errors but they're not.

09:31 They're VEET errors. Boom. Optimized dependencies. Ugh. It's killing me.

09:36 So let's reload the frame, and now everything is good. So you can right-click on this, and this is an iframe. You can say reload frame, and it will reload the frame for you. And so if you run into situations like that, just reload the frame. Sometimes you'll also get this big error over the top of this as well as you're making changes.

09:55 And so you'll have to reload the frame or restart everything. It's not my favorite workflow, but it works and hopefully we can make it better going forward. So that is how you set up Nanobot. Of course, like I said, you can use Goose and that you can potentially use with local models so it could be free if you can make that work. You could also use Postman.

10:16 This has an agent mode as well, and it supports a lot of MCP, but not all of it. Goose also doesn't support all of MCPUI. But Nanobot supports pretty much all of MCPUI. And so I'm going to be using that primarily in the MCPUI workshop. OK, so that should be a pretty good exploration of the tools that will be really useful for you.

10:40 You can just stick with the inspector. If you go through here and list the tools, You can view the journal, run that, and you'll see your output here. And then you could even copy this and paste it here, and you'll see this output here. The problem is these things won't actually work because they need to be running within the context of an agent. So you're limited if you're not able to run with an actual agent like Nanobot.

11:06 And so I would recommend just go to Anthropic or go to OpenAI and grab yourself a key. For the stuff that we're doing today it should cost you pennies. Like it really shouldn't take a whole lot to test some of this stuff out. And it's pretty cool. And if you're serious about building out AI-related stuff, Using AI keys is kind of a thing that you're just going to have to get used to doing.

11:36 OK, so that is an exploration of the agents that you have available to you for using MCPUI. I hope that is helpful. I hope you enjoy using Nanobot, and I hope it continues to improve. And we will see you in the workshop, making this journal experience amazing. Okay, see ya.