Building Your First MCP Server – Let’s Get Coding!

[00:00 - 00:15] And this is time where we actually start to build the application from scratch. And on my side, I would be using JavaScript, but no worries, because the actually documentation has multiple languages.

[00:16 - 00:21] It has Python, Java, and they recently have added even much more. I got really surprised about this.

[00:22 - 00:38] So what we are going to do, we are actually going to follow simplified version of application, which is suggested inside of the docs. First of all, this is because once we build the application, you can easily go back to the docs and you can try to build it yourself.

[00:39 - 00:44] And for example, use it in your own language. If you're not familiar with JavaScript, okay.

[00:45 - 01:03] And additionally, if there would be changes for some syntax or stuff like that, it's usually right away is being applied inside of the documentations. So whenever you're looking at the docs, you always know what we are talking about because we're going, we would go step by step.

[01:04 - 01:10] I would explain everything, what is going on the screen. So you have the understanding and place to go back to if something is changes.

[01:11 - 01:21] I know sometimes docs might be too boring for someone or they might be too scary, but no worries guys, those docs are good. And we would easily cover them and go over them.

[01:22 - 01:44] Before I start to write any code, let me actually share the link to the official documentation. I would give you a little bit like around 30 seconds just to look it through a little bit below after the start of the page, you would be able to see the JavaScript, Python, stuff like that, like multiple languages.

[01:45 - 01:54] Okay. Once again, no matter the language, after the initial setup, all the main principles related to the MCP will be there.

[01:55 - 02:06] So no matter what are the like synths or some other changes, we would have the all high level stuff and the philosophy behind it will not change. So you would get it really like easily if there will be some change in Python.

[02:07 - 02:11] Okay. So yeah, actually let's start with it.

[02:12 - 02:17] But before we jump into the code, guys, can you tell me, are you familiar with the JavaScript? Okay.

[02:18 - 02:19] So what is familiar with JavaScript? Okay.

[02:20 - 02:26] Yeah, all guys know just this is great. I was afraid that there would be a Java guys or C sharp guys or Python guys.

[02:27 - 02:28] Okay. We all on the same page.

[02:29 - 02:37] Basically, let's then start building our app. And what we are going to initially start from one sec, let me know.

[02:38 - 02:43] In general, as well. We have just an empty project.

[02:44 - 02:53] And since we are all just guys here, I would just jump kind of straight into it . First of all, we are initializing our Node.js projects, no biggie.

[02:54 - 02:59] On the second. So just in game in it's and we are getting our package to Jens Jason.

[03:00 - 03:08] So we have initialized our app. And since it's recorded, I would probably would be giving a little bit more details for guys who might not be familiar with the Js.

[03:09 - 03:11] So sorry guys for additional comments. Just bear with me.

[03:12 - 03:15] Okay. For the Js environment, we use in being in it wide.

[03:16 - 03:38] So basically we generated our server that we have, you know, and the next part that we want to do is right away since we have already, like initialized project at hand, let's write a way to install also some of the dependents that we will need to work with so we can get over with it right away . First of all, that we are going to install, it would be the mcpms SDK.

[03:39 - 03:51] This is official and mcpsdk once again supported by the entropy and Zod. If you never heard about the Zod before, it basically helps us to make sure that we are sending correct date, right?

[03:52 - 04:02] Once again, the result is just to validate the inputs output. And after that, we also would need the type script because we want to use type script.

[04:03 - 04:07] In this case, it's someone is not familiar with type script. Just provides types for us applications.

[04:08 - 04:12] So we know what we're sending, what we're receiving. It's much more easier to debug stuff and stuff like that.

[04:13 - 04:21] We would leave it, take a little bit time and set up everything. But after that, there's would be no issue to move forward to the mcp server.

[04:22 - 04:32] And right away, let's also actually create a src folder. And inside of the src folder, we are also creating index.ts file.

[04:33 - 04:36] This is where the our server actually would be located. Okay.

[04:37 - 04:47] We're almost done because next step we need to update our package JSON file. Once again, guys, it's a little bit confusing, no worries.

[04:48 - 04:52] But this is all the both inside of the dogs. This is like the beauty.

[04:53 - 05:01] So you can go back and read a little bit more about it. So if you're ever get lost, you either can tell me I would read something, but you can check it later on.

[05:02 - 05:07] So don't be stressed about it. First of all, what we are going to do is we are going to change the type.

[05:08 - 05:14] OK, parameter and our script. So let's just delete it completely and just replace it.

