Getting Started with MCP Servers: A Beginner's Guide
Add to favorites
Connecting Claude AI with Hugging Face Tools
Play video
Master Agentic Workflows
1
Getting Started with MCP Servers: A Beginner's Guide
9:23
2
Integrating Claude AI with Hugging Face via MCP Server
10:20
3
Expanding Your MCP Server with Hugging Face Tools
15:58
4
Manus AI Explained: How Autonomous Agents Are Changing the Game
8:17
5
Using an AI Agent for Product Research
14:09
6
Breaking Down Genspark: Multi-Model Intelligence in Action
13:48
7
Maximizing Value from AI Tools: Cost and Strategy Guide
7:25
8
Solving Documentation Chaos with Context7
11:17
9
Open Source AI Assistants: Cline and Roo Code
7:59
10
Inside Cline: Installing and Managing MCPs
14:08
11
Cline Rules: Customizing AI Behavior for Your Projects
7:50
12
Choosing and Using AI Models in Cline with OpenRouter
8:50
13
Mastering Plan and Act Workflow with a Modern Snake Game
10:23
14
Defining Scope and Starting the Code
8:58
What’s an MCP server?
Okay, so MCP stands for Model Context Protocol. It’s basically a way to let AI tools (like chatbots or virtual assistants) connect with other programs or data—like files on your computer, your calendar, or even apps like Google Drive or Slack.
Before this, if you wanted an AI to do something like check your calendar or read a document, the developer had to build a custom connection just for that one thing. It took a lot of time and effort.
MCP makes this easier. It’s like giving the AI a universal plug so it can talk to all sorts of services using the same setup. Instead of building everything from scratch, you just follow the MCP format and it works with anything that supports it.
The MCP server is the thing that sits between the AI and the app or data source. It listens for requests from the AI and then goes and gets the info or performs the task, like opening a file or sending a message.
Developers can build these servers using ready-made tools (called SDKs) in popular coding languages like Python or JavaScript. There are even pre-made examples online you can use or learn from.
Why is MCP useful?
One of the biggest problems when building AI tools is that every app or service is different. If you want your AI to pull info from Google Drive, or access someone’s local files, or talk to some API, you usually have to build a separate connection for each one. And that’s a lot of work—especially when you're working with different tools, languages, or frameworks.
That’s where the Model Context Protocol comes in. Its main goal is to standardize how AI connects to external stuff.
So instead of writing new code every time, developers follow the same structure. It’s like everyone agreeing on one common way to talk to the AI. That means once you've set it up, it doesn’t really matter what the tool or system is, or what language it’s written in. If it supports MCP, it just works.
This is super helpful because it makes everything more consistent and predictable. Whether you’re using JavaScript, Python, or anything else—if you're following MCP, your AI knows what to expect.
And if you’re building tools for AI, you can focus on what your server actually does—like getting files, sending data, or doing calculations—instead of reinventing the wheel every time.
So yeah, the magic of MCP is in the standard. It keeps everything organized, saves a lot of time, and makes AI way easier to hook up to real-world tools.
Hugging Face MCP
Now we're gonna start building our very first MCP server. We're gonna start with one which is made for Hugging Face Spaces. What it does is it connects Claude AI to Hugging Face Spaces. For example, here we have Claude that uses the Flux model to create an image. If you've never heard about Hugging Face, basically it's like a big collection of open source AI models. If we go to their model page, you can see all the available models. Here we have DeepSeek, their latest model is 3.1. You have Qwen, another AI from China. And then we have Sesame, the text-to-speech, which is really good in conversation. Mistral, an AI from a French company. Here's Flux1, that's what the example was showing.
And it's not just about LLMs. Hugging Face has all kinds of models that do all kinds of tasks. For example, this one creates vectors from images or text. If you scroll down, you can see the model architecture and how it works under the hood. This is really good for open source AI research. Inside Hugging Face, we have something called Spaces. Spaces is what allows us to test the AI models, and this is what the MCP server that we're going to install is going to leverage. Here you see all the spaces where you could try these models. For example, LHM takes a reference image and a reference motion and combines the two. We can click on their project to see their project page and how it works.
Here we have their page showing how it works with some demonstrations. We have a reference image and the reference motion. It then combines the two into a 3D character. Again you have a reference with a motion - it detects the motion and puts the reference image on top of it and creates a 3D model. So it's really good.
You can see that there are all kinds of models on Hugging Face. With all these models and spaces available, you can really see the potential with this MCP server - Claude AI has access to all of these spaces and basically has so much more potential.
Keep in mind that in Hugging Face, if you use models that use a lot of resources like for video, then you're going to need to have some credit or pay for some credit to test it out. But if you're just using image generation or transcriptions, then that's fine. If you want to test out some video work, you can buy some credits for it.
For example, we have this Flux model here in this space. What the MCP does is it connects the Claude AI to this space in particular. We just enter a prompt and it's going to generate the image, and Claude AI will have full context of this.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Videos
1
Getting Started with MCP Servers: A Beginner's Guide
Connecting Claude AI with Hugging Face Tools
9:23
2
Integrating Claude AI with Hugging Face via MCP Server
Editing Claude’s Config File for MCP Integration
10:20
3
Expanding Your MCP Server with Hugging Face Tools
Updating the MCP Config File with New Tools
15:58
4
Manus AI Explained: How Autonomous Agents Are Changing the Game
How It Works: The Tech Stack Behind the Agent
8:17
5
Using an AI Agent for Product Research
Key Takeaways: Real Value from Real AI Workflows
14:09
6
Breaking Down Genspark: Multi-Model Intelligence in Action
A Real Use Case for Lead Generation
13:48
7
Maximizing Value from AI Tools: Cost and Strategy Guide
Breaking Down the Credit Usage
7:25
8
Solving Documentation Chaos with Context7
Real-World Examples: Accurate Code from Official Sources
11:17
9
Open Source AI Assistants: Cline and Roo Code
Why Open Source Matters: Transparency, Control, and Cost
7:59
10
Inside Cline: Installing and Managing MCPs
Testing MCP Tools: From Wiping Logs to Fetching Data
14:08
11
Cline Rules: Customizing AI Behavior for Your Projects
Using the .clinerules Folder for Modular Rule Management
7:50
12
Choosing and Using AI Models in Cline with OpenRouter
Avoiding Context Truncation with Max Models
8:50
13
Mastering Plan and Act Workflow with a Modern Snake Game
Understanding Plan Mode: Mapping Before Coding
10:23
14
Defining Scope and Starting the Code
Building Game Logic and AI Snake
8:58
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Vanh Roeung
Developer
Developer at Design+Code
3 courses - 17 hours

Claude Code Crash Course on Agentic Workflows
This course teaches you how to use Claude Code efficiently with slash commands, hooks, parallel workflows, and more. You’ll learn the mindset of working with AI, simplify repetitive tasks and connect tools into one unified agentic workflow, giving you everything you need to go from idea to working app.
1 hrs

Master Agentic Workflows
In this course, you’ll learn how to add agents to your workflows. An agent workflow is more than just a simple automation. Instead of following a fixed script, agents can make decisions, adjust to changes, and figure out the best way to complete a task. We’ll start by exploring what MCP servers are and all the new possibilities they bring. Then, we’ll dive into agentic frameworks that make it easy to build flexible, helpful agents that can take care of your everyday tasks.
2 hrs

Build a React Native app with Claude AI
This comprehensive course explores the integration of cutting-edge AI tools into the React Native development workflow, revolutionizing the approach to mobile application creation. Participants will learn to leverage AI-powered platforms such as Claude and Locofy to expedite coding processes, enhance problem-solving capabilities, and optimize productivity.
14 hrs