Create MCP Clients in JavaScript - Tutorial

In this video, we cover how to create an MCP client that can connect to any MCP server. We will build this from scratch by showing you how to turn a simple chatbot into a chatbot that supports MCP servers.

## Links

## What is MCP?

MCP (Model Context Protocol) is an open protocol designed to standardize how applications provide context to Large Language Models (LLMs). Think of it as a USB-C port for AI applications, enabling a standardized connection between AI models and various data sources and tools.

## Why Use MCP?

- Integration: MCP offers a growing list of pre-built integrations for your LLM.
- Flexibility: Easily switch between different LLM providers and vendors.
- Security: Follow best practices to secure your data within your infrastructure.

## General Architecture:

MCP follows a client-server architecture where a host application can connect to multiple servers. This setup allows for seamless communication between your AI tools and various data sources, both local and remote.

## What You'll Learn:

Setting Up Your Environment:
- Create and configure your project directory.
- Install necessary dependencies and set up TypeScript.
- Securely manage your Anthropic API key.

Creating the MCP Client:
- Set up the basic client structure in TypeScript.
- Implement server connection management.
- Develop query processing logic to handle tool calls.

Interactive Chat Interface:
- Build a chat loop for user interaction.
- Implement cleanup functionality for graceful exits.

Running the Client:
- Compile your TypeScript code.
- Execute the client with any MCP server.
- Troubleshoot common issues and errors.

## How It Works:

When you submit a query, the client retrieves available tools from the server, sends the query to Claude (the LLM), executes any requested tool calls, and displays the response. This process ensures efficient and secure communication between your chatbot and the MCP servers.

## Timestamps
0:00 Intro
1:30 How MCP Clients Work
8:59 Project Setup
12:18 Create Client Class
16:01 Connect to MCP Server
22:17 Join the Bootcamp
23:58 Interactive Interface
36:01 Conclusion

[BobbyBattista]

Thank you for this :) Most of the guides to using MCP servers show you how to add it to the config for existing clients like Claude Desktop or Claude Code, so showing the client side is great. It's also a cool thing to note that you don't need to be running your MCP server for the client to use it. The client executes the command to run your server then uses it, which is pretty neat IMHO :)

[andrefelipe]

I caught myself reaching for the like button multiple times before realizing I’d already liked the video. That’s how good this is. Great job, man — really appreciate the clarity and depth!

[easylemon]

This is literally the best & well-explained content about MCP Client ever. Thank you so much for making the video! It was so helpful :)

[choquezfritez]

Magnífico video... me estaba liando absurdamente con el concepto de cliente mcp y ésto es meridianamente claro. El mejor que he visto por ahora. Muchas gracias!

[trilliamnellis]

Would love to see this but with Python! Video is great

[hickam]

Best video on this found i've so far! Only one thing, I dont know if it was on purpose, but it seems you skipped the 'processQuery' function explanation/walkthrough. Before the sponsored content segment it was not there, and after it, the function was already there with its code folded. I can just follow the code repo, but just fyi. Again, great explanation!

[aminezeta]

Thank you this was very helpful!, I'm interested to see the next pyhton video 😊

[prabhathhettiarachchi]

Please create a video that connected to local database and ask questions from it. Just like RAG 😊 using MCP open source model

[LakhendraKushwah-jn]

This is an awesome video, I am continuously trying to implement this for 4 days but now I have reached a level,

[rajuclick]

Your video is truly straightforward and easy to understand — the step-by-step guidance using flow diagrams is most useful. Thanks for posting!

Also, can you tell us how to develop an AI-driven Expense Manager? For instance:

Input: (Grocery, 100)

Output: Saves the entry into a database and shows graphics such as a pie chart

Would appreciate it if you could do a video on such features!

[MikewasG]

can't wait to see Python version of this!

[yohanmarkose]

Really Love your videos. Really would love the same video using Python for MCP clients

[sr.modanez]

Thank you very much for your video, they are helping a lot, I would like to suggest your next MCP Server video, create a CrewAI MCP Server, one that can be used in N8N, or in Piton, I believe there are no videos on this subject yet, just imagine an MCP Server being able to use CreawAI Agents, you can build Swarms of Agents in several areas, that is incredible.

[ItamarLevi-xb]

python video would be REALLY helpful I cant find anything of this quality video from other people using python

[TasosVDAI]

This was a very insightful video. I have a question though, all of this works great, but how do we do what you did but with a remote MCP server? So instead of a locally configured server, to interact with a remote one. Thanks

[JeffEmbracedDC]

Am I crazy or did you not break down the processQuery() method of the client class at all?

[antoniuscarvalho]

Do you have a tutorial for mcp server in javascript / nodejs? I saw only a python tutorial in the video list

[sap____]

Hey thanks for the vid, is there anyway way i can reach out to you for queries?

[snook]

Would really love to see the python video!

[nahlene]

Such a great video! 6 mins in i am learning a lot!
one question. at around 6:30 you mentioned that this MCP workflow requires models to support function calling to working? but in Cline it seem to support any model. I read it somewhere (forgot the source) that there are another way to embed MCP as system prompt rather than function call? so that it works with any model? I may be wrong, but is it true that the model MUST be function-calling compatible? Thank you.