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
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
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.
Sourasith Phomhome
UI Designer
Designer at Design+Code
20 courses - 78 hours
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
Design Multiple Apps with Figma and AI
In this course, you’ll learn to design multiple apps using Figma and AI-powered tools, tackling a variety of real-world UI challenges. Each week, a new episode will guide you through a different design, helping you master essential UI/UX principles and workflows
4 hrs
SwiftUI Fundamentals Handbook
A comprehensive guide to mastering Swift programming fundamentals, designed for aspiring iOS developers. This handbook provides a structured approach to learning Swift's core concepts, from basic syntax to advanced programming patterns. Through carefully sequenced chapters, readers will progress from essential programming concepts to object-oriented principles, building a solid foundation for SwiftUI development. Each topic includes practical examples and clear explanations, ensuring a thorough understanding of Swift's capabilities. This handbook serves as both a learning resource and a reference guide, covering fundamental concepts required for modern iOS development. Topics are presented in a logical progression, allowing readers to build their knowledge systematically while gaining practical programming skills.
2 hrs
Design and Code User Interfaces with Galileo and Claude AI
In this course, you’ll learn how to use AI tools to make UI/UX design faster and more efficient. We’ll start with Galileo AI to create basic designs, providing a solid foundation for your ideas. Next, we’ll refine these designs in Figma to match your personal style, and finally, we’ll use Claude AI to turn them into working code—eliminating the need for traditional prototyping.
4 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
Design and Prototype for iOS 18
Design and Prototype for iOS 18 is an immersive course that equips you with the skills to create stunning, user-friendly mobile applications. From mastering Figma to understanding iOS 18's latest design principles, you'll learn to craft two real-world apps - a Car Control interface and an AI assistant.
3 hrs
Master Responsive Layouts in Figma
Creating responsive layouts is a must-have skill for any UI/UX designer. With so many different devices and screen sizes, designing interfaces that look great and work well on all platforms is necessary. Mastering this skill will make you stand out in the field. In this course, we'll start from scratch to create this beautiful design using Figma. You'll learn how to make layouts that are easy to use and work well on any device. We'll cover key concepts and tools to help you master responsive design in Figma.
2 hrs
UI UX Design with Mobbin and Figma
Mobbin is a powerful tool for UI/UX designers seeking inspiration and innovative design solutions. This platform offers a vast collection of real-world mobile app designs, providing a treasure trove of UI elements and layouts.
2 hrs
3D UI Interactive Web Design with Spline
Learn to create 3D designs and UI interactions such as 3D icons, UI animations, components, variables, screen resize, scrolling interactions, as well as exporting, optimizing, and publishing your 3D assets on websites
3 hrs
Design and Prototype for iOS 17 in Figma
Crafting engaging experiences for iOS 17 and visionOS using the Figma design tool. Learn about Figma's new prototyping features, Dev Mode, variables and auto layout.
6 hrs
Design and Prototype Apps with Midjourney
A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools
8 hrs
iOS Design with Midjourney and Figma
Learn the fundamentals of App UI design and master the art of creating beautiful and intuitive user interfaces for mobile applications
1 hrs
UI Design for iOS, Android and Web in Sketch
Create a UI design from scratch using Smart Layout, Components, Prototyping in Sketch app
1 hrs
UI Design a Camera App in Figma
Design a dark, vibrant and curvy app design from scratch in Figma. Design glass icons, lens strokes and realistic buttons.
1 hrs
UI Design for iOS 16 in Sketch
A complete guide to designing for iOS 16 with videos, examples and design files
3 hrs
Prototyping in Figma
Learn the basics of prototyping in Figma by creating interactive flows from custom designs
1 hrs
UI Design Quick Websites in Figma
Learn how to design a portfolio web UI from scratch in Figma
1 hrs
UI Design Android Apps in Figma
Design Android application UIs from scratch using various tricks and techniques in Figma
2 hrs
UI Design Quick Apps in Figma
Design application UIs from scratch using various tricks and techniques in Figma
12 hrs
Figma Handbook
A comprehensive guide to the best tips and tricks in Figma
6 hrs
