Curso
Desarrollo de aplicaciones LLM con LangChain
3 h
50.6K
El Model Context Protocol (MCP) es un estándar abierto para conectar modelos de IA con herramientas, APIs y fuentes de datos externas. Ofrece una forma estandarizada para que los modelos de lenguaje grandes (LLM) interactúen con sistemas externos.
A medida que avanzamos hacia flujos de trabajo agénticos, donde los sistemas de IA actúan como agentes autónomos, aprender MCP es cada vez más importante. El ecosistema de Gradio ofrece la manera más sencilla y eficiente de crear servidores MCP, lo que permite a los desarrolladores construir potentes herramientas de IA con un esfuerzo mínimo.
En este tutorial, vamos a:
- Configurar un servidor MCP sencillo con Gradio en local y probarlo.
- Crear un servidor MCP listo para producción con varias herramientas.
- Desplegarlo en Hugging Face Spaces.
- Probarlo con Cursor AI y Claude Desktop.
Si te apetece aprender de forma práctica con Designing Agentic Systems with LangChain, te recomendamos nuestro curso.
Primeros pasos con Gradio MCP
La última versión de Gradio (5.32.0) ya es compatible de forma nativa con MCP, lo que facilita muchísimo crear y ejecutar servidores MCP. Solo necesitas activar el soporte MCP mediante un argumento de código sencillo o una variable de entorno.
Los servidores MCP de Gradio usan el protocolo Server-Sent Events (SSE), que ofrece comunicación en tiempo real y unidireccional del servidor al cliente: perfecto para hacer streaming de respuestas de LLM.
1. Instala la última versión de Gradio con soporte MCP.
pip install -U "gradio[mcp]"2. Crea una app de Gradio que tome el nombre de una ciudad como entrada y devuelva datos del tiempo (en este caso, simulados). Es un buen punto de partida, sobre todo si ya conoces el framework Gradio.
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. Hay dos formas de activar el soporte MCP en Gradio:
- Usando el argumento
mcp_server:demo.launch(mcp_server=True) - Usando una variable de entorno:
export GRADIO_MCP_SERVER=True
4. Guarda el archivo de Python test.py y ejecútalo.
$ 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/sseVerás dos URLs en la salida de la terminal:
- URL de la app: http://127.0.0.1:7860 (abre la app de Gradio en tu navegador).
- URL del servidor MCP: http://127.0.0.1:7860/gradio_api/mcp/sse (lo usan los clientes compatibles con MCP).
5. Abre la URL de la app (http://127.0.0.1:7860) en tu navegador. Escribe el nombre de una ciudad (p. ej., Tokyo) y consulta el tiempo.
6. En la parte inferior de la app, haz clic en el botón "Use via API or MCP". Se mostrará información adicional sobre la API de tu app y el servidor MCP.
7. Para probar el servidor MCP con Cursor AI, abre la configuración de Cursor, ve a la pestaña "MCP" y haz clic en el botón "+ Add new global MCP server".
8. Añade la siguiente configuración JSON al archivo de ajustes de MCP:
{
"mcpServers": {
"gradio": {
"url": "http://127.0.0.1:7860/gradio_api/mcp/sse"
}
}
}9. Guarda el archivo. Ahora verás un servidor MCP activo llamado gradio con la herramienta check_weather.
Para probar este servidor MCP, crearemos un nuevo chat en modo agente de Cursor usando (CTRL + T) y preguntaremos por el tiempo en Tokyo. Cursor pedirá permiso para ejecutar la herramienta MCP. Apruébalo.
Como resultado, el servidor MCP recuperará los datos del tiempo y devolverá el resultado:
Crear un servidor MCP con múltiples herramientas en Gradio
Vamos a crear algo práctico y listo para producción. En este proyecto, construiremos un servidor MCP con varias herramientas usando Gradio.
El servidor incluirá dos herramientas:
- Herramienta de tiempo en vivo: obtiene datos meteorológicos en tiempo real mediante la API de Tavily.
- Herramienta de noticias de la ciudad: recupera los 5 titulares más recientes sobre una ciudad con la API de Tavily.
Este servidor ayudará a planificar viajes proporcionando tanto actualizaciones del tiempo como noticias relevantes.
Vamos a configurar el servidor MCP, probarlo en local, desplegarlo en Hugging Face Spaces y probar el servidor desplegado con Cursor AI y Claude Desktop.
1. Configuración inicial
Debemos crear un nuevo Space en https://huggingface.co/new-space, añadir el nombre de la app, una breve descripción y seleccionar Gradio como plantilla.
Fuente: new-space
Una vez creado, se te redirigirá a tu nuevo Space. Sigue las instrucciones para configurarlo.
Clona el repositorio en tu directorio local del proyecto
git clone https://huggingface.co/spaces/kingabzpro/live-city-mcpPara este proyecto utilizaremos la API de Tavily para búsquedas web; crea una cuenta en Tavily AI y genera una clave de API.
Fuente: Tavily AI
Después, guarda la clave como variable de entorno en tu sistema local
TAVILY_API_KEY="API-KEY"A continuación, instala el SDK de Tavily para Python
pip install tavily-python2. Creación del servidor MCP
Este servidor MCP tiene dos herramientas, ambas usan la API de Tavily para acceder a la información más reciente de la web. La primera toma el nombre de una ciudad y genera un informe meteorológico detallado; la segunda toma el nombre de la ciudad y lista los titulares de las cinco noticias principales de la zona. Creamos una interfaz gráfica para cada herramienta y después las combinamos usando una interfaz con pestañas.
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. Prueba del servidor MCP en local
Antes de desplegar el servidor MCP, es esencial probarlo en local. Inicia el servidor ejecutando el siguiente comando en la terminal:
python app.pySalida:
* 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/sseAbre el navegador y ve a http://127.0.0.1:7860 e introduce el nombre de una ciudad en el cuadro de entrada. El servidor devolverá información detallada del tiempo en formato JSON.
La aplicación debería funcionar sin problemas, ofreciendo datos precisos de tiempo y noticias para la ciudad introducida.
4. Despliegue del servidor MCP en Hugging Face Spaces
Para desplegar el servidor, sigue estos pasos:
1. Crea el archivo requirements.txt y añade la siguiente dependencia:
tavily-python==0.7.32. Haz commit de los cambios y súbelos al Space de Hugging Face.
git add .
live-city-mcp git commit -m "weather and news MCP"
git push Una vez enviados, el Space de Hugging Face empezará a compilar.
Fuente: Live City Mcp
Tras aproximadamente un minuto, el servidor MCP estará en vivo y accesible en Live City Mcp.
Fuente: Live City Mcp
3. Antes de usarlo como servidor MCP, tenemos que definir la variable de entorno con el token de acceso de Tavily. Para ello, ve a la configuración del Space, desplázate hacia abajo y haz clic en "New Secret". Después, añade la clave de API y el nombre de la API de Tavily.
Fuente: live-city-mcp/settings
5. Prueba del servidor MCP desplegado con Cursor AI
Nuestro MCP está desplegado y funcionando correctamente. Ahora, vamos a configurar el cliente MCP. Primero, configuraremos Cursor AI. Ve a la configuración de Cursor, haz clic en la pestaña MCP y luego en el botón "+Add new global MCP server". Introduce el siguiente código:
{
"mcpServers": {
"weather-news": {
"url": "https://kingabzpro-live-city-mcp.hf.space/gradio_api/mcp/sse"
}
}
}Verás que el MCP weather-news está funcionando bien con dos herramientas. Vamos a preguntar por el tiempo en Islamabad.
Como puedes ver, ha respondido rápido y con precisión.
Podemos verificarlo buscando en Internet y consultando el tiempo en AccuWeather.
Fuente: AccuWeather
Ahora, probemos la segunda herramienta preguntando por las noticias de Islamabad.
Como resultado, recibimos una lista de cuatro titulares sobre Pakistán. Si la API de Tavily no encuentra nada de las últimas noticias de Islamabad, pasará a noticias a nivel país.
6. Prueba del servidor MCP desplegado con Claude Desktop
Vamos a configurar Claude Desktop yendo a los ajustes, haciendo clic en la opción "Developer" y luego en el botón "Edit Config". Esto te llevará a la carpeta donde debes editar el archivo claude_desktop_config.json.
Actualmente, Claude Desktop no es compatible con servidores MCP basados en SSE. En estos casos, puedes usar una herramienta llamada mcp-remote.
Para ejecutar mcp-remote, primero debes instalar Node.js visitando la página de descarga de Node.js®. Luego, añade el siguiente código a tu archivo claude_desktop_config.json:
"Live City MCP": {
"command": "npx",
"args": [
"mcp-remote",
"https://kingabzpro-live-city-mcp.hf.space/gradio_api/mcp/sse",
"--transport",
"sse-only"
]
}Aquí tienes un ejemplo de cómo añadir la configuración del servidor MCP.
Cuando termines, cierra la aplicación Claude Desktop y vuelve a abrirla. Verás acceso al nuevo servidor MCP llamado "Live City MCP", que incluye dos herramientas disponibles.
Voy a viajar a Irlanda pronto, así que pregunté por el tiempo en Dublín y recibí resultados muy buenos.
La mejor forma de acceder al servidor MCP es con Claude Desktop. Es interactivo y ofrece capacidades extra para el uso de herramientas y para mostrar la información de forma clara.
Conclusión
Si ya sabes crear aplicaciones de Gradio para proyectos de aprendizaje automático, convertir tu app en un servidor MCP nunca ha sido tan fácil. Con un único argumento (mcp_server=True), tu app de Gradio también puede funcionar como servidor MCP, lo que permite integrarla sin fricciones con herramientas como Cursor AI y Claude Desktop. Esto abre posibilidades muy interesantes para conectar tus aplicaciones de IA con sistemas y flujos de trabajo externos.
En este tutorial, hemos visto los fundamentos de Gradio MCP, aprendido a crear y probar un servidor MCP, y trabajado en un proyecto práctico usando la API de Tavily para obtener tiempo en vivo y noticias de ciudades. Para terminar, desplegamos el proyecto en Hugging Face Spaces y lo probamos con clientes compatibles con MCP muy populares.
Si quieres profundizar en IA agéntica y otros conceptos tratados en este tutorial, te recomendamos estos recursos:
