Gradio MCP Sunucu Rehberi: Oluşturma, Test Etme, Dağıtma ve Entegrasyon

Model Context Protocol (MCP), yapay zeka modellerini harici araçlara, API’lere ve veri kaynaklarına bağlamak için açık bir standarttır. Büyük dil modellerinin (LLM) harici sistemlerle etkileşim kurması için standartlaştırılmış bir yol sunar. 

Dünya ajan temelli iş akışlarına, yani yapay zeka sistemlerinin otonom ajanlar olarak hareket ettiği modellere doğru ilerlerken, MCP öğrenmek giderek daha önemli hale geliyor. Gradio ekosistemi, MCP sunucuları oluşturmanın en basit ve en verimli yolunu sunar; geliştiricilerin minimum çabayla güçlü yapay zeka araçları üretmesini sağlar.

Bu eğitimde şunları yapacağız:

1. Yerelde basit bir Gradio MCP sunucusu kurup test edeceğiz.
2. Birden fazla araca sahip, üretime hazır bir MCP sunucusu oluşturacağız.
3. Bunu Hugging Face Spaces’a dağıtacağız.
4. Cursor AI ve Claude Desktop ile test edeceğiz.

LangChain ile Ajan Sistemleri Tasarlama konusunda uygulamalı ilerlemek istiyorsanız kursumuza göz atmanızı öneririm. 

Gradio MCP ile Başlarken

Gradio’nun en son sürümü (5.32.0) artık MCP’yi yerel olarak destekliyor; bu sayede MCP sunucuları kurmak ve çalıştırmak son derece kolay. Tek yapmanız gereken MCP desteğini basit bir kod argümanıyla veya bir ortam değişkeniyle etkinleştirmek. 

Gradio MCP sunucuları, sunucudan istemciye tek yönlü gerçek zamanlı iletişim sağlayan Server-Sent Events (SSE) protokolünü kullanır — LLM’lerden gelen yanıtları akış halinde iletmek için idealdir.

1. MCP desteğiyle birlikte Gradio’nun en güncel sürümünü kurun.

pip install -U "gradio[mcp]"

2. Girdi olarak bir şehir adı alan ve hava durumu verisi döndüren (bu örnekte sahte veri) bir Gradio uygulaması oluşturun. Gradio çerçevesine zaten aşinaysanız bu harika bir başlangıç noktasıdır.

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. Gradio’da MCP desteğini etkinleştirmenin iki yolu vardır:

• mcp_server Argümanı: demo.launch(mcp_server=True)
• Ortam Değişkeni kullanmak: export GRADIO_MCP_SERVER=True

4. Python dosyasını test.py olarak kaydedin ve çalıştırın. 

$ 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/sse

Terminal çıktısında iki URL göreceksiniz:

• Uygulama URL’si: http://127.0.0.1:7860 (Gradio uygulamasını tarayıcınızda açar).
• MCP Sunucu URL’si: http://127.0.0.1:7860/gradio_api/mcp/sse (MCP uyumlu istemciler tarafından kullanılır).

5. Uygulama URL’sini (http://127.0.0.1:7860) tarayıcınızda açın. Bir şehir adı girin (ör. Tokyo) ve hava durumunu kontrol edin.

6. Uygulamanın en altında, "API veya MCP ile kullan" düğmesine tıklayın. Bu, uygulamanızın API’si ve MCP sunucusu hakkında ek bilgiler gösterecektir.

7. MCP sunucusunu Cursor AI ile test etmek için Cursor Ayarlarını açın, “MCP” sekmesine gidin ve “+ Yeni global MCP sunucusu ekle” düğmesine tıklayın.

8. Aşağıdaki JSON yapılandırmasını MCP ayar dosyasına ekleyin:

{
  "mcpServers": {
    "gradio": {
      "url": "http://127.0.0.1:7860/gradio_api/mcp/sse"
    }
  }
}

9. Dosyayı kaydedin. Artık gradio adlı etkin bir MCP sunucusu ve check_weather aracını göreceksiniz.

Bu MCP sunucusunu test etmek için Cursor’da ajan modunda yeni bir sohbet oluşturacağız (CTRL +T) ve Tokyo’daki hava durumunu soracağız. Cursor, MCP aracını çalıştırmak için izin isteyecek. Onaylayın.

Sonuç olarak, MCP sunucusu hava durumu verilerini alacak ve sonucu döndürecektir:

Gradio ile Çok Araçlı MCP Sunucusu Oluşturma

Şimdi pratik ve üretime hazır bir şey oluşturalım. Bu projede Gradio kullanarak çok araçlı bir MCP sunucusu kuracağız. 

Sunucu iki araç içerecek:

1. Canlı hava durumu aracı: Tavily API’yi kullanarak gerçek zamanlı hava durumu verilerini çeker.
2. Şehir haberleri aracı: Tavily API’yi kullanarak bir şehirle ilgili en son 5 haber başlığını getirir.

Bu sunucu, hem hava durumu güncellemeleri hem de ilgili haberleri sağlayarak kullanıcıların seyahatlerini planlamasına yardımcı olur. 

MCP sunucusunu kuracak, yerelde test edecek, Hugging Face Spaces’a dağıtacak ve dağıtılan sunucuyu Cursor AI ve Claude Desktop ile test edeceğiz.

1. Kurulum

https://huggingface.co/new-space adresine gidip yeni bir Space oluşturmalı, uygulamanın adını eklemeli, kısa bir açıklama girmeli ve şablon olarak Gradio’yu seçmeliyiz.

Kaynak: new-space

Oluşturulduktan sonra yeni Space’inize yönlendirileceksiniz. Kurulum için sağlanan talimatları izleyin.

Depoyu yerel proje dizininize klonlayın

git clone https://huggingface.co/spaces/kingabzpro/live-city-mcp

Bu proje için web arama yetenekleri adına Tavily API’yi kullanacağız; lütfen Tavily AI üzerinde bir hesap oluşturun ve bir API anahtarı üretin.

Kaynak: Tavily AI

Ardından, API anahtarını yerel sisteminizde bir ortam değişkeni olarak kaydedin

TAVILY_API_KEY="API-KEY"

Sonrasında Tavily Python SDK’yı kurun

pip install tavily-python

2. MCP sunucusunu oluşturma

Bu MCP sunucusunda iki araç bulunur ve her ikisi de webden en güncel bilgilere erişmek için Tavily API’yi kullanır. İlk araç bir şehir adı alır ve ayrıntılı bir hava durumu raporu üretir; ikinci araç ise şehir adını alır ve bölgedeki en önemli beş haberin manşetlerini listeler. Her araç için bir grafik arayüz oluşturduk ve ardından bunları Sekmeli Arayüz ile birleştirdik.

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. MCP sunucusunu yerelde test etme

MCP sunucusunu dağıtmadan önce yerelde test etmek kritik önemdedir. Sunucuyu başlatmak için terminalde aşağıdaki komutu çalıştırın: 

python app.py

Çıktı:

* 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/sse

Tarayıcınızı açın ve http://127.0.0.1:7860 adresine gidin; giriş kutusuna bir şehir adı yazın. Sunucu ayrıntılı hava durumu bilgisini JSON formatında döndürecektir.

Uygulama sorunsuz çalışmalı ve girilen şehir için doğru hava durumu ve haber verilerini sağlamalıdır.

4. MCP sunucusunu Hugging Face Spaces’a dağıtma

Sunucuyu dağıtmak için şu adımları izleyin:

1. requirements.txt dosyasını oluşturun ve aşağıdaki bağımlılığı ekleyin:

tavily-python==0.7.3

2. Değişiklikleri commit edip Hugging Face Space’e gönderelim.

git add .                                                                                                
live-city-mcp  git commit -m "weather and news MCP"                                                                     
git push  

Gönderdikten sonra Hugging Face Space derlemeyi başlatacaktır. 

Kaynak: Live City Mcp

Yaklaşık bir dakika sonra MCP sunucusu yayında olacak ve şu adresten erişilebilir: Live City Mcp.

Kaynak: Live City Mcp

3. Bunu bir MCP sunucusu olarak kullanmadan önce Tavily erişim belirteciyle ortam değişkenini ayarlamamız gerekir. Bunu yapmak için Spaces ayarlarına gidin, aşağı kaydırın ve "New Secret" düğmesine tıklayın. Ardından API anahtarını ve Tavily API adını ekleyin.

Kaynak: live-city-mcp/settings

5. Dağıtılan MCP sunucusunu Cursor AI ile test etme

MCP’miz dağıtıldı ve düzgün çalışıyor. Şimdi MCP istemcisini kuracağız. Önce Cursor AI’ı yapılandıracağız. Cursor Ayarlarına gidin, MCP sekmesine tıklayın ve "+Yeni global MCP sunucusu ekle" düğmesine tıklayın. Aşağıdaki kodu girin:

{
  "mcpServers": {
    "weather-news": {
      "url": "https://kingabzpro-live-city-mcp.hf.space/gradio_api/mcp/sse"
    }
  }
}

weather-news MCP’sinin iki araçla düzgün çalıştığını göreceksiniz. Islamabad’daki hava durumu hakkında bir soru soralım. 

Görüldüğü gibi hızlı ve doğru bir şekilde yanıt verdi.

Doğruluğunu çevrimiçi arama yaparak ve AccuWeather üzerinden hava durumunu kontrol ederek teyit edebiliriz. 

Kaynak: AccuWeather

Sırada, Islamabad çevresindeki haberleri sorarak ikinci aracı test edelim.

Sonuç olarak Pakistan hakkında dört haber başlığından oluşan bir liste aldık. Tavily API, en son Islamabad haberleriyle ilgili bir şey bulamazsa ülke düzeyindeki haberlere geçiş yapar.

6. Dağıtılan MCP sunucusunu Claude Desktop ile test etme

Ayarlar menüsüne gidip “Developer” seçeneğine tıklayarak ve “Edit Config” düğmesine basarak Claude Desktop’ı yapılandıralım. Bu işlem sizi claude_desktop_config.json dosyasını düzenlemeniz gereken klasöre götürecektir.

Claude Desktop şu anda SSE tabanlı MCP Sunucularını desteklemiyor. Bu gibi durumlarda mcp-remote adlı bir aracı kullanabilirsiniz. 

mcp-remote çalıştırmak için önce e Download Node.js® sayfasını ziyaret ederek Node.js’i kurmalısınız. Ardından aşağıdaki kodu claude_desktop_config.json dosyanıza ekleyin:

 "Live City MCP": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://kingabzpro-live-city-mcp.hf.space/gradio_api/mcp/sse",
        "--transport",
        "sse-only"
      ]
    }

