Gradio MCP सर्वर गाइड: बनाएं, परीक्षण करें, परिनियोजित करें और इंटीग्रेट करें

Model Context Protocol (MCP) बाहरी टूल्स, API और डेटा स्रोतों से AI मॉडलों को जोड़ने के लिए एक खुला मानक है। यह बड़े भाषा मॉडल्स (LLMs) के लिए बाहरी प्रणालियों के साथ इंटरैक्ट करने का एक मानकीकृत तरीका प्रदान करता है। 

जैसे-जैसे दुनिया एजेंटिक वर्कफ़्लोज़ की ओर बढ़ रही है, जहाँ AI सिस्टम स्वायत्त एजेंट्स की तरह कार्य करते हैं, MCP सीखना और भी अधिक महत्वपूर्ण हो गया है। Gradio इकोसिस्टम MCP सर्वर बनाने का सबसे सरल और प्रभावी तरीका प्रदान करता है, जिससे डेवलपर्स न्यूनतम प्रयास में शक्तिशाली AI टूल्स बना सकते हैं।

इस ट्यूटोरियल में, हम:

1. स्थानीय रूप से एक सरल Gradio MCP सर्वर सेट अप करेंगे और उसका परीक्षण करेंगे।
2. कई टूल्स के साथ एक प्रोडक्शन-रेडी MCP सर्वर बनाएंगे।
3. उसे Hugging Face Spaces पर परिनियोजित करेंगे।
4. Cursor AI और Claude Desktop के साथ उसका परीक्षण करेंगे।

यदि आप Designing Agentic Systems with LangChain में हाथ आज़माने के इच्छुक हैं, तो हमारा कोर्स देखें। 

Gradio MCP के साथ शुरुआत

Gradio का नवीनतम संस्करण (5.32.0) अब MCP को नैटिवली सपोर्ट करता है, जिससे MCP सर्वर बनाना और चलाना बेहद आसान हो गया है। आपको बस एक साधारण कोड आर्ग्युमेंट या एन्वायरनमेंट वेरिएबल के माध्यम से MCP सपोर्ट सक्षम करना है। 

Gradio MCP सर्वर Server-Sent Events (SSE) प्रोटोकॉल का उपयोग करते हैं, जो सर्वर से क्लाइंट तक रीयल-टाइम, एकतरफा संचार प्रदान करता है—LLMs से स्ट्रीमिंग प्रतिक्रियाओं के लिए बिल्कुल उपयुक्त।

1. MCP सपोर्ट के साथ Gradio का नवीनतम संस्करण इंस्टॉल करें।

pip install -U "gradio[mcp]"संचालित द्वारा

2. एक Gradio ऐप बनाएं जो इनपुट में किसी शहर का नाम ले और मौसम डेटा लौटाए (यहाँ पर मॉक डेटा)। यदि आप पहले से 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. Gradio में MCP सपोर्ट सक्षम करने के दो तरीके हैं:

• mcp_server आर्ग्युमेंट का उपयोग करके: demo.launch(mcp_server=True)
• एन्वायरनमेंट वेरिएबल का उपयोग करके: export GRADIO_MCP_SERVER=True

4. Python फ़ाइल test.py को सेव करें और चलाएँ। 

$ 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संचालित द्वारा

आपको टर्मिनल आउटपुट में दो URLs दिखाई देंगी:

• ऐप URL: http://127.0.0.1:7860 (आपके ब्राउज़र में Gradio ऐप खोलता है)।
• MCP सर्वर URL: http://127.0.0.1:7860/gradio_api/mcp/sse (MCP-कम्पैटिबल क्लाइंट्स द्वारा उपयोग के लिए)।

