Curso
Desenvolvimento de aplicativos de LLM com LangChain
3 h
50.6K
O Model Context Protocol (MCP) é um padrão aberto para conectar modelos de IA a ferramentas, APIs e fontes de dados externas. Ele fornece uma forma padronizada para grandes modelos de linguagem (LLMs) interagirem com sistemas externos.
À medida que o mundo avança para fluxos de trabalho agentic, em que sistemas de IA atuam como agentes autônomos, aprender MCP se torna cada vez mais importante. O ecossistema do Gradio oferece a forma mais simples e eficiente de criar servidores MCP, permitindo que desenvolvedores construam ferramentas de IA poderosas com o mínimo de esforço.
Neste tutorial, vamos:
- Configurar um servidor Gradio MCP simples localmente e testá-lo.
- Criar um servidor MCP pronto para produção com várias ferramentas.
- Fazer deploy no Hugging Face Spaces.
- Testá-lo com Cursor AI e Claude Desktop.
Se você quer colocar a mão na massa com Designing Agentic Systems with LangChain, vale conferir nosso curso.
primeiros passos com o Gradio MCP
A versão mais recente do Gradio (5.32.0) agora oferece suporte nativo ao MCP, tornando incrivelmente fácil criar e executar servidores MCP. Tudo o que você precisa fazer é ativar o suporte a MCP por um argumento simples no código ou por variável de ambiente.
Servidores MCP no Gradio usam o protocolo Server-Sent Events (SSE), que fornece comunicação em tempo real, unidirecional, do servidor para o cliente — perfeito para transmitir respostas de LLMs.
1. Instale a versão mais recente do Gradio com suporte a MCP.
pip install -U "gradio[mcp]"2. Crie um app Gradio que receba o nome de uma cidade como entrada e retorne dados de clima (neste caso, dados simulados). É um ótimo ponto de partida, especialmente se você já conhece o 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. Existem duas formas de ativar o suporte a MCP no Gradio:
- Usando o argumento
mcp_server:demo.launch(mcp_server=True) - Usando uma variável de ambiente:
export GRADIO_MCP_SERVER=True
4. Salve o arquivo Python test.py e execute-o.
$ 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/sseVocê verá dois URLs no output do terminal:
- URL do app: http://127.0.0.1:7860 (abre o app Gradio no seu navegador).
- URL do servidor MCP: http://127.0.0.1:7860/gradio_api/mcp/sse (usado por clientes compatíveis com MCP).
5. Abra o URL do app (http://127.0.0.1:7860) no navegador. Digite o nome de uma cidade (por exemplo, Tokyo) e confira o clima.
6. No rodapé do app, clique no botão "Use via API or MCP". Isso exibirá informações extras sobre a API do seu app e o servidor MCP.
7. Para testar o servidor MCP com o Cursor AI, abra as configurações do Cursor, vá até a aba “MCP” e clique em “+ Add new global MCP server”.
8. Adicione a seguinte configuração JSON ao arquivo de configurações do MCP:
{
"mcpServers": {
"gradio": {
"url": "http://127.0.0.1:7860/gradio_api/mcp/sse"
}
}
}9. Salve o arquivo. Agora você verá um servidor MCP ativo chamado gradio com a ferramenta check_weather.
Para testar este servidor MCP, vamos criar um novo chat no modo agent do Cursor usando (CTRL + T) e perguntar sobre o clima em Tokyo. O Cursor pedirá permissão para executar a ferramenta MCP. Aprove.
Como resultado, o servidor MCP buscará os dados de clima e retornará o resultado:
construindo um servidor MCP com múltiplas ferramentas no Gradio
Vamos criar algo prático e pronto para produção. Neste projeto, construiremos um servidor MCP com múltiplas ferramentas usando Gradio.
O servidor terá duas ferramentas:
- Ferramenta de clima ao vivo: busca dados de clima em tempo real usando a API do Tavily.
- Ferramenta de notícias da cidade: recupera as 5 manchetes mais recentes sobre uma cidade usando a API do Tavily.
Esse servidor ajuda usuários a planejarem viagens, reunindo atualizações do clima e notícias relevantes.
Vamos configurar o servidor MCP, testá-lo localmente, fazer deploy no Hugging Face Spaces e testar o servidor publicado usando Cursor AI e Claude Desktop.
1. configuração
Precisamos criar um novo Space acessando https://huggingface.co/new-space, adicionando o nome do app, uma breve descrição e selecionando Gradio como template.
Fonte: new-space
Depois de criado, você será redirecionado para o seu novo Space. Siga as instruções para configurá-lo.
Clone o repositório para o diretório local do seu projeto
git clone https://huggingface.co/spaces/kingabzpro/live-city-mcpPara este projeto, usaremos a API do Tavily para busca na web. Crie uma conta no Tavily AI e gere uma chave de API.
Fonte: Tavily AI
Em seguida, salve a chave de API como variável de ambiente no seu sistema local
TAVILY_API_KEY="API-KEY"Depois, instale o SDK Python do Tavily
pip install tavily-python2. criando o servidor MCP
Este servidor MCP tem duas ferramentas, ambas usando a API do Tavily para acessar as informações mais recentes da web. A primeira recebe o nome de uma cidade e gera um relatório detalhado do clima; a segunda recebe a cidade e lista as manchetes das cinco principais notícias da região. Criamos uma interface gráfica para cada ferramenta e depois as combinamos usando uma interface com abas (Tabbed 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. testando o servidor MCP localmente
Antes de fazer o deploy do servidor MCP, é essencial testá-lo localmente. Inicie o servidor executando o comando abaixo no terminal:
python app.pySaída:
* 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/sseAbra o navegador e acesse http://127.0.0.1:7860 e digite o nome de uma cidade no campo de entrada. O servidor retornará informações detalhadas de clima em formato JSON.
O aplicativo deve funcionar sem problemas, trazendo dados de clima e notícias precisos para a cidade informada.
4. fazendo deploy do servidor MCP no Hugging Face Spaces
Para fazer o deploy do servidor, siga estes passos:
1. Crie o arquivo requirements.txt e adicione a seguinte dependência:
tavily-python==0.7.32. Faça o commit das alterações e depois envie para o Hugging Face Space.
git add .
live-city-mcp git commit -m "weather and news MCP"
git push Assim que você fizer o push, o Hugging Face Space começará a buildar.
Fonte: Live City Mcp
Depois de cerca de um minuto, o servidor MCP estará no ar e acessível em Live City Mcp.
Fonte: Live City Mcp
3. Antes de usá-lo como servidor MCP, precisamos definir a variável de ambiente com o token de acesso do Tavily. Para isso, vá em configurações do Space, role a página e clique em "New Secret". Depois, adicione a chave de API e o nome da API do Tavily.
Fonte: live-city-mcp/settings
5. testando o servidor MCP publicado com o Cursor AI
Nosso MCP está publicado e funcionando direitinho. Agora, vamos configurar o cliente MCP. Primeiro, vamos ajustar o Cursor AI. Vá até as configurações do Cursor, clique na aba MCP e depois no botão "+Add new global MCP server". Insira o código abaixo:
{
"mcpServers": {
"weather-news": {
"url": "https://kingabzpro-live-city-mcp.hf.space/gradio_api/mcp/sse"
}
}
}Você verá que o weather-news está rodando bem com duas ferramentas. Vamos perguntar sobre o clima em Islamabad.
Como dá para ver, a resposta veio rápida e precisa.
Podemos validar conferindo online e checando o clima no AccuWeather.
Fonte: AccuWeather
Agora, vamos testar a segunda ferramenta perguntando sobre as notícias de Islamabad.
Como resultado, recebemos uma lista com quatro manchetes sobre o Paquistão. Se a API do Tavily não encontrar nada muito recente sobre Islamabad, ela muda para notícias em nível de país.
6. testando o servidor MCP publicado com o Claude Desktop
Vamos configurar o Claude Desktop acessando as configurações, clicando em “Developer” e depois em “Edit Config”. Isso abrirá a pasta onde você precisa editar o arquivo claude_desktop_config.json.
O Claude Desktop atualmente não oferece suporte a servidores MCP baseados em SSE. Nesses casos, você pode usar a ferramenta mcp-remote.
Para executar o mcp-remote, primeiro instale o Node.js acessando a página Download Node.js®. Depois, adicione o código abaixo ao seu arquivo 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"
]
}Veja um exemplo de como adicionar a configuração do servidor MCP.
Depois disso, feche o aplicativo Claude Desktop e abra novamente. Você verá acesso ao novo servidor MCP “Live City MCP”, com duas ferramentas disponíveis.
Estou viajando para a Irlanda em breve, então perguntei sobre o clima em Dublin e recebi resultados muito bons.
A melhor forma de acessar o servidor MCP é pelo Claude Desktop. Ele é interativo e oferece recursos extras para uso de ferramentas e exibição clara das informações.
conclusão
Se você já tem experiência criando aplicações Gradio para projetos de machine learning, transformar seu app em um servidor MCP nunca foi tão fácil. Com um único argumento (mcp_server=True), seu app Gradio também passa a funcionar como servidor MCP, permitindo integração fluida com ferramentas como Cursor AI e Claude Desktop. Isso abre possibilidades interessantes para conectar suas aplicações de IA a sistemas e fluxos de trabalho externos.
Neste tutorial prático, exploramos o básico do Gradio MCP, aprendemos a criar e testar um servidor MCP e trabalhamos em um projeto útil usando a API do Tavily para buscar clima ao vivo e notícias da cidade. No final, fizemos o deploy no Hugging Face Spaces e testamos com clientes populares compatíveis com MCP.
Se você quer se aprofundar em IA agentic e outros conceitos que abordamos aqui, recomendo os recursos abaixo:
