Submit Gradio MCP Playground - Open-source MCP tools without expensive LLM subscriptions

Created by Sean Poyner and Ranadeep Laskar (

@flickinshots
)

This project democratizes access to MCP technology, allowing developers and enthusiasts to experiment with MCP servers, agents, and LLM-tool integrations while showcasing the powerful features of Gradio.

README.md

@@ -1,14 +1,314 @@
 ---
-title: Gradio Mcp Playground
-emoji: 🐨
-colorFrom: purple
-colorTo: purple
+title: Gradio MCP Playground
+emoji: 🛝
+colorFrom: blue
+colorTo: green
 sdk: gradio
-sdk_version: 5.33.1
+sdk_version: 4.31.0
 app_file: app.py
-pinned: false
-license: mit
-short_description: Open-source access to MCP tools without expensive LLM subscr
+pinned: true
+license: apache-2.0
+tags:
+  - mcp
+  - agents
+  - gradio
+  - hackathon
+short_description: Open-source MCP tools without expensive LLM subscriptions!
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🛝 Gradio MCP Playground
+
+<div align="center">
+  
+  [![Hugging Face Spaces](https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces/seanpoyner/gradio-mcp-playground)
+  [![GitHub](https://img.shields.io/badge/GitHub-Repository-black)](https://github.com/seanpoyner/gradio-mcp-playground)
+  [![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
+  [![Hackathon](https://img.shields.io/badge/HF%20MCP%20Hackathon-2025-orange)](https://huggingface.co/hackathon)
+  
+  **Open-source access to MCP tools without expensive LLM subscriptions**
+  
+  [Try Demo](https://huggingface.co/spaces/seanpoyner/gradio-mcp-playground) | [Documentation](https://github.com/seanpoyner/gradio-mcp-playground) | [Report Bug](https://github.com/seanpoyner/gradio-mcp-playground/issues)
+
+</div>
+
+## 🎯 Our Mission
+
+This project was created to solve a critical problem: **Most MCP tools require expensive LLM API subscriptions**, limiting access for developers, students, and enthusiasts. 
+
+We believe everyone should be able to:
+- **🎆 Experiment with MCP servers** without financial barriers
+- **👩‍💻 Learn AI agent development** through hands-on experience  
+- **🌈 Build and deploy tools** using Gradio's intuitive interface
+- **🤝 Contribute to the open-source ecosystem** regardless of budget
+
+## ✨ What is Gradio MCP Playground?
+
+A comprehensive platform for building, managing, and deploying Model Context Protocol (MCP) servers using Gradio. This playground democratizes access to MCP technology, allowing developers and enthusiasts to "play" with MCP servers, agents, and LLM-tool integrations while showcasing the powerful features of Gradio.
+
+### Key Benefits
+
+- **💰 No API Keys Required** - Use the demo features without any LLM subscriptions
+- **🚀 Zero to Agent in Minutes** - Create functional MCP servers quickly
+- **🎨 Visual Development** - Build complex agents through an intuitive UI
+- **📚 Learning Platform** - Understand MCP concepts through interactive examples
+- **🌍 Community Driven** - Share and discover agents built by others
+
+## 🏆 Features Overview
+
+### 🛝 AI Assistant Hub
+Three specialized AI assistants to guide your journey:
+
+- **Adam (General Assistant)** - Your friendly companion with access to MCP tools like screenshots, web search, and file operations
+- **Liam (MCP Specialist)** - Expert in MCP development, server creation, and pipeline building
+- **Arthur (Agent Builder)** - Architect for sophisticated autonomous agents and custom implementations
+
+### 🔧 Server Builder
+Create MCP servers without extensive coding:
+
+- **Quick Create** - Build servers from templates in seconds
+- **Pipeline Builder** - Visual drag-and-drop interface for complex workflows
+- **Templates Gallery** - Pre-built templates for common use cases:
+  - Calculator (arithmetic operations)
+  - Text Processor (text manipulation)
+  - Image Generator (AI image creation)
+  - Data Analyzer (CSV/data analysis)
+  - Web Scraper (data extraction)
+  - API Wrapper (turn any API into MCP)
+
+### 🖥️ Server Management
+Professional-grade server lifecycle management:
+
+- **Active Servers** - Monitor running MCP servers in real-time
+- **Server Registry** - Browse and install community servers
+- **Quick Deploy** - One-click deployment to Hugging Face Spaces
+- **Performance Monitoring** - Track server health and usage
+
+### 🔌 MCP Connections
+Connect to any MCP server with ease:
+
+- **Quick Connect** - Pre-configured connections to popular servers:
+  - Filesystem (file operations)
+  - Memory (persistent storage)
+  - GitHub (repository management)
+  - Brave Search (web search)
+- **Custom Connections** - Connect to any MCP server via stdio or SSE
+- **Tool Discovery** - Automatically discover and test available tools
+- **Activity Log** - Track all tool executions and results
+
+### 🤖 Agent Control Panel
+Build and manage autonomous agents:
+
+- **Agent Creation** - Visual interface for building AI agents
+- **Agent Templates** - Start from proven agent architectures
+- **Testing Suite** - Real-time testing and debugging
+- **Deployment Options** - Deploy agents to various platforms
+
+### 📚 Help & Resources
+Comprehensive documentation and support:
+
+- **Interactive Tutorials** - Step-by-step guides
+- **API Reference** - Complete documentation
+- **Video Guides** - Visual learning resources
+- **Community Forum** - Get help and share knowledge
+
+## 🚀 Quick Start
+
+### Try the Demo (This Space)
+
+This Hugging Face Space provides a **demo version** showcasing all features. Some functionality is limited in the demo - for full features, install locally.
+
+### Local Installation (Full Features)
+
+```bash
+# Clone the repository
+git clone https://github.com/seanpoyner/gradio-mcp-playground
+cd gradio-mcp-playground
+
+# Install with all dependencies
+pip install -e ".[all]"
+
+# Launch the unified dashboard
+gmp dashboard
+
+# Or start on a custom port
+gmp dashboard --port 8081
+```
+
+### CLI Tools
+
+Powerful command-line tools for automation:
+
+```bash
+# Create servers from templates
+gmp create calculator my-calc-server
+gmp create image-generator my-image-server
+
+# List available templates
+gmp templates
+
+# Manage servers
+gmp server list              # List all servers
+gmp server start my-server   # Start a server
+gmp server stop my-server    # Stop a server
+
+# Connect to MCP servers
+gmp connect filesystem /path/to/directory
+gmp connect github --token YOUR_GITHUB_TOKEN
+
+# Deploy servers
+gmp deploy my-server         # Deploy to Hugging Face Spaces
+```
+
+## 💡 Use Cases
+
+### For Developers
+- **Rapid Prototyping** - Test MCP concepts without setup overhead
+- **Tool Development** - Create reusable tools for AI assistants
+- **API Integration** - Wrap any API as an MCP server
+- **Learning Platform** - Understand MCP through hands-on examples
+
+### For Educators & Students
+- **Free Learning** - No expensive API keys needed
+- **Interactive Teaching** - Demonstrate AI concepts visually
+- **Student Projects** - Build without infrastructure worries
+- **Research Platform** - Experiment with MCP implementations
+
+### For Enthusiasts
+- **Explore MCP** - Play with cutting-edge AI technology
+- **Build Tools** - Create useful automation tools
+- **Share Creations** - Contribute to the community
+- **Learn by Doing** - Hands-on experience with AI agents
+
+### For Businesses
+- **Proof of Concepts** - Test ideas before investing
+- **Custom Assistants** - Build domain-specific agents
+- **Team Collaboration** - Share tools internally
+- **Cost-Effective Development** - Prototype without API costs
+
+## 🛠️ Creating MCP Servers
+
+### Basic Example
+
+```python
+import gradio as gr
+
+def greet(name: str) -> str:
+    """Greet someone by name."""
+    return f"Hello, {name}!"
+
+# Create a Gradio interface
+demo = gr.Interface(fn=greet, inputs="text", outputs="text")
+
+# Launch as an MCP server
+demo.launch(mcp_server=True)
+```
+
+### Multi-Tool Server
+
+```python
+import gradio as gr
+
+def summarize_text(text: str, max_length: int = 100) -> str:
+    """Summarize a long text."""
+    return text[:max_length] + "..."
+
+def translate_text(text: str, target_language: str = "es") -> str:
+    """Translate text to another language."""
+    # Translation logic here
+    return f"Translated: {text}"
+
+# Create tabbed interface with multiple tools
+demo = gr.TabbedInterface(
+    [
+        gr.Interface(fn=summarize_text, inputs=["text", "number"], outputs="text"),
+        gr.Interface(fn=translate_text, inputs=["text", "text"], outputs="text")
+    ],
+    ["Summarizer", "Translator"]
+)
+
+# Launch as MCP server
+demo.launch(mcp_server=True)
+```
+
+## 📊 Architecture & Technology
+
+### Core Technologies
+- **Frontend**: Gradio 4.31.0 with custom themes and components
+- **Backend**: Python with async support for high performance
+- **Protocol**: Model Context Protocol (MCP) by Anthropic
+- **Deployment**: Optimized for Hugging Face Spaces
+
+### Key Components
+- **Unified Dashboard** - Single interface for all MCP operations
+- **MCP Client Manager** - Handles connections to multiple servers
+- **Template Engine** - Generates server code from templates
+- **Pipeline Builder** - Visual workflow creation
+- **Agent Framework** - Autonomous agent construction
+
+### Security & Performance
+- **Secure Storage** - Encrypted credential management
+- **Rate Limiting** - Prevent API abuse
+- **Caching** - Optimized response times
+- **Error Handling** - Graceful failure recovery
+
+## 🤝 Project Team & Contributors
+
+### Core Team
+- **Sean Poyner** - Project Lead & Creator
+- **Ranadeep Laskar ([@flickinshots](https://github.com/flickinshots))** - Project Member & Collaborator
+
+We welcome contributions from the community! See our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## 📈 Roadmap
+
+### Current Features (v1.0)
+- ✅ Unified Dashboard
+- ✅ CLI Tools
+- ✅ Template Library
+- ✅ Basic MCP Connections
+- ✅ HF Space Deployment
+
+### Coming Soon (v1.1)
+- 🔄 Advanced Pipeline Builder
+- 🔄 More Server Templates
+- 🔄 Enhanced Agent Capabilities
+- 🔄 Community Marketplace
+- 🔄 Mobile-Responsive UI
+
+### Future Vision (v2.0)
+- 🔮 Multi-Agent Orchestration
+- 🔮 Custom Model Integration
+- 🔮 Enterprise Features
+- 🔮 Advanced Analytics
+- 🔮 Plugin System
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🙏 Acknowledgments
+
+### Special Thanks To
+- **Hugging Face** - For hosting this space and organizing the MCP Hackathon
+- **Gradio Team** - For the amazing framework that makes this possible
+- **Anthropic** - For creating the Model Context Protocol
+- **Open Source Community** - For inspiration and support
+
+### Built With
+- [Gradio](https://gradio.app) - The UI framework powering our interface
+- [Model Context Protocol](https://github.com/anthropics/mcp) - The protocol enabling tool integration
+- [Python](https://python.org) - Our primary development language
+
+## 📞 Support & Contact
+
+- **GitHub Issues**: [Report bugs or request features](https://github.com/seanpoyner/gradio-mcp-playground/issues)
+- **Discussions**: [Join the conversation](https://huggingface.co/spaces/seanpoyner/gradio-mcp-playground/discussions)
+- **Documentation**: [Full docs on GitHub](https://github.com/seanpoyner/gradio-mcp-playground)
+
+---
+
+<div align="center">
+  <b>Made with ❤️ to democratize MCP technology for everyone</b>
+  <br>
+  <i>No expensive subscriptions required - just creativity and curiosity!</i>
+</div>

app.py

@@ -0,0 +1,840 @@
+# app.py - Gradio MCP Playground for HF Spaces
+import gradio as gr
+import json
+import os
+from datetime import datetime
+from typing import Dict, List, Optional, Tuple, Any
+import uuid
+import asyncio
+import time
+import subprocess
+import sys
+from pathlib import Path
+import tempfile
+import shutil
+
+# Configuration
+HF_SPACE_MODE = True
+HF_SPACE_ID = os.getenv("SPACE_ID", "seanpoyner/gradio-mcp-playground")
+GITHUB_REPO = "https://github.com/seanpoyner/gradio-mcp-playground"
+
+class MCPPlaygroundApp:
+    """Gradio MCP Playground - Functional demo for HF Spaces"""
+    
+    def __init__(self):
+        self.sessions = {}
+        self.templates = self.load_templates()
+        self.active_servers = {}
+        self.demo_chat_history = []
+        
+    def load_templates(self) -> List[Dict]:
+        """Load available MCP server templates"""
+        return [
+            {
+                "name": "Calculator",
+                "id": "calculator",
+                "description": "Basic arithmetic operations server",
+                "code": '''import json
+import sys
+
+class CalculatorServer:
+    def handle_add(self, a, b):
+        return {"result": a + b}
+    
+    def handle_subtract(self, a, b):
+        return {"result": a - b}
+    
+    def handle_multiply(self, a, b):
+        return {"result": a * b}
+    
+    def handle_divide(self, a, b):
+        if b == 0:
+            return {"error": "Division by zero"}
+        return {"result": a / b}
+
+# Simple stdin/stdout handler
+server = CalculatorServer()
+while True:
+    try:
+        line = sys.stdin.readline()
+        if not line:
+            break
+        request = json.loads(line)
+        
+        method = request.get("method", "")
+        params = request.get("params", {})
+        
+        if method == "add":
+            result = server.handle_add(params.get("a", 0), params.get("b", 0))
+        elif method == "subtract":
+            result = server.handle_subtract(params.get("a", 0), params.get("b", 0))
+        elif method == "multiply":
+            result = server.handle_multiply(params.get("a", 0), params.get("b", 0))
+        elif method == "divide":
+            result = server.handle_divide(params.get("a", 0), params.get("b", 1))
+        else:
+            result = {"error": f"Unknown method: {method}"}
+        
+        response = {"id": request.get("id"), "result": result}
+        print(json.dumps(response))
+        sys.stdout.flush()
+    except Exception as e:
+        print(json.dumps({"error": str(e)}))
+        sys.stdout.flush()
+'''
+            },
+            {
+                "name": "Text Processor",
+                "id": "text_processor",
+                "description": "Text manipulation and analysis",
+                "code": '''import json
+import sys
+
+class TextProcessor:
+    def count_words(self, text):
+        return {"count": len(text.split())}
+    
+    def reverse_text(self, text):
+        return {"reversed": text[::-1]}
+    
+    def to_uppercase(self, text):
+        return {"uppercase": text.upper()}
+    
+    def to_lowercase(self, text):
+        return {"lowercase": text.lower()}
+
+# Simple stdin/stdout handler
+processor = TextProcessor()
+while True:
+    try:
+        line = sys.stdin.readline()
+        if not line:
+            break
+        request = json.loads(line)
+        
+        method = request.get("method", "")
+        params = request.get("params", {})
+        text = params.get("text", "")
+        
+        if method == "count_words":
+            result = processor.count_words(text)
+        elif method == "reverse":
+            result = processor.reverse_text(text)
+        elif method == "uppercase":
+            result = processor.to_uppercase(text)
+        elif method == "lowercase":
+            result = processor.to_lowercase(text)
+        else:
+            result = {"error": f"Unknown method: {method}"}
+        
+        response = {"id": request.get("id"), "result": result}
+        print(json.dumps(response))
+        sys.stdout.flush()
+    except Exception as e:
+        print(json.dumps({"error": str(e)}))
+        sys.stdout.flush()
+'''
+            },
+            {
+                "name": "Echo Server",
+                "id": "echo",
+                "description": "Simple echo server for testing",
+                "code": '''import json
+import sys
+import datetime
+
+# Simple echo server
+while True:
+    try:
+        line = sys.stdin.readline()
+        if not line:
+            break
+        request = json.loads(line)
+        
+        response = {
+            "id": request.get("id"),
+            "result": {
+                "echo": request,
+                "timestamp": datetime.datetime.now().isoformat(),
+                "server": "echo-server-v1"
+            }
+        }
+        print(json.dumps(response))
+        sys.stdout.flush()
+    except Exception as e:
+        print(json.dumps({"error": str(e)}))
+        sys.stdout.flush()
+'''
+            }
+        ]
+    
+    def create_interface(self) -> gr.Blocks:
+        """Create the Gradio interface"""
+        with gr.Blocks(
+            title="🛝 Gradio MCP Playground",
+            theme=gr.themes.Soft(
+                primary_hue="blue",
+                secondary_hue="gray",
+                font=["Inter", "system-ui", "sans-serif"]
+            ),
+            css=self.get_custom_css()
+        ) as demo:
+            # Banner directing to GitHub
+            gr.HTML(f"""
+            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 10px; margin-bottom: 20px; text-align: center; color: white;">
+                <h2 style="margin: 0 0 10px 0; color: white;">🎯 Demo Version - Limited Functionality</h2>
+                <p style="margin: 0 0 15px 0; font-size: 16px;">
+                    This is a demonstration of the Gradio MCP Playground with limited features.
+                    For full functionality including AI assistants, agent building, and live MCP connections:
+                </p>
+                <a href="{GITHUB_REPO}" target="_blank" style="background: white; color: #667eea; padding: 12px 30px; border-radius: 25px; text-decoration: none; font-weight: bold; display: inline-block; transition: transform 0.2s;">
+                    🚀 Get Full Version on GitHub
+                </a>
+            </div>
+            """)
+            
+            # Header
+            gr.Markdown("""
+            # 🛝 Gradio MCP Playground
+            
+            Build, test, and deploy Model Context Protocol (MCP) servers directly in your browser.
+            This demo showcases core MCP capabilities with functional examples.
+            """)
+            
+            # Session state
+            session_id = gr.State(value=lambda: str(uuid.uuid4()))
+            
+            with gr.Tabs() as tabs:
+                # Tab 1: AI Assistant (Demo)
+                with gr.Tab("🛝 AI Assistant"):
+                    gr.Markdown("## AI Assistant Hub [DEMO]")
+                    
+                    with gr.Row():
+                        assistant_mode = gr.Radio(
+                            choices=["General Assistant", "MCP Development", "Agent Builder"],
+                            value="General Assistant",
+                            label="Assistant Mode",
+                            info="Choose your assistant type"
+                        )
+                    
+                    # General Assistant Mode
+                    with gr.Group(visible=True) as general_assistant_group:
+                        gr.Markdown("### Adam - General Assistant [DEMO]")
+                        gr.Markdown(
+                            "In the full version, Adam has access to all connected MCP tools and can help with any task. "
+                            "This demo shows a simulated conversation."
+                        )
+                        
+                        # Demo chat interface
+                        demo_chatbot = gr.Chatbot(
+                            label="Chat with Adam [DEMO]",
+                            height=500,
+                            value=[
+                                [None, "👋 Hello! I'm Adam, your general-purpose assistant. In the full version, I have access to MCP tools like screenshot capture, web search, file operations, and more!"],
+                                ["Can you take a screenshot of a website?", None],
+                                [None, "In the full version, I would use the MCP screenshot tool to capture any website. This demo version doesn't have live MCP connections, but you can see how it would work in the full GitHub version!"]
+                            ]
+                        )
+                        
+                        with gr.Row():
+                            demo_input = gr.Textbox(
+                                label="Message [DEMO]",
+                                placeholder="This is a demo - messages won't be processed. Get the full version on GitHub!",
+                                scale=4
+                            )
+                            demo_send_btn = gr.Button("Send [DEMO]", variant="primary", scale=1)
+                    
+                    # MCP Agent Mode
+                    with gr.Group(visible=False) as mcp_agent_group:
+                        gr.Markdown("### Liam - MCP Development Specialist [DEMO]")
+                        gr.Markdown(
+                            "In the full version, Liam helps with MCP server development, best practices, and troubleshooting."
+                        )
+                        
+                        mcp_demo_chatbot = gr.Chatbot(
+                            label="Chat with Liam [DEMO]",
+                            height=500,
+                            value=[
+                                [None, "👋 I'm Liam, your MCP development specialist. In the full version, I can help you build, test, and deploy MCP servers!"]
+                            ]
+                        )
+                    
+                    # Agent Builder Mode
+                    with gr.Group(visible=False) as agent_builder_group:
+                        gr.Markdown("### Arthur - Agent Builder [DEMO]")
+                        gr.Markdown(
+                            "In the full version, Arthur helps create custom Gradio agents using system prompts from top AI assistants."
+                        )
+                        
+                        agent_demo_chatbot = gr.Chatbot(
+                            label="Agent Builder Assistant [DEMO]",
+                            height=500,
+                            value=[
+                                [None, "👋 I'm Arthur, your agent creation specialist. In the full version, I can help you create custom agents for data analysis, creative writing, code review, and more!"]
+                            ]
+                        )
+                
+                # Tab 2: Server Builder
+                with gr.Tab("🔧 Server Builder"):
+                    gr.Markdown("### Build MCP Servers")
+                    
+                    with gr.Tabs():
+                        # Quick Create
+                        with gr.Tab("⚡ Quick Create"):
+                            with gr.Row():
+                                with gr.Column(scale=1):
+                                    template_gallery = gr.Radio(
+                                        choices=[t["name"] for t in self.templates],
+                                        label="Available Templates",
+                                        value="Calculator"
+                                    )
+                                    
+                                    template_info = gr.JSON(
+                                        value=self.templates[0],
+                                        label="Template Details"
+                                    )
+                                
+                                with gr.Column(scale=2):
+                                    server_name = gr.Textbox(
+                                        label="Server Name",
+                                        placeholder="my-calculator-server"
+                                    )
+                                    
+                                    server_code = gr.Code(
+                                        value=self.templates[0]["code"],
+                                        language="python",
+                                        label="Server Code",
+                                        lines=20
+                                    )
+                                    
+                                    with gr.Row():
+                                        create_btn = gr.Button("✨ Create Server", variant="primary")
+                                        test_btn = gr.Button("🧪 Test Server")
+                                    
+                                    creation_output = gr.JSON(label="Server Status")
+                        
+                        # Pipeline Builder
+                        with gr.Tab("🔗 Pipeline Builder"):
+                            gr.Markdown("### Visual Pipeline Builder [DEMO]")
+                            gr.Markdown(
+                                "The full version includes a visual pipeline builder for creating complex workflows. "
+                                "This feature requires the agent components from the GitHub repository."
+                            )
+                            gr.Image(
+                                value=None,
+                                label="Pipeline Builder Preview [DEMO]"
+                            )
+                        
+                        # Templates Gallery
+                        with gr.Tab("📚 Templates"):
+                            gr.Markdown("## 🎨 Server Template Gallery")
+                            gr.Markdown(
+                                "Choose from our collection of pre-built MCP server templates. "
+                                "Full versions include AI/ML templates, database connectors, and more!"
+                            )
+                            
+                            with gr.Row():
+                                for template in self.templates:
+                                    with gr.Column():
+                                        gr.Markdown(f"### {template['name']}")
+                                        gr.Markdown(f"_{template['description']}_")
+                                        gr.Button(f"Use {template['name']} Template", variant="secondary")
+                
+                # Tab 3: Server Management
+                with gr.Tab("🖥️ Server Management"):
+                    with gr.Tabs():
+                        # Active Servers
+                        with gr.Tab("🟢 Active Servers"):
+                            gr.Markdown("### Currently Running Servers")
+                            
+                            with gr.Row():
+                                server_status = gr.JSON(
+                                    value={"message": "Demo mode - showing simulated servers", "count": 2},
+                                    label="Server Status"
+                                )
+                                refresh_btn = gr.Button("🔄 Refresh", scale=0)
+                            
+                            # Simulated active servers
+                            with gr.Row():
+                                with gr.Column():
+                                    gr.Markdown("**Calculator Server** 🟢")
+                                    gr.Markdown("Port: 8080 | Status: Running")
+                                with gr.Column():
+                                    gr.Markdown("**Text Processor** 🟢")
+                                    gr.Markdown("Port: 8081 | Status: Running")
+                        
+                        # Browse Registry
+                        with gr.Tab("📦 Browse Registry"):
+                            gr.Markdown("### MCP Server Registry [DEMO]")
+                            gr.Markdown(
+                                "The full version includes access to a registry of community MCP servers. "
+                                "Install servers from npm, PyPI, or custom sources!"
+                            )
+                
+                # Tab 4: Agent Control Panel
+                with gr.Tab("🤖 Agent Control Panel"):
+                    gr.Markdown("## Agent Control Panel [DEMO]")
+                    gr.Markdown(
+                        "In the full version, this panel allows you to:\n"
+                        "- Create and manage custom agents\n"
+                        "- Configure agent behaviors and tools\n"
+                        "- Monitor agent performance\n"
+                        "- Export and share agent configurations"
+                    )
+                    
+                    with gr.Row():
+                        with gr.Column():
+                            gr.Markdown("### Available Agents [DEMO]")
+                            gr.Markdown("- 🤖 Data Analysis Agent\n- ✍️ Creative Writing Agent\n- 🔍 Code Review Agent")
+                        with gr.Column():
+                            gr.Markdown("### Agent Status [DEMO]")
+                            gr.JSON(value={"status": "demo", "agents": 3})
+                
+                # Tab 5: MCP Connections
+                with gr.Tab("🔌 MCP Connections"):
+                    with gr.Tabs():
+                        # Quick Connect
+                        with gr.Tab("⚡ Quick Connect"):
+                            gr.Markdown("### Quick Connect to MCP Servers [DEMO]")
+                            gr.Markdown(
+                                "The full version allows instant connection to MCP servers via stdio, HTTP, or WebSocket."
+                            )
+                            
+                            with gr.Row():
+                                connection_type = gr.Radio(
+                                    choices=["stdio", "http", "websocket"],
+                                    label="Connection Type [DEMO]",
+                                    value="stdio"
+                                )
+                                connect_btn = gr.Button("Connect [DEMO]", variant="primary")
+                        
+                        # Active Connections
+                        with gr.Tab("🔗 Active Connections"):
+                            gr.Markdown("### Currently Connected Servers [DEMO]")
+                            gr.Markdown("No active connections in demo mode")
+                        
+                        # Custom Connection
+                        with gr.Tab("➕ Custom Connection"):
+                            gr.Markdown("### Add Custom MCP Connection [DEMO]")
+                            gr.Textbox(label="Server Command [DEMO]", placeholder="python my_server.py")
+                            gr.Textbox(label="Arguments [DEMO]", placeholder="--port 8080")
+                
+                # Tab 6: Help & Resources
+                with gr.Tab("📚 Help & Resources"):
+                    with gr.Tabs():
+                        # User Guides
+                        with gr.Tab("📖 User Guides"):
+                            gr.Markdown("""
+                            ## User Guides
+                            
+                            ### Getting Started
+                            1. **Install the full version** from [GitHub]({GITHUB_REPO})
+                            2. **Set up your environment** with required dependencies
+                            3. **Launch the playground** and start building!
+                            
+                            ### Key Features
+                            - 🤖 **AI Assistants** - Three specialized assistants for different tasks
+                            - 🔧 **Server Builder** - Create MCP servers from templates
+                            - 🔌 **Live Connections** - Connect to any MCP server
+                            - 📊 **Visual Pipeline Builder** - Create complex workflows
+                            """.replace("{GITHUB_REPO}", GITHUB_REPO))
+                        
+                        # Configuration
+                        with gr.Tab("⚙️ Configuration"):
+                            gr.Markdown("### Configuration Guide [DEMO]")
+                            gr.Code(
+                                value='{\n  "servers": [\n    {\n      "name": "example-server",\n      "command": "python",\n      "args": ["server.py"]\n    }\n  ]\n}',
+                                language="json",
+                                label="Example Configuration"
+                            )
+                        
+                        # Quick Start
+                        with gr.Tab("🚀 Quick Start"):
+                            gr.Markdown(f"""
+                            ## Quick Start Guide
+                            
+                            ### 1. Get the Full Version
+                            ```bash
+                            git clone {GITHUB_REPO}
+                            cd gradio-mcp-playground
+                            ```
+                            
+                            ### 2. Install Dependencies
+                            ```bash
+                            pip install -e ".[all]"
+                            ```
+                            
+                            ### 3. Launch the Playground
+                            ```bash
+                            gmp --help  # See all options
+                            gmp ui      # Launch the full UI
+                            ```
+                            """)
+                        
+                        # Tutorials
+                        with gr.Tab("💡 Tutorials"):
+                            gr.Markdown("### Available Tutorials [DEMO]")
+                            gr.Markdown(
+                                "- Building Your First MCP Server\n"
+                                "- Connecting Multiple Servers\n"
+                                "- Creating Custom Agents\n"
+                                "- Advanced Pipeline Workflows"
+                            )
+                        
+                        # API Reference
+                        with gr.Tab("🔧 API Reference"):
+                            gr.Markdown("### MCP API Reference [DEMO]")
+                            gr.Markdown("Full API documentation available in the GitHub repository.")
+                        
+                        # Troubleshooting
+                        with gr.Tab("🛠️ Troubleshooting"):
+                            gr.Markdown("### Common Issues [DEMO]")
+                            gr.Markdown(
+                                "- **Connection Issues**: Check server logs and ports\n"
+                                "- **Performance**: Optimize server code and connections\n"
+                                "- **Compatibility**: Ensure MCP protocol version match"
+                            )
+            
+            # Event handlers
+            
+            # Assistant mode switching
+            def switch_assistant_mode(mode):
+                return (
+                    gr.update(visible=mode == "General Assistant"),
+                    gr.update(visible=mode == "MCP Development"),
+                    gr.update(visible=mode == "Agent Builder")
+                )
+            
+            assistant_mode.change(
+                switch_assistant_mode,
+                inputs=[assistant_mode],
+                outputs=[general_assistant_group, mcp_agent_group, agent_builder_group]
+            )
+            
+            # Demo chat handlers
+            def demo_chat_response(message, history):
+                """Simulate chat responses for demo"""
+                history = history or []
+                history.append({"role": "user", "content": message})
+                
+                # Simple demo responses
+                if "screenshot" in message.lower():
+                    response = "In the full version, I would capture a screenshot using the MCP screenshot tool. This demo doesn't have live MCP connections, but you can get the full functionality on GitHub!"
+                elif "file" in message.lower():
+                    response = "In the full version, I can read, write, and manipulate files using MCP file tools. Check out the GitHub repository for the complete experience!"
+                elif "search" in message.lower():
+                    response = "In the full version, I can search the web using MCP search tools. This demo shows what's possible - get the full version for actual functionality!"
+                else:
+                    response = f"This is a demo response. In the full version, I would process your request: '{message}' using connected MCP tools. Visit our GitHub repository for the complete Gradio MCP Playground!"
+                
+                history.append({"role": "assistant", "content": response})
+                return "", history
+            
+            demo_send_btn.click(
+                demo_chat_response,
+                inputs=[demo_input, demo_chatbot],
+                outputs=[demo_input, demo_chatbot]
+            )
+            
+            # Server management handlers
+            refresh_btn.click(
+                self.refresh_status,
+                inputs=[session_id],
+                outputs=[server_status]
+            )
+            
+            template_gallery.change(
+                self.update_template_view,
+                inputs=[template_gallery],
+                outputs=[template_info, server_code]
+            )
+            
+            create_btn.click(
+                self.create_server,
+                inputs=[server_name, server_code, session_id],
+                outputs=[creation_output]
+            )
+            
+            test_btn.click(
+                self.test_server,
+                inputs=[server_code],
+                outputs=[creation_output]
+            )
+            
+        return demo
+    
+    def get_custom_css(self) -> str:
+        """Custom CSS for the interface"""
+        return """
+        .gradio-container {
+            max-width: 1400px !important;
+        }
+        
+        /* Banner styling */
+        .banner a:hover {
+            transform: scale(1.05);
+        }
+        
+        /* Demo labels */
+        button:has-text("[DEMO]"), 
+        .label:has-text("[DEMO]") {
+            position: relative;
+        }
+        
+        button:has-text("[DEMO]")::after,
+        .label:has-text("[DEMO]")::after {
+            content: "DEMO";
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            background: #ff6b6b;
+            color: white;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 10px;
+            font-weight: bold;
+        }
+        
+        /* Dark mode friendly styles */
+        .template-card {
+            background: #374151;
+            border: 2px solid #4b5563;
+            border-radius: 8px;
+            padding: 16px;
+            margin: 8px 0;
+            transition: all 0.3s ease;
+        }
+        
+        .template-card:hover {
+            border-color: #60a5fa;
+            transform: translateY(-2px);
+        }
+        
+        .server-status {
+            padding: 12px;
+            border-radius: 8px;
+            margin: 8px 0;
+        }
+        
+        .status-active {
+            background: #10b981;
+            color: white;
+        }
+        
+        .status-inactive {
+            background: #ef4444;
+            color: white;
+        }
+        
+        /* Tab styling */
+        .tabs {
+            margin-top: 20px;
+        }
+        
+        /* Demo mode indicators */
+        .demo-indicator {
+            background: #ff6b6b;
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            display: inline-block;
+            margin-left: 8px;
+        }
+        """
+    
+    def refresh_status(self, session_id: str) -> Dict:
+        """Refresh server status"""
+        session = self.sessions.get(session_id, {})
+        servers = session.get("servers", [])
+        
+        return {
+            "message": f"Active servers: {len(servers)}",
+            "count": len(servers),
+            "servers": servers,
+            "timestamp": datetime.now().isoformat()
+        }
+    
+    def quick_deploy(self, template_name: str, session_id: str) -> Tuple[Dict, Dict]:
+        """Quick deploy a template"""
+        template = next((t for t in self.templates if t["name"] == template_name), None)
+        
+        if not template:
+            return {"error": "Template not found"}, self.refresh_status(session_id)
+        
+        # Initialize session
+        if session_id not in self.sessions:
+            self.sessions[session_id] = {"servers": []}
+        
+        # Add server to session
+        server_id = f"{template['id']}-{int(time.time())}"
+        server_info = {
+            "id": server_id,
+            "name": template_name,
+            "status": "active",
+            "created": datetime.now().isoformat()
+        }
+        
+        self.sessions[session_id]["servers"].append(server_info)
+        
+        return {
+            "success": True,
+            "message": f"Deployed {template_name}",
+            "server_id": server_id
+        }, self.refresh_status(session_id)
+    
+    def update_template_view(self, template_name: str) -> Tuple[Dict, str]:
+        """Update template view when selection changes"""
+        template = next((t for t in self.templates if t["name"] == template_name), None)
+        
+        if template:
+            return template, template["code"]
+        return {"error": "Template not found"}, ""
+    
+    def create_server(self, name: str, code: str, session_id: str) -> Dict:
+        """Create a new server"""
+        if not name:
+            return {"error": "Server name is required"}
+        
+        # Save server code temporarily
+        temp_dir = tempfile.mkdtemp()
+        server_file = Path(temp_dir) / f"{name}.py"
+        
+        try:
+            server_file.write_text(code)
+            
+            # Test if code is valid Python
+            result = subprocess.run(
+                [sys.executable, "-m", "py_compile", str(server_file)],
+                capture_output=True,
+                text=True
+            )
+            
+            if result.returncode != 0:
+                return {"error": f"Invalid Python code: {result.stderr}"}
+            
+            return {
+                "success": True,
+                "message": f"Server '{name}' created successfully",
+                "path": str(server_file)
+            }
+            
+        except Exception as e:
+            return {"error": f"Failed to create server: {str(e)}"}
+        finally:
+            # Cleanup
+            shutil.rmtree(temp_dir, ignore_errors=True)
+    
+    def test_server(self, code: str) -> Dict:
+        """Test server code"""
+        try:
+            # Basic syntax check
+            compile(code, '<string>', 'exec')
+            return {
+                "success": True,
+                "message": "Code syntax is valid",
+                "timestamp": datetime.now().isoformat()
+            }
+        except SyntaxError as e:
+            return {
+                "error": f"Syntax error at line {e.lineno}: {e.msg}",
+                "line": e.lineno
+            }
+        except Exception as e:
+            return {"error": f"Validation error: {str(e)}"}
+    
+    def update_tool_methods(self, server: str) -> Tuple[gr.Dropdown, Dict]:
+        """Update available methods based on selected server"""
+        methods_map = {
+            "calculator": {
+                "methods": ["add", "subtract", "multiply", "divide"],
+                "default_params": {"a": 10, "b": 5}
+            },
+            "text_processor": {
+                "methods": ["count_words", "reverse", "uppercase", "lowercase"],
+                "default_params": {"text": "Hello, World!"}
+            },
+            "echo": {
+                "methods": ["echo"],
+                "default_params": {"message": "Test message"}
+            }
+        }
+        
+        server_info = methods_map.get(server, {"methods": [], "default_params": {}})
+        
+        return gr.Dropdown(
+            choices=server_info["methods"],
+            value=server_info["methods"][0] if server_info["methods"] else None
+        ), server_info["default_params"]
+    
+    def execute_tool(self, server: str, method: str, params: Dict, session_id: str) -> Tuple[Dict, str]:
+        """Execute a tool method"""
+        log_lines = []
+        log_lines.append(f"[{datetime.now().strftime('%H:%M:%S')}] Executing {server}.{method}")
+        log_lines.append(f"Parameters: {json.dumps(params, indent=2)}")
+        
+        try:
+            # Simulate execution based on server type
+            if server == "calculator":
+                if method == "add":
+                    result = {"result": params.get("a", 0) + params.get("b", 0)}
+                elif method == "subtract":
+                    result = {"result": params.get("a", 0) - params.get("b", 0)}
+                elif method == "multiply":
+                    result = {"result": params.get("a", 0) * params.get("b", 0)}
+                elif method == "divide":
+                    b = params.get("b", 1)
+                    if b == 0:
+                        result = {"error": "Division by zero"}
+                    else:
+                        result = {"result": params.get("a", 0) / b}
+                else:
+                    result = {"error": f"Unknown method: {method}"}
+                    
+            elif server == "text_processor":
+                text = params.get("text", "")
+                if method == "count_words":
+                    result = {"count": len(text.split())}
+                elif method == "reverse":
+                    result = {"reversed": text[::-1]}
+                elif method == "uppercase":
+                    result = {"uppercase": text.upper()}
+                elif method == "lowercase":
+                    result = {"lowercase": text.lower()}
+                else:
+                    result = {"error": f"Unknown method: {method}"}
+                    
+            elif server == "echo":
+                result = {
+                    "echo": params,
+                    "timestamp": datetime.now().isoformat(),
+                    "server": server
+                }
+            else:
+                result = {"error": f"Unknown server: {server}"}
+            
+            log_lines.append(f"Result: {json.dumps(result, indent=2)}")
+            log_lines.append(f"[{datetime.now().strftime('%H:%M:%S')}] Execution completed")
+            
+            return result, "\n".join(log_lines)
+            
+        except Exception as e:
+            error_result = {"error": str(e), "type": type(e).__name__}
+            log_lines.append(f"Error: {str(e)}")
+            return error_result, "\n".join(log_lines)
+    
+    def demo_notification(self, action: str) -> str:
+        """Return a demo notification message"""
+        return f"[DEMO MODE] {action} - This feature requires the full version. Visit {GITHUB_REPO} for complete functionality!"
+
+# Create and launch the app
+app = MCPPlaygroundApp()
+demo = app.create_interface()
+
+if __name__ == "__main__":
+    demo.queue(api_open=False).launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        favicon_path="🛝",
+        show_api=False
+    )

requirements.txt

@@ -0,0 +1,5 @@
+# requirements.txt for HF Space
+gradio
+huggingface-hub>=0.23.0
+pydantic>=2.0.0
+typing-extensions>=4.5.0