5. अपने ब्राउज़र में ऐप URL (http://127.0.0.1:7860) खोलें। कोई शहर दर्ज करें (जैसे, Tokyo) और मौसम देखें।

6. ऐप के निचले हिस्से में "Use via API or MCP" बटन पर क्लिक करें। इससे आपके ऐप के API और MCP सर्वर के बारे में अतिरिक्त जानकारी दिखाई देगी।

7. Cursor AI के साथ MCP सर्वर का परीक्षण करने के लिए, Cursor Settings खोलें, “MCP” टैब पर जाएँ, और “+ Add new global MCP server” बटन पर क्लिक करें।

8. MCP सेटिंग्स फ़ाइल में निम्न JSON कॉन्फ़िगरेशन जोड़ें:

{
  "mcpServers": {
    "gradio": {
      "url": "http://127.0.0.1:7860/gradio_api/mcp/sse"
    }
  }
}संचालित द्वारा

9. फ़ाइल सेव करें। अब आपको gradio नाम का एक सक्रिय MCP सर्वर दिखाई देगा, जिसमें check_weather टूल उपलब्ध होगा।

इस MCP सर्वर का परीक्षण करने के लिए, Cursor के एजेंट मोड में (CTRL + T) नया चैट बनाएं और Tokyo के मौसम के बारे में पूछें। Cursor MCP टूल चलाने की अनुमति मांगेगा। उसे स्वीकृत करें।

परिणामस्वरूप, MCP सर्वर मौसम डेटा प्राप्त करेगा और नतीजा लौटाएगा:

Gradio के साथ मल्टी-टूल MCP सर्वर बनाना

आइए कुछ व्यावहारिक और प्रोडक्शन-रेडी बनाते हैं। इस प्रोजेक्ट में, हम Gradio का उपयोग करके एक मल्टी-टूल MCP सर्वर बनाएंगे। 

सर्वर में दो टूल शामिल होंगे:

1. लाइव मौसम टूल: Tavily API का उपयोग करके रीयल-टाइम मौसम डेटा लाता है।
2. सिटी न्यूज़ टूल: Tavily API का उपयोग करके किसी शहर के बारे में नवीनतम 5 समाचार सुर्खियाँ प्राप्त करता है।

यह सर्वर उपयोगकर्ताओं को मौसम अपडेट और प्रासंगिक समाचार देकर उनकी यात्राओं की योजना बनाने में मदद करेगा। 

हम MCP सर्वर सेट अप करेंगे, इसे स्थानीय रूप से टेस्ट करेंगे, Hugging Face Spaces पर डिप्लॉय करेंगे, और Cursor AI व Claude Desktop का उपयोग करके डिप्लॉय किए गए सर्वर का परीक्षण करेंगे।

1. सेट अप करना

हमें https://huggingface.co/new-space पर जाकर नया Space बनाना है, ऐप का नाम जोड़ना है, एक छोटा विवरण देना है, और टेम्पलेट के रूप में Gradio चुनना है।

स्रोत: new-space

बन जाने के बाद, आपको आपके नए Space पर रीडायरेक्ट कर दिया जाएगा। उसे सेट अप करने के लिए दिए गए निर्देशों का पालन करें।

रिपोजिटरी को अपनी स्थानीय प्रोजेक्ट डायरेक्टरी में क्लोन करें

git clone https://huggingface.co/spaces/kingabzpro/live-city-mcpसंचालित द्वारा

इस प्रोजेक्ट के लिए, हम वेब सर्च क्षमताओं हेतु Tavily API का उपयोग करेंगे, कृपया Tavily AI पर एक अकाउंट बनाएँ और API कुंजी जनरेट करें।

स्रोत: Tavily AI

फिर, API कुंजी को अपने लोकल सिस्टम पर एन्वायरनमेंट वेरिएबल के रूप में सेव करें

TAVILY_API_KEY="API-KEY"संचालित द्वारा

उसके बाद, Tavily Python SDK इंस्टॉल करें

pip install tavily-pythonसंचालित द्वारा

2. MCP सर्वर बनाना

इस MCP सर्वर में दो टूल्स हैं, जो दोनों वेब से नवीनतम जानकारी तक पहुँचने के लिए Tavily API का उपयोग करते हैं। पहला टूल किसी शहर का नाम लेकर विस्तृत मौसम रिपोर्ट बनाता है, जबकि दूसरा टूल शहर का नाम लेकर क्षेत्र की शीर्ष पाँच खबरों की सुर्खियाँ सूचीबद्ध करता है। हमने प्रत्येक टूल के लिए एक ग्राफ़िकल इंटरफ़ेस बनाया और फिर उन्हें टैब्ड इंटरफ़ेस के माध्यम से जोड़ा।

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 सर्वर का स्थानीय परीक्षण

MCP सर्वर को डिप्लॉय करने से पहले, इसका स्थानीय रूप से परीक्षण करना आवश्यक है। टर्मिनल में निम्न कमांड चलाकर सर्वर शुरू करें: 

python app.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संचालित द्वारा

अपना ब्राउज़र खोलें और http://127.0.0.1:7860 पर जाएँ और इनपुट बॉक्स में किसी शहर का नाम दर्ज करें। सर्वर JSON फॉर्मेट में विस्तृत मौसम जानकारी लौटाएगा।

एप्लिकेशन बिना किसी समस्या के काम करना चाहिए और दर्ज किए गए शहर के लिए सटीक मौसम और समाचार डेटा प्रदान करना चाहिए।

4. MCP सर्वर को Hugging Face Spaces पर डिप्लॉय करना

सर्वर डिप्लॉय करने के लिए, निम्न चरणों का पालन करें:

1. requirements.txt फ़ाइल बनाएं और निम्न निर्भरता जोड़ें:

tavily-python==0.7.3संचालित द्वारा

2. हम बदलावों को कमिट करेंगे और फिर उन्हें Hugging Face Space पर पुश करेंगे।

git add .                                                                                                
live-city-mcp  git commit -m "weather and news MCP"                                                                     
git push  संचालित द्वारा

पुश करने के बाद, Hugging Face Space बिल्ड होना शुरू हो जाएगा। 

स्रोत: Live City Mcp

लगभग एक मिनट बाद, MCP सर्वर लाइव हो जाएगा और Live City Mcp पर उपलब्ध होगा।

स्रोत: Live City Mcp

3. इसे MCP सर्वर के रूप में उपयोग करने से पहले, हमें Tavily एक्सेस टोकन के साथ एन्वायरनमेंट वेरिएबल सेट करना होगा। इसके लिए, Spaces सेटिंग्स में जाएँ, नीचे स्क्रॉल करें, और "New Secret" बटन पर क्लिक करें। फिर, API कुंजी और Tavily API नाम जोड़ें।

स्रोत: live-city-mcp/settings

5. डिप्लॉय किए गए MCP सर्वर का Cursor AI के साथ परीक्षण

हमारा MCP डिप्लॉय हो चुका है और सही तरह से काम कर रहा है। अब, हम MCP क्लाइंट सेट अप करेंगे। पहले, हम Cursor AI कॉन्फ़िगर करेंगे। Cursor Settings पर जाएँ, MCP टैब पर क्लिक करें, और “+Add new global MCP server” लेबल वाले बटन पर क्लिक करें। निम्न कोड दर्ज करें:

{
  "mcpServers": {
    "weather-news": {
      "url": "https://kingabzpro-live-city-mcp.hf.space/gradio_api/mcp/sse"
    }
  }
}संचालित द्वारा

आप देखेंगे कि weather-news MCP दो टूल्स के साथ ठीक चल रहा है। आइए Islamabad के मौसम के बारे में प्रश्न पूछते हैं। 

जैसा कि हम देख सकते हैं, इसने तेज़ और सटीक उत्तर दिया है।

हम ऑनलाइन खोजकर और AccuWeather पर मौसम देखकर इसकी शुद्धता सत्यापित कर सकते हैं। 

स्रोत: AccuWeather

अब, दूसरे टूल को Islamabad के आसपास की खबरों के बारे में पूछकर टेस्ट करते हैं।

परिणामस्वरूप, हमें पाकिस्तान से जुड़ी चार खबरों की सुर्खियाँ मिलीं। यदि Tavily API इस्लामाबाद की नवीनतम खबरों से संबंधित कुछ नहीं ढूँढ पाती, तो यह देश-स्तरीय खबरों पर स्विच कर देती है।

6. Claude Desktop के साथ डिप्लॉय किए गए MCP सर्वर का परीक्षण

सेटिंग्स में जाएँ, “Developer” विकल्प पर क्लिक करें, और “Edit Config” बटन दबाएँ। इससे आप उस फ़ोल्डर में पहुँचेंगे जहाँ आपको claude_desktop_config.json फ़ाइल एडिट करनी है।

Claude Desktop फिलहाल SSE-आधारित MCP सर्वरों को सपोर्ट नहीं करता। ऐसे मामलों में, आप mcp-remote नामक टूल का उपयोग कर सकते हैं। 

mcp-remote चलाने के लिए, आपको पहले e Download Node.js® पेज पर जाकर Node.js इंस्टॉल करना होगा। फिर, अपने 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"
      ]
    }संचालित द्वारा

