# Build a MCP Client in Typescript, ReactJS & Cursor

## Metadata

- **Published:** 3/20/2025
- **Duration:** 21 minutes
- **YouTube URL:** https://youtube.com/watch?v=jog5-UigoTg
- **Channel:** nerding.io

## Description

Join the Community: https://nas.io/vibe-coding-retreat
50% off One-click remote hosted MCP servers use NERDINGIO at Supermachine.ai https://supermachine.ai/


In this tutorial, we’ll dive into building an MCP client using #typescript,  #react  #cursor  and Inspector, enabling seamless interaction with Model Context Protocol (#mcp) servers for AI-powered applications.

What You’ll Learn:
✅ What is MCP? – How AI models interact with external tools and data
✅ Setting Up an MCP Client in ReactJS & TypeScript
✅ Using Cursor for AI-assisted coding and development efficiency
✅ Debugging & Monitoring MCP Requests with Inspector
✅ Connecting Your MCP Client to a Server for real-time AI interactions

💡 Why This Matters
This setup allows you to build dynamic, AI-powered web applications that interact with MCP servers in real time. By incorporating Cursor, you can enhance development productivity, while Inspector helps streamline debugging.

🎥 Chapters
00:00 Introduction
00:30 Code
01:20 Docs
03:19 Inspector
05:59 Debugging
11:20 Typscript
18:25 Cursor

🔗 Links
Source: https://github.com/nerding-io/mcp-sse-example
Inspector: https://github.com/modelcontextprotocol/inspector

⤵️ Let's Connect
https://everefficient.ai
https://nerding.io
https://twitter.com/nerding_io
https://www.linkedin.com/in/jdfiscus/
https://www.linkedin.com/company/ever-efficient-ai/

## Key Highlights

### 1. MCP Client Overview & Purpose

Explains what an MCP client is and introduces the goal of building one using React, TypeScript and Cursor. Showcases examples of usage in different client interfaces and highlights its role in interacting with MCP servers.

### 2. Debugging with MCP Inspector

Demonstrates using the MCP Inspector, a TypeScript-based tool, for testing and debugging MCP servers. It covers setting up the inspector, connecting to a server, and testing tools, prompts, and resources. Emphasizes its value for local development.

### 3. Building a React MCP Client

Walks through building a React-based MCP client, including importing necessary libraries (SSE, Client, Transport), setting up the client to connect to a server, listing available tools, and executing those tools with user-provided arguments.

### 4. MCP Client Integration with Cursor

Illustrates how to integrate an MCP client directly into the Cursor IDE. Shows how to add an SSE server within Cursor settings and use it to execute tools and interact with the server directly within the code editor.


## Summary

## Video Summary: Build an MCP Client in Typescript, ReactJS & Cursor

**1. Executive Summary:** This tutorial guides viewers through building an MCP (Model Context Protocol) client using React, TypeScript, and Cursor, enabling AI-powered web applications to interact with MCP servers. It covers the basics of MCP, debugging with the MCP Inspector, creating a React client, and integrating the client into the Cursor IDE for enhanced development.

**2. Main Topics Covered:**

*   **Introduction to MCP Clients:** Defining what an MCP client is and its role in interacting with MCP servers, providing examples from cloud desktop applications.
*   **Debugging with MCP Inspector:** Demonstrating how to use the MCP Inspector (a TypeScript-based tool) for testing and debugging MCP servers, including setup, server connection, and tool/prompt testing.
*   **Building a React MCP Client:** A step-by-step walkthrough of creating a React-based MCP client. Includes importing necessary libraries (SSE, Client, Transport), connecting to an MCP server, listing available tools, and executing those tools with user-provided arguments.
*   **MCP Client Integration with Cursor:** Showing how to add the built MCP Client to the Cursor IDE with an SSE server, and showing how to interact with the server directly within the code editor.

**3. Key Takeaways:**

*   MCP enables AI models to interact with external tools and data sources.
*   The MCP Inspector is a valuable tool for debugging and testing MCP server implementations.
*   React and TypeScript provide a robust environment for building custom MCP clients for web applications.
*   Integrating MCP clients into IDEs like Cursor enhances development productivity and real-time AI interactions.
*   Understanding SSE (Server-Sent Events) is crucial for real-time communication between the client and the MCP server.