[05:15 - 05:24] Whatever the official documentation suggest us to actually to use for our specifically JavaScript application. We are using tied modules so we can use imports exports more easily.

[05:25 - 05:30] And the important part here is actually this build script. It have changed.

[05:31 - 05:36] This is official script from the mcp so we can build our server. OK.

[05:37 - 05:44] So it's important to also address this and update this next step. We actually need to take care of our.

[05:45 - 05:54] TypeScript because we don't have the config file for now. Let's super quickly create this config file and populate it with the configuration.

[05:55 - 06:00] Don't worry about this. If someone's watching enough, we see JavaScript and that type script.

[06:01 - 06:05] It's just part of the general setup process. Nothing to worry about it in your language.

[06:06 - 06:11] There would be some different steps in just right now. We are just setting up the general environment where we are going to work in.

[06:12 - 06:19] OK. And with all this stuff like out of the way, what we are going to do, build application.

[06:20 - 06:26] No, we're actually going to run the server right now to check that if everything is working. Let's make sure that everything is safe and let's actually build our server.

[06:27 - 06:32] And all good. No errors always guys check that there is no errors.

[06:33 - 06:36] OK. And then we should have the new build over here, which is empty.

[06:37 - 06:42] This is great. So we can step by step, make sure that this all the initial stuff is being set up properly.

[06:43 - 06:51] And if something is not building, it's not because the initial setup. Maybe we have made some error inside of our application with this out of the way.

[06:52 - 06:56] Let's finally start to actually build our server. And.

[06:57 - 07:12] First thing that we're starting from, of course, we are importing all the packages that we are going to use and the very top official MCP server, which we are going to use to create our server. The transport layer, we are going to talk a little bit later, also to the end of the application.

[07:13 - 07:27] So don't worry about this for now. And as I mentioned before, also we have all the EPI information for us to actually to use the service like this is for using the server structure to drop the weather information about the some of the locations.

[07:28 - 07:35] And finally, we are actually creating and instance of the MCP server. Here, we are giving it a name.

[07:36 - 07:48] It can be anything and actually preferably don't forget to give the correct name and start of the application or for the folder where you're creating auto-generated properly. It's just good stuff to manage.

[07:49 - 07:54] It's not going to break and everything, but still good to know. Then we are giving any version that we want to application.

[07:55 - 07:59] For now, let's keep capabilities. We are not going to use it and especially for this simple solution.

[08:00 - 08:02] You don't really need this. Just leave it as it is.

[08:03 - 08:12] Couple of like months or a little bit more before it wasn't even included inside of the documentation. For example, we don't really need to stress about too many too much details.

[08:13 - 08:21] What's important part that we have created server using official SDK. Luckily, on Tropic SDK is really super easy to use.

[08:22 - 08:24] You would see in the moment. So this is where we're going from.

[08:25 - 08:28] By now, guys, is everything clear? If you have some additional questions, just let me know.

[08:29 - 08:34] But basically we just set it up the project and basically created the server. Or later, that's great.

[08:35 - 08:47] Okay. Before actually using any tools, we need to take care of one another step on our way because we also would need a helper functions to actually make the API goals.

[08:48 - 09:02] Instead of breaking all the code and logic inside of the MCP tool, you can think of it as the small destruction process, okay, where we're just creating the separate helper function just to help us to manage the code. So here it is.

[09:03 - 09:16] There is nothing crazier here or something complicated. We are just making requests and depending on the response, if we got the data or we haven't got the data from the server, it would either give us the data or it would give us an error.

[09:17 - 09:23] You know, basically just like that. And beneath, we also created a couple of the interfaces.

[09:24 - 09:32] Once again, for some guys who are not familiar with the TypeScript, it just tells what we are sending, what we are expecting, stuff like that, just to manage the data flow. So don't worry about this.

[09:33 - 09:44] And there are just a couple of the interfaces to make sure to address that we know what we are like sending and getting back. And the next part is actually where the fun part finally begins.

[09:45 - 09:56] Okay. We are going to create the tool for going and actually using our helper function to get all the data and to give us back.

[09:57 - 10:10] So let's go line by line. And at the very top, this is one of the magical parts at the beginning, which helps to host site to know actually what our application is about.

[10:11 - 10:13] And those two first two lines are super important, guys. Okay.

[10:14 - 10:29] So make sure that, okay, about name, you might be creative about the name, but please provide always really good and clear explanation about your server and specifically this tool description. Because there might be multiple descriptions.