यहाँ MCP सर्वर कॉन्फ़िगरेशन जोड़ने का उदाहरण दिया गया है।

यह पूरा करने के बाद, कृपया Claude Desktop एप्लिकेशन को बंद करके फिर से लॉन्च करें। इसके बाद आपको “Live City MCP” नामक नए MCP सर्वर तक पहुँच दिखाई देगी, जिसमें दो टूल्स उपलब्ध होंगे।

मैं जल्द ही आयरलैंड जा रहा हूँ, इसलिए मैंने डबलिन के मौसम के बारे में पूछा और बहुत अच्छे परिणाम मिले।

MCP सर्वर तक पहुँचने का सबसे अच्छा तरीका Claude Desktop है। यह इंटरैक्टिव है और टूल्स के उपयोग तथा जानकारी को स्पष्ट रूप से प्रदर्शित करने के लिए अतिरिक्त क्षमताएँ प्रदान करता है।

निष्कर्ष

यदि आप पहले से मशीन लर्निंग प्रोजेक्ट्स के लिए Gradio एप्लिकेशन बनाना जानते हैं, तो अपने मौजूदा ऐप को MCP सर्वर में बदलना अब पहले से कहीं आसान है। केवल एक आर्ग्युमेंट (mcp_server=True) के साथ, आपका Gradio ऐप MCP सर्वर की तरह भी कार्य कर सकता है, जिससे Cursor AI और Claude Desktop जैसे टूल्स के साथ सहज इंटीग्रेशन संभव हो जाता है। इससे आपके AI एप्लिकेशनों को बाहरी सिस्टम्स और वर्कफ़्लोज़ से जोड़ने की रोमांचक संभावनाएँ खुलती हैं।

इस रोचक ट्यूटोरियल में, हमने Gradio MCP की बुनियाद समझी, एक MCP सर्वर बनाना और टेस्ट करना सीखा, और Tavily API का उपयोग करके लाइव मौसम डेटा और सिटी न्यूज़ लाने वाले एक व्यावहारिक प्रोजेक्ट पर काम किया। अंत तक, हमने प्रोजेक्ट को Hugging Face Spaces पर डिप्लॉय किया और लोकप्रिय MCP-कम्पैटिबल क्लाइंट्स के साथ उसका परीक्षण किया।

यदि आप एजेंटिक AI और इस ट्यूटोरियल में शामिल अन्य अवधारणाओं के बारे में और सीखना चाहते हैं, तो नीचे दिए गए संसाधनों की सिफारिश करता/करती हूँ: 

• AI एजेंट्स को समझना: स्वायत्त प्रणालियों का भविष्य
• Claude Code: व्यावहारिक उदाहरणों के साथ एक गाइड
• Working with Hugging Face | Your Guide to the Hub कोर्स
• Build dynamic LangChain agents कोर्स
• Chrome DevTools MCP: AI-संचालित ब्राउज़र ऑटोमेशन और डीबगिंग