Cursus
LLM-toepassingen ontwikkelen met LangChain
3 uur
52K
Het Model Context Protocol (MCP) is een open standaard om AI-modellen te verbinden met externe tools, API’s en databronnen. Het biedt een gestandaardiseerde manier voor large language models (LLM’s) om met externe systemen te communiceren.
Nu de wereld verschuift naar agentische workflows, waarin AI-systemen optreden als autonome agents, wordt MCP leren steeds belangrijker. Het Gradio-ecosysteem biedt de eenvoudigste en efficiëntste manier om MCP-servers te bouwen, zodat developers met minimale inspanning krachtige AI-tools kunnen maken.
In deze tutorial gaan we:
- Lokaal een simpele Gradio MCP-server opzetten en testen.
- Een productieklare MCP-server bouwen met meerdere tools.
- Deze deployen naar Hugging Face Spaces.
- Hem testen met Cursor AI en Claude Desktop.
Wil je hands-on aan de slag met Designing Agentic Systems with LangChain, bekijk dan zeker onze course.
Aan de slag met Gradio MCP
De nieuwste versie van Gradio (5.32.0) ondersteunt nu MCP native, waardoor MCP-servers bouwen en draaien extreem eenvoudig is. Je hoeft alleen MCP-ondersteuning in te schakelen via een simpele codeparameter of een omgevingsvariabele.
Gradio MCP-servers gebruiken het Server-Sent Events (SSE)-protocol, dat realtime, eenrichtingscommunicatie van de server naar de client biedt—perfect voor het streamen van reacties van LLM’s.
1. Installeer de nieuwste versie van Gradio met MCP-ondersteuning.
pip install -U "gradio[mcp]"2. Bouw een Gradio-app die een stadsnaam als input neemt en weergegevens retourneert (in dit geval mockdata). Dit is een prima startpunt, zeker als je al bekend bent met het Gradio-framework.
import gradio as gr
def check_weather(city):
"""
Simple weather checker function (mock data for demonstration).
Args:
city (str): The city name to check weather for
Returns:
str: Weather information for the city
"""
# Mock weather data for demonstration
weather_data = {
"london": "Cloudy, 15°C",
"paris": "Sunny, 22°C",
"tokyo": "Rainy, 18°C",
"new york": "Partly cloudy, 20°C",
"sydney": "Sunny, 25°C",
}
city_lower = city.lower().strip()
if city_lower in weather_data:
return f"Weather in {city.title()}: {weather_data[city_lower]}"
else:
return f"Weather data not available for {city}. Try: London, Paris, Tokyo, New York, or Sydney"
demo = gr.Interface(
fn=check_weather,
inputs=[gr.Textbox("London", label="Enter city name")],
outputs=[gr.Textbox(label="Weather Info")],
title="Simple Weather Checker",
description="Enter a city name to check the weather (demo with mock data).",
)
if __name__ == "__main__":
demo.launch(mcp_server=True)3. Er zijn twee manieren om MCP-ondersteuning in Gradio in te schakelen:
- Met het
mcp_server-argument:demo.launch(mcp_server=True) - Met een omgevingsvariabele:
export GRADIO_MCP_SERVER=True
4. Sla het Python-bestand test.py op en voer het uit.
$ python test.py
* Running on local URL: http://127.0.0.1:7860
* To create a public link, set `share=True` in `launch()`.
🔨 MCP server (using SSE) running at: http://127.0.0.1:7860/gradio_api/mcp/sseJe ziet twee URL’s in de terminaluitvoer:
- App-URL: http://127.0.0.1:7860 (opent de Gradio-app in je browser).
- MCP-server-URL: http://127.0.0.1:7860/gradio_api/mcp/sse (gebruikt door MCP-compatibele clients).
5. Open de app-URL (http://127.0.0.1:7860) in je browser. Voer een stadsnaam in (bijv. Tokyo) en bekijk het weer.
6. Klik onderaan de app op de knop "Via API of MCP gebruiken". Dit toont extra informatie over de API en MCP-server van je app.
7. Om de MCP-server met Cursor AI te testen, open je Cursor-instellingen, ga je naar het tabblad “MCP” en klik je op de knop “+ Add new global MCP server”.
8. Voeg de volgende JSON-configuratie toe aan het MCP-instellingenbestand:
{
"mcpServers": {
"gradio": {
"url": "http://127.0.0.1:7860/gradio_api/mcp/sse"
}
}
}9. Sla het bestand op. Je ziet nu een actieve MCP-server met de naam gradio met de tool check_weather.
Om deze MCP-server te testen maken we een nieuwe chat in agentmodus in Cursor (CTRL + T) en vragen we naar het weer in Tokyo. Cursor zal om toestemming vragen om de MCP-tool uit te voeren. Keur dit goed.
Als resultaat haalt de MCP-server de weergegevens op en geeft het resultaat terug:
Multi-tool MCP-server bouwen met Gradio
Laten we iets praktisch en productie-klaar maken. In dit project bouwen we een multi-tool MCP-server met Gradio.
De server bevat twee tools:
- Live weertool: haalt realtime weergegevens op via de Tavily-API.
- Stadsnieuws-tool: haalt de laatste 5 krantenkoppen over een stad op via de Tavily-API.
Deze server helpt gebruikers hun reis te plannen met zowel weerupdates als relevant nieuws.
We zetten de MCP-server op, testen hem lokaal, deployen hem op Hugging Face Spaces en testen de gedeployde server met Cursor AI en Claude Desktop.
1. Opzetten
We moeten een nieuwe Space aanmaken via https://huggingface.co/new-space, de naam van de app toevoegen, een korte beschrijving geven en Gradio als template kiezen.
Bron: new-space
Na het aanmaken word je doorgestuurd naar je nieuwe Space. Volg de instructies om deze in te richten.
Kloon de repository naar je lokale projectmap
git clone https://huggingface.co/spaces/kingabzpro/live-city-mcpVoor dit project gebruiken we de Tavily-API voor webzoekmogelijkheden; maak een account aan op Tavily AI en genereer een API-sleutel.
Bron: Tavily AI
Sla de API-sleutel daarna op als omgevingsvariabele op je lokale systeem
TAVILY_API_KEY="API-KEY"Installeer vervolgens de Tavily Python SDK
pip install tavily-python2. De MCP-server maken
Deze MCP-server heeft twee tools die beide de Tavily-API gebruiken om de nieuwste informatie van het web te halen. De eerste tool neemt een stadsnaam en genereert een gedetailleerd weerbericht, terwijl de tweede tool de stadsnaam neemt en de koppen toont van de vijf belangrijkste nieuwsberichten in de omgeving. We maakten een grafische interface voor elke tool en combineerden ze daarna met een tab-interface.
app.py:
import gradio as gr
from tavily import TavilyClient
def get_city_weather_info(city_name):
"""
Search for current weather information about a city using Tavily search API
Args:
city_name (str): Name of the city
api_key (str): Your Tavily API key
Returns:
dict: Search results containing weather information
"""
# Initialize Tavily client
client = TavilyClient()
# Search for current weather information
search_query = f"current weather in {city_name} temperature humidity conditions"
try:
# Perform the search
response = client.search(
query=search_query, search_depth="basic", max_results=5
)
# Extract relevant information from search results
weather_info = {"city": city_name, "search_query": search_query, "results": []}
# Process each search result
for result in response.get("results", []):
weather_info["results"].append(
{
"title": result.get("title", ""),
"content": result.get("content", ""),
"url": result.get("url", ""),
}
)
# Add the answer if available
if "answer" in response:
weather_info["summary"] = response["answer"]
return weather_info
except Exception as e:
return {
"city": city_name,
"error": f"Failed to fetch weather information: {str(e)}",
}
def get_city_news(city_name):
"""
Fetches the top 5 news articles for a given city using the Tavily API.
Args:
city_name (str): Name of the city
Returns:
dict: News results containing the top 5 articles or an error message
"""
# Initialize Tavily client
client = TavilyClient()
# Search query for news about the city
search_query = f"Top 5 latest news articles about {city_name}, including major events, politics, economy, and local updates."
try:
# Perform the search
response = client.search(
query=search_query,
search_depth="advanced",
max_results=5,
)
# Extract relevant information from search results
news_info = {"city": city_name, "search_query": search_query, "articles": []}
# Process each search result
for result in response.get("results", []):
news_info["articles"].append(
{
"title": result.get("title", ""),
"content": result.get("content", ""),
"url": result.get("url", ""),
}
)
# Add the answer if available
if "answer" in response:
news_info["summary"] = response["answer"]
return news_info
except Exception as e:
return {"city": city_name, "error": f"Failed to fetch news: {str(e)}"}
# Create Gradio interfaces
weather_demo = gr.Interface(
fn=get_city_weather_info,
inputs=gr.Textbox(label="Enter City Name", placeholder="e.g., New York"),
outputs=gr.JSON(label="Weather Information"),
description="Get current weather details for a city.",
)
news_demo = gr.Interface(
fn=get_city_news,
inputs=gr.Textbox(label="Enter City Name", placeholder="e.g., London"),
outputs=gr.JSON(label="News Articles"),
description="Get the latest news articles for a city.",
)
# Create tabbed interface
demo = gr.TabbedInterface(
[weather_demo, news_demo], ["Weather", "News"], title="City Information Hub"
)
if __name__ == "__main__":
# Launch without MCP server to avoid initialization issues
demo.launch(share=False, mcp_server=True, debug=True)3. De MCP-server lokaal testen
Voordat we de MCP-server deployen, is het essentieel om hem lokaal te testen. Start de server door het volgende commando in de terminal uit te voeren:
python app.pyUitvoer:
* Running on local URL: http://127.0.0.1:7860
* To create a public link, set `share=True` in `launch()`.
🔨 MCP server (using SSE) running at: http://127.0.0.1:7860/gradio_api/mcp/sseOpen je browser en ga naar http://127.0.0.1:7860 en voer een stadsnaam in in het invoerveld. De server retourneert gedetailleerde weerinformatie in JSON-formaat.
De applicatie zou probleemloos moeten werken en accurate weer- en nieuwsgegevens voor de ingevoerde stad tonen.
4. De MCP-server deployen naar Hugging Face Spaces
Volg deze stappen om de server te deployen:
1. Maak het bestand requirements.txt aan en voeg de volgende dependency toe:
tavily-python==0.7.32. Commit de wijzigingen en push ze vervolgens naar de Hugging Face Space.
git add .
live-city-mcp git commit -m "weather and news MCP"
git push Na het pushen begint de Hugging Face Space met builden.
Bron: Live City Mcp
Na ongeveer een minuut is de MCP-server live en bereikbaar op Live City Mcp.
Bron: Live City Mcp
3. Voordat we hem als MCP-server gebruiken, moeten we de omgevingsvariabele met het Tavily-toegangstoken instellen. Ga hiervoor naar de Space-instellingen, scrol naar beneden en klik op de knop "New Secret". Voeg vervolgens de API-sleutel en de Tavily-API-naam toe.
Bron: live-city-mcp/settings
5. De gedeployde MCP-server testen met Cursor AI
Onze MCP is gedeployd en werkt correct. Nu richten we de MCP-client in. Eerst configureren we Cursor AI. Ga naar de Cursor-instellingen, klik op het MCP-tabblad en klik vervolgens op de knop “+Add new global MCP server.” Voer de volgende code in:
{
"mcpServers": {
"weather-news": {
"url": "https://kingabzpro-live-city-mcp.hf.space/gradio_api/mcp/sse"
}
}
}Je ziet dat de weather-news MCP prima draait met twee tools. Laten we een vraag stellen over het weer in Islamabad.
Zoals je ziet reageert hij snel en accuraat.
We kunnen de juistheid verifiëren door online te zoeken en het weer op AccuWeather te checken.
Bron: AccuWeather
Laten we vervolgens de tweede tool testen door te vragen naar nieuws rond Islamabad.
We kregen een lijst met vier krantenkoppen over Pakistan. Als de Tavily-API niets kan vinden over het laatste nieuws uit Islamabad, schakelt hij over naar nieuws op landniveau.
6. De gedeployde MCP-server testen met Claude Desktop
Laten we Claude Desktop instellen via de instellingen, klik op “Developer” en klik op de knop “Edit Config”. Dit brengt je naar de map waar je het bestand claude_desktop_config.json moet bewerken.
Claude Desktop ondersteunt momenteel geen op SSE gebaseerde MCP-servers. In zulke gevallen kun je een tool gebruiken genaamd mcp-remote.
Om mcp-remote te draaien, moet je eerst Node.js installeren via de Download Node.js®-pagina. Voeg daarna de volgende code toe aan je claude_desktop_config.json-bestand:
"Live City MCP": {
"command": "npx",
"args": [
"mcp-remote",
"https://kingabzpro-live-city-mcp.hf.space/gradio_api/mcp/sse",
"--transport",
"sse-only"
]
}Hier is een voorbeeld van het toevoegen van de MCP-serverconfiguratie.
Nadat je dit hebt gedaan, sluit je de Claude Desktop-app en start je deze opnieuw. Je ziet dan toegang tot de nieuwe MCP-server “Live City MCP”, met twee beschikbare tools.
Ik reis binnenkort naar Ierland, dus ik vroeg naar het weer in Dublin en kreeg hele goede resultaten.
De beste manier om toegang te krijgen tot de MCP-server is via Claude Desktop. Het is interactief en biedt extra mogelijkheden voor het gebruik van tools en het overzichtelijk weergeven van informatie.
Conclusie
Als je al bekend bent met het maken van Gradio-applicaties voor machinelearningprojecten, is het omzetten van je bestaande app naar een MCP-server nog nooit zo eenvoudig geweest. Met slechts één argument (mcp_server=True) kan je Gradio-app ook functioneren als MCP-server, wat naadloze integratie mogelijk maakt met tools zoals Cursor AI en Claude Desktop. Dit opent spannende mogelijkheden om je AI-applicaties te koppelen aan externe systemen en workflows.
In deze leuke tutorial hebben we de basis van Gradio MCP verkend, geleerd hoe je een MCP-server bouwt en test, en gewerkt aan een praktisch project dat de Tavily-API gebruikt om live weerdata en stadsnieuws op te halen. Tot slot hebben we het project gedeployd op Hugging Face Spaces en getest met populaire MCP-compatibele clients.
Wil je meer leren over agentische AI en andere concepten die we in deze tutorial hebben behandeld, bekijk dan de onderstaande resources:
