Panduan Server Gradio MCP: Bangun, Uji, Deploy & Integrasikan

Model Context Protocol (MCP) adalah standar terbuka untuk menghubungkan model AI dengan alat eksternal, API, dan sumber data. Protokol ini menyediakan cara baku bagi large language model (LLM) untuk berinteraksi dengan sistem eksternal. 

Seiring dunia bergerak menuju workflow agentik, di mana sistem AI bertindak sebagai agen otonom, mempelajari MCP menjadi semakin penting. Ekosistem Gradio menawarkan cara paling sederhana dan efisien untuk membangun server MCP, sehingga pengembang dapat membuat alat AI yang andal dengan upaya minimal.

Dalam tutorial ini, kita akan:

1. Menyiapkan server Gradio MCP sederhana secara lokal dan mengujinya.
2. Membangun server MCP siap produksi dengan beberapa alat.
3. Mendeploy ke Hugging Face Spaces.
4. Menguji dengan Cursor AI dan Claude Desktop.

Jika Anda ingin langsung praktik dengan Designing Agentic Systems with LangChain, saya sarankan mengikuti kursus kami. 

Mulai Menggunakan Gradio MCP

Versi terbaru Gradio (5.32.0) kini mendukung MCP secara native, sehingga membangun dan menjalankan server MCP jadi sangat mudah. Anda hanya perlu mengaktifkan dukungan MCP melalui argumen kode sederhana atau variabel lingkungan. 

Server Gradio MCP menggunakan protokol Server-Sent Events (SSE), yang menyediakan komunikasi satu arah waktu nyata dari server ke klien—sempurna untuk streaming respons dari LLM.

1. Instal versi terbaru Gradio dengan dukungan MCP.

pip install -U "gradio[mcp]"

2. Bangun aplikasi Gradio yang menerima nama kota sebagai masukan dan mengembalikan data cuaca (data tiruan untuk contoh ini). Ini titik awal yang bagus, terutama jika Anda sudah familiar dengan 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. Ada dua cara untuk mengaktifkan dukungan MCP di Gradio:

• Menggunakan Argumen mcp_server: demo.launch(mcp_server=True)
• Menggunakan Variabel Lingkungan: export GRADIO_MCP_SERVER=True

4. Simpan file Python test.py dan jalankan. 

$ 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

Anda akan melihat dua URL pada output terminal:

• App URL: http://127.0.0.1:7860 (membuka aplikasi Gradio di browser Anda).
• MCP Server URL: http://127.0.0.1:7860/gradio_api/mcp/sse (digunakan oleh klien yang kompatibel MCP).

5. Buka URL aplikasi (http://127.0.0.1:7860) di browser Anda. Masukkan nama kota (misalnya, Tokyo) dan periksa cuacanya.

6. Di bagian bawah aplikasi, klik tombol "Use via API or MCP". Ini akan menampilkan informasi tambahan tentang API dan server MCP aplikasi Anda.

7. Untuk menguji server MCP dengan Cursor AI, buka Cursor Settings, masuk ke tab “MCP”, dan klik tombol “+ Add new global MCP server”.

8. Tambahkan konfigurasi JSON berikut ke file pengaturan MCP:

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

9. Simpan file. Sekarang Anda akan melihat server MCP aktif bernama gradio dengan alat check_weather.

Untuk menguji server MCP ini, kita akan membuat chat baru dalam mode agen di Cursor menggunakan (CTRL +T) dan menanyakan cuaca di Tokyo. Cursor akan meminta izin untuk menjalankan alat MCP. Setujui.

Hasilnya, server MCP akan mengambil data cuaca dan mengembalikan hasilnya:

Membangun Server MCP Multi Alat dengan Gradio

Mari kita buat sesuatu yang praktis dan siap produksi. Dalam proyek ini, kita akan membangun server MCP multi-alat menggunakan Gradio. 

Server ini akan menyertakan dua alat:

1. Alat cuaca langsung: Mengambil data cuaca waktu nyata menggunakan API Tavily.
2. Alat berita kota: Mengambil 5 judul berita terbaru tentang sebuah kota menggunakan API Tavily.

Server ini akan membantu pengguna merencanakan perjalanan dengan menyediakan pembaruan cuaca dan berita terkait.

Kita akan menyiapkan server MCP, mengujinya secara lokal, mendeploy di Hugging Face Spaces, dan menguji server yang sudah dideploy menggunakan Cursor AI dan Claude Desktop.

1. Penyiapan

Kita perlu membuat Space baru dengan membuka https://huggingface.co/new-space, menambahkan nama aplikasi, memberikan deskripsi singkat, dan memilih Gradio sebagai template.

Sumber: new-space

Setelah dibuat, Anda akan diarahkan ke Space baru Anda. Ikuti petunjuk yang disediakan untuk menyiapkannya.

Klon repositori ke direktori proyek lokal Anda

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

Untuk proyek ini, kita akan menggunakan API Tavily untuk kemampuan pencarian web, silakan buat akun di Tavily AI dan buat API key.

Sumber: Tavily AI

Lalu, simpan API key sebagai variabel lingkungan di sistem lokal Anda

TAVILY_API_KEY="API-KEY"

Setelah itu, instal Tavily Python SDK

pip install tavily-python

2. Membuat server MCP

Server MCP ini memiliki dua alat, keduanya menggunakan API Tavily untuk mengakses informasi terbaru dari web. Alat pertama menerima nama kota dan menghasilkan laporan cuaca terperinci, sementara alat kedua menerima nama kota dan mencantumkan judul untuk lima berita teratas di area tersebut. Kami membuat antarmuka grafis untuk masing-masing alat, kemudian menggabungkannya menggunakan 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. Menguji server MCP secara lokal

Sebelum mendeploy server MCP, penting untuk mengujinya secara lokal. Mulai server dengan menjalankan perintah berikut di terminal: 

python app.py

Output:

* 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

Buka browser Anda dan buka http://127.0.0.1:7860 lalu masukkan nama kota di kotak input. Server akan mengembalikan informasi cuaca terperinci dalam format JSON.

Aplikasi seharusnya berjalan tanpa masalah, menyediakan data cuaca dan berita yang akurat untuk kota yang dimasukkan.

4. Mendeploy server MCP ke Hugging Face Spaces

Untuk mendeploy server, ikuti langkah-langkah berikut:

1. Buat file requirements.txt dan tambahkan dependensi berikut:

tavily-python==0.7.3

2. Commit perubahan dan push ke Hugging Face Space.

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

Setelah dipush, Hugging Face Space akan mulai melakukan build. 

Sumber: Live City Mcp

Sekitar satu menit kemudian, server MCP akan aktif dan dapat diakses di Live City Mcp.

Sumber: Live City Mcp

3. Sebelum menggunakannya sebagai server MCP, kita perlu menetapkan variabel lingkungan dengan access token Tavily. Untuk melakukannya, buka pengaturan Space, gulir ke bawah, dan klik tombol "New Secret". Lalu, tambahkan API key dan nama API Tavily.

Sumber: live-city-mcp/settings

5. Menguji server MCP yang dideploy dengan Cursor AI

Server MCP kita sudah dideploy dan berfungsi baik. Sekarang, kita akan menyiapkan klien MCP. Pertama, kita akan mengonfigurasi Cursor AI. Buka Cursor Settings, klik tab MCP, lalu klik tombol "+Add new global MCP server." Masukkan kode berikut:

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

Anda akan melihat bahwa MCP weather-news berjalan baik dengan dua alat. Mari ajukan pertanyaan tentang cuaca di Islamabad. 

Seperti terlihat, responsnya cepat dan akurat.

Kita dapat memverifikasi kebenarannya dengan mencari secara online dan memeriksa cuaca di AccuWeather. 

Sumber: AccuWeather

Selanjutnya, mari uji alat kedua dengan menanyakan berita di sekitar Islamabad.

Hasilnya, kita menerima daftar empat judul berita tentang Pakistan. Jika API Tavily tidak menemukan apa pun terkait berita terbaru Islamabad, API akan beralih ke berita tingkat negara.

6. Menguji server MCP yang dideploy dengan Claude Desktop

Mari siapkan Claude Desktop dengan membuka pengaturan, klik opsi “Developer”, lalu klik tombol “Edit Config”. Ini akan membawa Anda ke folder tempat Anda perlu mengedit file claude_desktop_config.json.

Claude Desktop saat ini belum mendukung Server MCP berbasis SSE. Dalam kasus seperti ini, Anda dapat menggunakan alat bernama mcp-remote. 

Untuk menjalankan mcp-remote, Anda harus menginstal Node.js terlebih dahulu dengan membuka halaman Download Node.js®. Lalu, tambahkan kode berikut ke file claude_desktop_config.json Anda:

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

Berikut contoh penambahan konfigurasi server MCP.

Setelah selesai, keluar dari aplikasi Claude Desktop lalu jalankan kembali. Anda akan melihat akses ke server MCP baru bernama “Live City MCP,” dengan dua alat yang tersedia.

Saya akan segera bepergian ke Irlandia, jadi saya menanyakan cuaca di Dublin dan mendapatkan hasil yang sangat baik.

Cara terbaik mengakses server MCP adalah melalui Claude Desktop. Aplikasi ini interaktif dan menyediakan kemampuan ekstra untuk penggunaan alat serta menampilkan informasi dengan jelas.

Kesimpulan

Jika Anda sudah terbiasa membuat aplikasi Gradio untuk proyek machine learning, mengonversi aplikasi yang ada menjadi server MCP tidak pernah semudah ini. Hanya dengan satu argumen (mcp_server=True), aplikasi Gradio Anda juga dapat berfungsi sebagai server MCP, memungkinkan integrasi mulus dengan alat seperti Cursor AI dan Claude Desktop. Ini membuka peluang menarik untuk menghubungkan aplikasi AI Anda ke sistem dan alur kerja eksternal.

Dalam tutorial yang menyenangkan ini, kita mempelajari dasar-dasar Gradio MCP, cara membangun dan menguji server MCP, dan mengerjakan proyek praktis menggunakan API Tavily untuk mengambil data cuaca langsung dan berita kota. Pada akhirnya, kita mendeploy proyek di Hugging Face Spaces dan mengujinya dengan klien yang kompatibel MCP populer.

Jika Anda ingin mempelajari lebih lanjut tentang AI agentik dan konsep lain yang telah kita bahas dalam tutorial ini, saya merekomendasikan sumber daya di bawah ini: 

• Memahami AI Agents: Masa Depan Sistem Otonom
• Claude Code: Panduan dengan Contoh Praktis
• Working with Hugging Face | Panduan Anda ke Kursus Hub
• Bangun agen LangChain dinamis Kursus
• Chrome DevTools MCP: Otomasi dan Debugging Peramban Bertenaga AI