Let's build an MCP server (100% local):
Before diving in, here's what we'll be doing today:
- Understand MCP with a simple analogy.
- Build a 100% local and secure MCP client using @mcpuse
- Integrate the client with @Stagehanddev MCP sever
- Use this setup for control and automate browser
Let's go! 🚀
First, let's understand MCP using a translation analogy.
Imagine you only know English. To get info from a person who only knows:
- French, you must learn French.
- German, you must learn German.
- and so on.
Learning even 5 languages will be a nightmare for you!
But what if you find a translator?
- You talk to the translator.
- It infers the info you want.
- It picks the person to talk to.
- It gets you a response.
The translator is like an MCP!
It lets you (Agents) talk to other people (tools) through a single interface.
The client-server architecture:
Host (Agent/IDE) runs the MCP Client to communicate with MCP Servers.
Servers expose tools that can perform various actions.
This architecture enables secure and standardized AI tool integration.
Check this out👇
With this understanding in mind, let's start building our own MCP servers and clients...👇
1️⃣ Build a simple MCP server
First, we create a simple MCP server using FastMCP with a tool that adds two numbers.
Then create a configuration file that tells any client how to connect to this server.
Create these files as shown below👇
2️⃣ Create MCP Client
Next, we build a client using mcp-use, powered by locally running LLMs.
It's completely secure and can run on your machine.
Afterward, we'll wrap up this client in a user-friendly Streamlit UI for ease of use.
Check this out 👇
Let's integrate the MCP client and server we just created.
Here's the Streamlit UI I mentioned earlier.
For didactic purposes, we're starting with a very simple server.
Check this out👇
Now, let's make this more practical. We're going to build a browser automation MCP server using Stagehand.
With this, we can navigate websites, click buttons, fill out forms, and extract data using natural language commands.
Check this out👇
Next, let's interact with Stagehand MCP server.
When asked to find the cheapest flight from one city to another:
- It navigated to Google.
- Typed in the query.
- Scraped the relevant information.
- Returned the results to the agent to generate a response.
See this video👇
Why mcp-use?
You can connect any LLMs to MCP servers & create local MCP clients easily with mcp-use.
- Compatible with Ollama & LangChain
- Stream Agent output async
- Built-in debugging mode, etc
Repo:
(don't forget to star ⭐)github.com/mcp-use/mcp-use
To summarise here's what we covered:
- What is MCP
- How to build your own MCP Server
- How to build a 100% local MCP Client
- Fully automate and control a browser
I'll leave you with this great website to explore more MCP servers...👇
That's a wrap!
If you found it insightful, reshare with your network.
Find me → @akshay_pachaar ✔️
For more insights and tutorials on LLMs, AI Agents, and Machine Learning!
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.