**4. Notable Quotes or Examples:**

*   "MCP is an open- source through cloud specifically ... it gives you ability to do different actions."
*   "[The MCP Inspector] gives you the ability to put in variables to actually run and send to our implementation or to our from our client through the uh through our proxy to the server."
*   (Talking about building the React client) "We're going to set up an MCP client we need to import so we have to import our SSE we also have to import the client so we have our client and we have our transport..."
*   (When showing how to create a new chat with the newly created SSE server) "That should actually go out to the tool and uh pull back information from the uh MCP tool"

**5. Target Audience:**

*   Software developers interested in building AI-powered web applications.
*   Individuals looking to understand and implement the Model Context Protocol (MCP).
*   React and TypeScript developers seeking to integrate AI models into their projects.
*   Developers interested in using Cursor IDE to develop and test AI applications.


## Full Transcript

hey everyone welcome to Nering I.io i'm JD and today we're going to continue our series on MCP and we're specifically going to look at what an MCP client is and how to build one in React as well as look at the inspector that we can use for debugging with that let's go ahead and get started all right so first what we're going to be doing is we're actually going to be going through our MCP uh server sent events example we're going to take what we did last time and we're actually going to expand on it so make sure that you uh either clone this repo or you go watch uh the original video um because we're taking this server that we built and we're now going to put it into multiple different clients so the uh we're we're going to take a brief look at cloud desktop i'm not actually going to go through all this there's there's a good amount of documentation on on how to load this one up but we will go through how you can add an MCP server to cursor since that's the tool that we'll be using to actually build things and then we're uh going to actually look at the inspector which is another form of client and we're going to actually build our own react uh client um so the the first thing is is with claude this is a desktop application this is basically how MCP kind of got its start mcp is an open- source through cloud specifically um and it gives you ability to do different actions and uh essentially it gives you a JSON configuration and then you can actually pass in what your MCP server is the commands and the arguments if you seen this it it looks very similar to how we did or how I did the uh node uh MCP N8N node and we're going to be following this kind of same pattern throughout what we're doing uh again we saw this in the the server itself uh this is actually an example of a a a studio so uh standard in standard out and what we're going to be doing though is we'll actually uh look at some of the other clients so there's a lot of different clients you can see again claude has the uh most support um we are not going to go through sampling and roots that actually has uh more advanced features and uh is really in the specification uh if you want to go dig through it but you can see the vast majority of everything supports tools and so we're still going to go uh in a dip a bit further in future videos on what are resources and what are prompts but we're we're going to build a client that specifically pulls in tools and so to do that one of the best ways is to have our server and actually use the testing tool that we used last time which is called inspector inspector is actually uh written by the model context protocol group and what it does is it's a command line that allows you to spin up a website in order to actually start testing and looking at the uh the resources the prompts and the the tools that you have available and test them out in a in a user uh interface they went for both Typescript and Python we're actually going to go through the TypeScript version um and what's cool about the the codebase is the MCP Inspector codebase is all written in TypeScript so they actually have both a server which is how they actually connect out so inside the server it's actually doing a uh proxy right and so this is a pretty common practice where you're actually taking an MCP SSE server and then connecting out to other uh potential MCP servers um and this way it like pulls everything in but then they also have an example of a client right so we could actually go look at the components that they have whether it be the UI itself or what is actually building the uh the app itself for how a client actually runs so we're going to spin this up we're actually going to take a look at our server and we'll go through some of the examples of uh of the MCP client oh and so first thing I did was we're going to spin up our back end you can use Docker if you want we went through that last time i'm just going to use uh npm so I'm npming running in my backend and I also need to run the inspector so we're just going to do npxy uh inspector and this is going to launch another uh site where it has the proxy server is actually listening on 3,000 and then the UI is actually through uh 5173 so there's a reason why that in the first video I actually put my MCP port for my server on 3001 is so that they don't conflict right because the the proxy server is always going to be on three real quick everyone if you haven't already please remember to like and subscribe it helps more than you know also please go check out text yourself it's a simple application that I built that helps keep me on track all you have to do is SMS different tasks and reminders that you need to be sent back to yourself with that let's get back to it and so now we have the inspector running we also have our server running and now we can send events through here so the other thing to note about the inspector is you can actually test uh standard in standard out right and so you can put in your commands here your arguments your environment variables pass all of this we saw versions of this right through the NAN MCP node um and then all you have to do is connect so as we saw in the last video you can actually connect this is the one that's pointing out to the live server and we can actually uh change this to be localhost 801 slash SRC and HTTP you can see that like this is the previous test where it went out to the live site came a little bit longer also there's authentication this is relatively new we're actually going to go through that um pretty soon so now we're going to check our local system and just for good measure we're going to do a refresh and do a fresh connection and connect and if we look we can actually get the information that's coming out of the MCP uh proxy right we're actually logging what events are actually coming back we're validating if we're getting a session so that that session will give us the ID we can tell where our messages are going and it gives you multiple different things right so just like we saw on the U example clients really not everything is supported in a lot of these clients but in the inspector um everything's uh supported right you just have to have the uh pieces set up and so that's why Prompt says it highlighted but you can also pin your server actually go out and uh if there was a ping response it's going to go out and ping their server just to make sure that it's live so it's like a health check kind of thing and then more examp uh advanced topics like sampling and roots and stuff but mostly we're going to sit inside of tools and now we can actually come in and do our normal kind of executions we can have our list we can have our ad this actually gives us the ability to put in variables to actually run and send to our uh implementation or to our from our client through the uh through our proxy to the server and we can see we actually called our results through our connection so again through the proxy and through the back end we can also do our query so again we could do like model context protocol and we'll just say account of three and we'll run and now we're getting back our results from the brave search and again this is the function name that we have set up in our tool and I think there's even a uh can't remember if I Yep I did I did a default resource in the in the repo and we can actually uh pull this back as well so again I'll have another video on on resources we're going to stick with tools but this is the way that I really like to debug a lot of my servers whether it be uh a remote server you know we've seeing a lot of different servers that um are getting spun up really quick and we want to see if they're still active are they uh are they down for some reason do we need to have a backup whatever or are they our own servers and we're actually doing local development so again this is uh a TypeScript UI that's built uh on top of React and what we're going to do next is we're actually going to go through and build our own React uh application with um with the MCP client so in order to do that what we're going to do is we'll take a look really quick at the TypeScript SDK and so the TypeScript SDK for the SSE client is you know it's I think it's like a couple hundred lines of code and at its core right it is really a uh it has our events and our request headers which we've used but at its core it's a fetch and so that's why it acts as a really good proxy as well so we can use SSE to actually call out to other transports and actually send that information down to a command line call if we want but what we're going to do is we're actually going to look at the where did it go um the send function and so when we look at the send function this is how we're actually posting those messages through our specification to whatever the uh the post is with our message body and then we're hoping to get a response back again it's checking if we're authorized and things like that which we'll look at later so now what we're going to do is we're actually going to get into the code and build some React stuff so first and foremost I have this server i need to get it up and running so we're going to do I actually like having a separate port so rather than doing the default bite um because sometimes it conflicts with the MCP proxy so I'm going to do a default port with mpm rundev and a different port now if we go ahead and spin this up you saw a little flash there where it'll tell us if we're connected to our MCP or not and we actually have the ability to look and see if our tools are available so let's go look at the code so first you want to come down to the uh we can actually look at our components i only have one component here i don't have anything in the app uh the app file it's just one big component uh wasn't going for the best structure just wanted to show how we can actually do this so it's not abstracted so basically what this is as you can see I can call out to but you can actually point it to a uh live MCP client out in the wild as well as the um local So if we were to change this we'll actually get an error and let's see what that does so if we refresh we're failing on our MCP and it's actually giving us an error so a failed to fetch when we go back into our transport and we say the 3001 we'll actually get a um a response back so this is really all I have to set up for the client right we're going to set up an MCP client we need to import so we have to import our SSE we also have to import the client so we have our client and we have our transport and then what we're going to do is we're going to set up our client that's basically a single client to call out to a uh single transport server um the you could in theory like have multiple transports if you wanted um but that's why I think that would kind of clutter this up i think it makes more sense to actually have a proxy uh if you're going to have a bunch of different uh servers that you need to call out to in this so right now we just have one client that is calling out to uh one uh transport and one server which has a multiple different um tools on it again we're calling out to our SSE we're calling to our local host and then we are actually sending the request uh parameters that we want so we want an event stream so we actually get information back then what we need to do is we actually take the client and we are going to connect to that transport right so the transport is the SSE that gives us our session and then we uh will be able to take back all of this information so once we have the capa what I did for capabilities is I took the client and I wanted to see what other information that we could get off of this right so if you do uh it comes back with a lot of different things you can get the prompts you can list prompts you can list tools resources templates whatever you can get notifications uh get instructions and then uh you know on close complete connect so that you can actually see where uh the state of things are right so that's how we're getting the status of if we're red or green are we having an error and are we doing a list of tools so in our case we were doing a list of tools but we can also switch that up once we have these capabilities it'll actually give us an array that array is going to be of tools you can see right here the uh zod that uh we have and then we're just going to map so all I'm doing is looking to see what the tool is if it has a description otherwise nothing available and then uh being able to set what that tool is if we want to to use it all right and so if there's an error then we'll actually send an error in our status and now we're going to actually look through how do we actually call this tool so inside of this brave search function I actually have just a search handler and this will allow me to take my client and call out the tool again we're starting to see those arguments and everything that uh we see when in MCP right the name of our function that we're getting from the this should be the the function name and we'll get that by looking at our list of tools right we have our our list of tools here and then we can uh change it we could also add this where we select it so you know whatever you put in here right would give you the uh this action could pick whatever tool you selected so again this is our tool and then based on the response that we're getting back we know is going to be uh content and then a txt and we're actually going to show those results so again this is not like how you would put it into an agent this is us building our own client on the web that we can interface into again also you know a way to test um how you're connecting to your MCP so again if we do like model text we can get our results uh I have noticed this where it'll like do a a 3 2 one timeout means your connection's broken and also like the 32 is really uh a a JSON R RPC code but I think one is actually like a custom marker so you can actually find this information error result we could actually send this information to the LLM after the fact um to get our tools or to uh take the information from our site and return back so again and we're at when we're watching the SSE get terminated we're actually seeing uh information from the proxy because that's still running and then we also have this information here about the which query is actually being sent so the last thing I want to show is we talked about uh come into cursor what we're going to do is if you do command shiftp and do cursor settings come down here to SCP we can actually add the uh SSE server that we created here so we're going to do SSE we're going to go back to our local host again you could use the um URL that we pushed in our Docker deploy and we'll just say local now what you can do you have to have the SSE and you can add and you can see it's actually pulling this in so now if we were to do a new file command pi let's get a new chat here and we'll say untitled and we'll just say and that should actually go out to the tool and uh pull back information from the uh MCP tool and like one thing we'll see okay so we've got another access point coming in and so we should have seen something come back but still uh this is how you can actually use MCP in the uh in um cursor itself so again just pull up and put in whatever MCP rules that you Oh it says no tools available that's a little weird so it definitely seems like there's a little bit of an issue with pulling this back in cursor see if we Oh now we've got our tools all right a little bit of debugging let's try this again cool all right so now it's actually running we actually saw the thought process here wants to use MCP search we're calling search we're querying AIA news we can go ahead and run that tool we're already getting the response now we can actually take this into our LLM and ask it any information that we want uh and again this is an example of a client right so now we've seen an example of the inspector client we've seen an example of React and we've now seen uh using this in cursor all right that's it for us today everyone so what we went through is we actually went and looked at the specification for a client we looked at some example clients we uh also actually looked through the inspector loaded that up we're able to debug our SSE and then built our own client in React as well as took a look at cursor and with that happy nerding

---

*Generated for LLM consumption from nerding.io video library*