📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

Postman + TanStack = Amazing MCP!

Jack Herrington10:01

Transcription

You probably know that Postman is fantastic for API work, but what you might not know is that it's also incredibly good for model context protocol or MCP work. So, if you're doing a lot of that, you're going to want to check out Postman because it's got a lot of awesome features.

One, it can connect to your MCP server and allow you to debug it. And then second, you can actually build an MCP server right in Postman and then have it connect to your nonMCP APIs. I'll show you both of those things. But before we do that, I do want to say that this video is sponsored by Postman. Thank you so much for your support of this channel. Let's get right into it.

[Music]

All right, so here's the Tanstack start application that I'm going to work with. This is based on the tanstack start release candidate. So the code is all up to date. And of course you can get access to that in the GitHub link in the description right down below.

So what is this application? Well, it's a way that I can keep track of the songs that I want to learn as I'm learning guitar. For example, I can add Love Me Do by the Beatles and it just shows up there. And then I can see over in my cursor over here in guitar songs, we've got Love Me Do. So that's how it's persisting that data. That's not all that exciting.

But but what I want to do is actually add an MCP endpoint to this application and then use Postman to try out that MCP application. We to see how it does when it comes to debugging MCP. So let's go and build ourselves an MCP endpoint. To do that, I'm going to go into the routes folder and then add MCP.ts. That's automatically going to create a file route component with some JSX. We don't really want that. What we want to do instead is first create an MCP server, then bring in the handle MCP request MCP handler. That just kind of connects the MCP SDK into Tanstack start for us. And then for the Tanstack start route, I'm just going to take any post request and just send it to that handle MCP request.

Of course, now I want to go and add some tools on my MCP server. Currently, his MCP server doesn't do anything. So, let's add some tools. So, I'm going to bring in the add song and get song helper functions. And then I'm going to register a tool that we can use to get the list of songs. All right, let's hit save and try this out.

So now, where is this running? Well, this is running over on localhost 3000. So I'm going to take that URL and I'm going to go over to my Postman and I'm going to go into my personal workspace. I'm new, go to MCP, and then I'm going to select HTTP is my protocol. Local is 3000. MCP connect. And there you go. Oh, get song. So easy. And I get back the list of all the songs that I want to learn. Awesome.

So now let's go and add the ability to go and add a song to the list. So bring in Z from Zod because we're going to want to be able to specify arguments for this because we're going to want to take a title and a artist. So we'll say that add song takes a title and an artist. And then we will run. We'll just call add song and we'll send back the response. Let's see what happens. We'll disconnect then reconnect. And now we've got ad song. Awesome.

So now I should actually bring up the browser and you can see this live. This is super cool. So I'm going to add the title of song, Smells Like Teen Spirit by Nirvana. I'll run it and there we go. Add automatically added to our list of songs and it shows up dynamically because that's just the way that this particular Tanzac start is configured. there's actually an event stream running between the server and the client so that when the server changes it automatically sends an event out to the client and the client does a refresh to get the new data.

All right, but let's say that all we have is an API. For example, we currently have an API on this application API songs and it just gives us back a list of all the songs and that's all we have. We can't actually change the server at all. So we want to actually create an MCP server in Postman that can use this data and also call out to an AI. So let's try that.

I'm going to create a new action. And then in order to register this as an MCP server and an MCP tool, we have to create a new scenario for that. So I'm going to create a scenario. It's going to be called tool definition. And then I'm going to give it the tool definition that I want in the body. So, let me stretch this out a little bit so we can see it better. So, we can specify multiple tools. I'm only going to specify one and it's going to be get song recommendations and it's going to take as input a prompt. So, now over here I can say that I want prompt and that's going to come in from arguments prompt and then I can say something like I'd like songs about and then put in that prompt. Now, this isn't actually going to do any AI work yet. This is just going to go and templatize that string. We're just going to see if we can get data into and out of this MCP tool. Let's save this and deploy it. So, we'll call this get songs recommendation and we'll deploy it. Okay, that's it. It's already deployed. So easy, so fast.

And now let's open that up in an MCP request. We'll connect. And now we see that we have our get song recommendations. Let's run that. Let's say something good at a barbecue. And I'll run it. And what we get back is the output of that templated string. I'd like songs about something good at a barbecue. Awesome.

Okay. So, first off, let's clean this up a little bit. Rename this to songs recommendation server. So, now I want to replace this template with some AI. So, to do that, I'm going to rightclick and then select AI agent. Now, I get to select any models that I want. So, I'm going to prompt it by asking just kind of open-ended recommend some songs because we don't yet have access to the songs that I want to learn, which is really what the list of songs that I want it to connect to. All right, now there we go. Now, let's disconnect that template and get rid of it. And then coming over into here, we'll connect prompt arguments.prompt and connect the output to the response. And let's deploy it again. Crazy fast.

Now let's just try and run it. Something good at a barbecue. And we get back an AI response. That is so cool. That is really great. And check it out. We actually didn't have to disconnect and reconnect to the server. We're just calling off to that live deployed service. You can add authorization and all that stuff if you want to, but this is just a fantastic way to try out MCP particularly on your APIs.

So, let's try that out. Let's actually connect this songs recommendation server to the API that's over on our application. Now, in order to do that, well, we could call localhost, but I'm going to show you something really cool. It's called Enrock. So, I go over here into cursor and I create another terminal. I'm going to fire up enrock on HTTP 3000 and that's going to give us an external URL that forwards to localhost. We can visit that site and now we see that we're actually going out to the internet and then going back to localhost using Enro. How cool is that?

Right. So the next thing I want to do is create a flow module. And this is basically like a little library. And that flow module is going to send a request. So I get to specify a new request. So I'm going to specify a new request called songs request and it's just going to go get that URL. So Angro free app API songs. I'm going to save that and I'm going to say that we got some response and output and I'm going to take the success from that and make it the output. And then from within that I'm going to say that we want the body of that output. So that's going to give us just the data back.

Now, I'm going to rename this to get my songs tool. And then I'm going to create a snapshot of this flow module. And that's going to allow us to use this as a tool over in our MCP server. So, if I go back over here to songs recommendations, we can see that by just adding a tool, we can add my get songs tool to this. And we can make the prompt a little bit more specific. I can say that it should use that get my songs tool to go and get the current list of songs. I'm going to deploy that and over here I'll say something by Nirvana.

So let me trace out what happened here because it's a little complex but it's actually very very cool. So this MCP inspector that's built into Postman connects to a Postman deployed MCP server. That Postman deployed MCP server calls out to OpenAI which in turn makes a tool request to get the songs. That get my songs tool request is handled by the flow module which ends up making a call out to my API. The the tool then gets back the data which it sends back to OpenAI is the result of that tool request. Open AI then looks through my list of songs based on my prompt and returns with some cool recommendations. And this is just a really simple case. You can go hog wild with this thing. You can make the MCP server as complex as you want. You can make those connections and those flow modules as complex as you want. And this is a fantastic way to no code PC yourself a full MCP AI integration experience right in Postman.

So, thank you so much to the folks over at Postman for sponsoring this video. I'm really enjoying using Postman as a tool. Of course, in the meantime, if you have any comments or questions, be sure to put that in the comment section right down below. And if you like this video, hit that like button. If you really like the video, hit the subscribe button and click on that bell and you'll be notified the next time a new blue collar coder comes out.