[10:30 - 10:37] And this is exactly what would be once again sent to the host. So always take your time and provide the clear, good, understandable explanation.

[10:38 - 10:48] So first parameter is name, second parameter is description, sort parameter is actually input data. That's the MCP server is getting.

[10:49 - 10:54] In some cases, when you are using, for example, resources, right? You always keep it.

[10:55 - 11:02] You might not just include the third parameter as the like input parameters. You can just remove, for example, the whole object that would be fine.

[11:03 - 11:10] Okay. But when you're, we are using tools, we're usually providing some input information so we can like process them to do something with the data gate.

[11:11 - 11:24] In our case, since we are building with our application, it would be a latitude and longitude of the place that's we are searching the weather for. And we are just using the ZOD to make sure that we're verifying the input data correctly.

[11:25 - 11:31] So it's formatted properly. And we also include some small description.

[11:32 - 11:36] This is for the LLM, so whatever along try to process, understand what how it's going on. It would work like hell.

[11:37 - 11:41] It would help additional tips what to do so with that. And basically, that's it.

[11:42 - 11:49] We're just providing inputs. And then as the force parameter or sometimes thirds, depending if you're including included this one, right?

[11:50 - 11:56] We are finally writing the callback function. And this is where the just all the job done.

[11:57 - 12:09] Remember, as I mentioned that all the APIs are hidden and being wrapped up inside of them, CB, basically, this is it. You can actually get your some logic from your existing servers, right?

[12:10 - 12:17] You can wrap it up the way you want or swatch your files the way you want. Connected to the server feature and boom.

[12:18 - 12:26] Basically, you have the AI agent, basically that easily. So here there's no magic.

[12:27 - 12:42] This is just classical, like JavaScript code, but we are just using API to fetch data and to process it so we can remove it like already parsed and in the right format. Just initial data points about the URL, what we are using, right?

[12:43 - 12:55] And then we are making just request to grab the data, whether information for us using latitude and logitube. If there's no data, we are providing once again, structure way of the content that we are returning.

[12:56 - 13:02] That's why we are actually happy to JavaScript. So we can, we know actually what we are sending, what we are receiving.

[13:03 - 13:22] And when we are talking like, MCP servers, it's also important because if you 're providing output data formatted in the wrong way, for example, we are using instead of text, but we are using numbers, right? It's going to give us an error because it requires like one standard way of using our application.

[13:23 - 13:32] This is another beauty of actually building MCP because it gives us a guideline how to build down, right? It's still super flexible.

[13:33 - 13:42] Like we can build whatever we want visit, but at least it gives some like general information for us to fall. So it's not super messy for everyone in general, okay?

[13:43 - 13:56] And whenever you are providing the error message, it's better to provide error message in human readable way, not just send error or whatever. Why? Because eventually it will get back to the LLM anyway.

[13:57 - 14:20] And so LLM will have a better understanding and time to understand actually what is going on and make sure actually what got wrong and to inform us about this. And if there's then forecast URL, if there is no forecast URL, once again, we are providing the readable normal information for LLM as a response.

[14:21 - 14:34] But if we got the forecast data and everything is right, okay, we're stuck to to actual fetching the forecast forecast data. Once again, just another check if there is no forecast data, once again, another error, let's just keep it.

[14:35 - 14:37] I believe you guys understand what is going on. We basically try to fetch right now something.

[14:38 - 14:50] And if it's not working, we're just making sure that we have probable response in the proper way to send back to the LLM. And okay, there are some periods we're checking also if it's working or not.

[14:51 - 15:07] Let's not get into the specific weather API because this is not our concern for now, okay? But actually, when we got back the information that we want, once again, we are inside the call when the function still, we can do whatever we want with our data and with fetching anything we want.

[15:08 - 15:19] We're actually formatting it to the way that which is once again, is easily understandable by the LLM. Of course, it's not necessary to manage it, right?

[15:20 - 15:38] But if you want to have more predictable responses and the more correct responses, it's actually better to manage and parse the data correctly and to format data correctly. So you have a lot of you would have the better time actually to wait the application which now also needs a lot.

[15:39 - 15:44] Let's say that. And then our forecast is saved as this string.

[15:45 - 15:52] Basically, we're providing initial information just for us. So we know from which latitude and the latitude, we're searching information for.

[15:53 - 16:03] And then we are providing our formatted data, one thing here, which we have formatted here in readable way. And we are sending basically it back to the our client side.

