Add complete UI with all tabs, chat interface, and demo labels - direct users to GitHub for full functionality

app.py

@@ -16,6 +16,7 @@ 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"""
@@ -24,6 +25,7 @@ class MCPPlaygroundApp:
         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"""
@@ -177,6 +179,20 @@ while True:
             ),
             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
@@ -189,135 +205,347 @@ while True:
             session_id = gr.State(value=lambda: str(uuid.uuid4()))
             
             with gr.Tabs() as tabs:
-                # Dashboard Tab
-                with gr.Tab("📊 Dashboard"):
-                    gr.Markdown("## Active MCP Servers")
+                # Tab 1: AI Assistant (Demo)
+                with gr.Tab("🛝 AI Assistant"):
+                    gr.Markdown("## AI Assistant Hub [DEMO]")
                     
                     with gr.Row():
-                        server_status = gr.JSON(
-                            value={"message": "No active servers", "count": 0},
-                            label="Server Status"
+                        assistant_mode = gr.Radio(
+                            choices=["General Assistant", "MCP Development", "Agent Builder"],
+                            value="General Assistant",
+                            label="Assistant Mode",
+                            info="Choose your assistant type"
                         )
-                        refresh_btn = gr.Button("🔄 Refresh", scale=0)
                     
-                    gr.Markdown("## Quick Actions")
-                    with gr.Row():
-                        with gr.Column():
-                            quick_template = gr.Dropdown(
-                                choices=[t["name"] for t in self.templates],
-                                label="Select Template",
-                                value="Calculator"
+                    # 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,
+                            type="messages",
+                            value=[
+                                {"role": "assistant", "content": "👋 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!"},
+                                {"role": "user", "content": "Can you take a screenshot of a website?"},
+                                {"role": "assistant", "content": "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
                             )
-                            deploy_quick = gr.Button("🚀 Quick Deploy", variant="primary")
+                            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."
+                        )
                         
-                        deployment_result = gr.JSON(label="Deployment Result")
+                        mcp_demo_chatbot = gr.Chatbot(
+                            label="Chat with Liam [DEMO]",
+                            height=500,
+                            type="messages",
+                            value=[
+                                {"role": "assistant", "content": "👋 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,
+                            type="messages",
+                            value=[
+                                {"role": "assistant", "content": "👋 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!"}
+                            ]
+                        )
                 
-                # Server Builder Tab
+                # Tab 2: Server Builder
                 with gr.Tab("🔧 Server Builder"):
-                    gr.Markdown("## Create MCP Server from Template")
+                    gr.Markdown("### Build MCP Servers")
                     
-                    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"
+                    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."
                             )
-                            
-                            template_info = gr.JSON(
-                                value=self.templates[0],
-                                label="Template Details"
+                            gr.Image(
+                                value=None,
+                                label="Pipeline Builder Preview [DEMO]"
                             )
                         
-                        with gr.Column(scale=2):
-                            server_name = gr.Textbox(
-                                label="Server Name",
-                                placeholder="my-calculator-server"
+                        # 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!"
                             )
                             
-                            server_code = gr.Code(
-                                value=self.templates[0]["code"],
-                                language="python",
-                                label="Server Code",
-                                lines=20
-                            )
+                            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():
-                                create_btn = gr.Button("✨ Create Server", variant="primary")
-                                test_btn = gr.Button("🧪 Test Server")
+                                server_status = gr.JSON(
+                                    value={"message": "Demo mode - showing simulated servers", "count": 2},
+                                    label="Server Status"
+                                )
+                                refresh_btn = gr.Button("🔄 Refresh", scale=0)
                             
-                            creation_output = gr.JSON(label="Server Status")
+                            # 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!"
+                            )
                 
-                # Tools Tab
-                with gr.Tab("🛠️ Tools"):
-                    gr.Markdown("## Test MCP Server Tools")
+                # 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():
-                            active_server = gr.Dropdown(
-                                choices=["calculator", "text_processor", "echo"],
-                                label="Select Server",
-                                value="calculator"
+                            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."
                             )
                             
-                            tool_method = gr.Dropdown(
-                                choices=["add", "subtract", "multiply", "divide"],
-                                label="Select Method"
-                            )
+                            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
                             
-                            tool_params = gr.JSON(
-                                value={"a": 10, "b": 5},
-                                label="Parameters"
-                            )
+                            ### 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!
                             
-                            execute_btn = gr.Button("▶️ Execute", variant="primary")
+                            ### 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))
                         
-                        with gr.Column():
-                            execution_result = gr.JSON(
-                                label="Execution Result",
-                                value={"status": "ready"}
+                        # 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
                             
-                            execution_log = gr.Textbox(
-                                label="Execution Log",
-                                lines=10,
-                                max_lines=20
-                            )
-                
-                # Settings Tab
-                with gr.Tab("⚙️ Settings"):
-                    gr.Markdown("## Playground Settings")
-                    
-                    with gr.Row():
-                        with gr.Column():
-                            gr.Markdown("### Display Settings")
-                            theme_select = gr.Radio(
-                                choices=["Light", "Dark", "System"],
-                                label="Theme",
-                                value="System"
-                            )
+                            ### 1. Get the Full Version
+                            ```bash
+                            git clone {GITHUB_REPO}
+                            cd gradio-mcp-playground
+                            ```
                             
-                            gr.Markdown("### About")
-                            gr.Markdown(f"""
-                            - **Version**: 1.0.0
-                            - **Space ID**: {HF_SPACE_ID}
-                            - **Mode**: {'HF Space' if HF_SPACE_MODE else 'Local'}
-                            - **Created by**: Gradio MCP Team
+                            ### 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]
             )
             
-            deploy_quick.click(
-                self.quick_deploy,
-                inputs=[quick_template, session_id],
-                outputs=[deployment_result, server_status]
-            )
-            
             template_gallery.change(
                 self.update_template_view,
                 inputs=[template_gallery],
@@ -336,25 +564,38 @@ while True:
                 outputs=[creation_output]
             )
             
-            active_server.change(
-                self.update_tool_methods,
-                inputs=[active_server],
-                outputs=[tool_method, tool_params]
-            )
-            
-            execute_btn.click(
-                self.execute_tool,
-                inputs=[active_server, tool_method, tool_params, session_id],
-                outputs=[execution_result, execution_log]
-            )
-            
         return demo
     
     def get_custom_css(self) -> str:
         """Custom CSS for the interface"""
         return """
         .gradio-container {
-            max-width: 1200px !important;
+            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 */
@@ -387,6 +628,22 @@ while True:
             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:
@@ -568,6 +825,10 @@ while True:
             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()