MCP sunucusu yapılandırmasını eklemeye bir örnek aşağıdadır.

Bunu tamamladıktan sonra lütfen Claude Desktop uygulamasından çıkıp yeniden başlatın. Ardından, iki aracı bulunan “Live City MCP” adlı yeni MCP sunucusuna erişimi göreceksiniz.

Yakında İrlanda’ya seyahat edeceğim, bu yüzden Dublin’deki hava durumunu sordum ve gerçekten iyi sonuçlar aldım.

MCP sunucusuna erişmenin en iyi yolu Claude Desktop üzerinden ilerlemektir. Etkileşimlidir ve araç kullanımına ek kabiliyetler ile bilgileri net bir şekilde sunar.

Sonuç

Zaten makine öğrenimi projeleri için Gradio uygulamaları oluşturma konusunda deneyimliyseniz, mevcut uygulamanızı bir MCP sunucusuna dönüştürmek hiç bu kadar kolay olmamıştı. Yalnızca tek bir argümanla (mcp_server=True) Gradio uygulamanız bir MCP sunucusu olarak da çalışabilir ve Cursor AI ile Claude Desktop gibi araçlarla sorunsuz entegrasyona olanak tanır. Bu da yapay zeka uygulamalarınızı harici sistemlere ve iş akışlarına bağlamak için heyecan verici imkanlar açar.

Bu eğlenceli eğitimde Gradio MCP’nin temellerini keşfettik, bir MCP sunucusunu nasıl kurup test edeceğinizi öğrendik ve Tavily API kullanarak canlı hava durumu verileri ile şehir haberlerini çeken pratik bir proje üzerinde çalıştık. Son olarak projeyi Hugging Face Spaces’a dağıttık ve popüler MCP uyumlu istemcilerle test ettik.

Bu eğitimde ele aldığımız ajan temelli yapay zeka ve diğer kavramlar hakkında daha fazlasını öğrenmek isterseniz, aşağıdaki kaynakları öneririm: 

• Yapay Zeka Ajanlarını Anlamak: Otonom Sistemlerin Geleceği
• Claude Code: Pratik Örneklerle Bir Rehber
• Hugging Face ile Çalışmak | Hub Rehberi Kursu
• Dinamik LangChain ajanları oluşturma Kursu
• Chrome DevTools MCP: Yapay Zeka Destekli Tarayıcı Otomasyonu ve Hata Ayıklama