[16:04 - 16:23] And here it is, we're just returning type as the text for our LLM. And we're providing all the info that we we either able to found fetch format and to send back, or maybe there is some error and issue and we would send back the issue, like one of the two cases or what we will we will get back, right?

[16:24 - 16:34] And we are almost done. The one small part at the very end is actually just to make our server running one second.

[16:35 - 16:46] So at the very bottom, as you as I mentioned at the beginning about the transport like layer, this is why we need this. This is actually to make the application available.

[16:47 - 16:52] We are just basically running the server right now after we created one. And what is happening?

[16:53 - 17:08] We are just creating the highway, the unified way for sending information back and forth. For you, you don't really need to care about the management of the connection and how data goes back and forth.

[17:09 - 17:15] But this is just important to make our server run actually to use the transport layer. So they're using SDK.

[17:16 - 17:26] And so this way on the client on the server side, we have one common highway, which is supported by the NCP protocol. And we're just sending the data back and forth basically.

[17:27 - 17:34] Then we are connecting to our server and we are connecting to our server specifically with this addition transfer layer. That's it.

[17:35 - 17:41] And after then, we are just running the our main function. Basically, we're running the application itself.

[17:42 - 17:50] And if there are any errors, we are catching and there is a catch like we're catching errors. This is specifically for JavaScript.

[17:51 - 17:58] I'm not sure about other applications, but for Gs MCP servers, better to use console. Error instead of console.

[17:59 - 18:06] This is just the way how like it's been done for now. So don't ask too many questions.

[18:07 - 18:21] It's historically, but this is what happened to it. If you're trying to use console.block, at least for now, the server might be like giving you hints that he doesn't like it or maybe it would not be showing you the whole information, the whole works for you.

[18:22 - 18:31] So guys, just please use console.error for now to make sure that everything is running correct. And to go over the general overview we have done.

[18:32 - 18:37] Let's once again go over it. Just importing some of the initial libraries.

[18:38 - 18:49] Connecting to our API or API information, creating the server. Then we are creating the server dot tool in our case, this dot tool.

[18:50 - 19:04] And providing name, providing description, input data, and then we are creating the force parameter Colvin function where we are doing all of the job for our desk. In our case, we're additionally using the helper function.

[19:05 - 19:17] You might move it to another file if you want. And after the everything is done, we are using transport layer to send it back to the album after it requested permission from our site.

[19:18 - 19:21] Okay. So honestly, like this is super simple.

[19:22 - 19:35] And you can transform your application, so choice to use MCP, not super easily, but fairly easily. And you might be asking, okay, there are also problems and there are also resources.

[19:36 - 19:49] It's going to work basically in kind of the same way. What I mean by that, that we also have server dot, but we have server dot resources, for example, and server dot prompts or using prompts.

[19:50 - 20:07] And the syntax would be different because we have different functionality, but basically we would use different wrapper for our logic underneath the hood for different tasks. In our case, we have used server dot tool and then inside, it just told you logic for normal API goals.

[20:08 - 20:32] And this is basically it. And I see some question, use console dot error for logging to yes, use console dot error for logging any information, even though you're planning to use just to console log, something for to you to see used console dot error, because going a little bit ahead, when we are debugging something, for example, we're going to use load as the host just in a minute.

[20:33 - 20:46] So I will show you the practical example, how everything is working and how to connect to the host actually. And when you're looking through the logs, if something went wrong, actually, console dot logs is not showing, but console dot error is showing.

[20:47 - 20:58] Okay. Yeah, it's like this is new tech, but maybe they would fix or change it like in the future, but this is how it is, guys, really soon there will be a bunch of updates.

[20:59 - 21:04] I believe like this would have like more incentive documentation and it would be easier to use. But what we have for now.

[21:05 - 21:26] One important thing that's after you have built your server, you finished building and creating your server, okay, creating your server, we need to build it. So whatever we are changing, making changes, don't forget to rebuild it, because we are specifically would be connecting our build file to our host.

[21:27 - 21:39] This is how it would be working. And to address it right away, we are just providing basic basically path to our server here.

[21:40 - 21:50] And the host will automatically actually try to run it and connect to it. So we do need to manage just NPM around there for something like that.

[21:51 - 21:58] We don't need to start server. We're just building it, providing the build file and then everything could be already managed by the host side.

[21:59 - 22:03] So this is convenient as well. And that's why I'm mentioning and addressing this.

[22:04 - 22:16] And since you already have all these files and this beautiful application being built, let's finally actually learn how to connect everything to the MCP host.