Update app.py

app.py

@@ -609,45 +609,149 @@ with gr.Blocks(title="🚦 Router MCP", css="""
             <p>Your Gateway to Optimal MCP Servers in Seconds</p>
         ''')
     
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("### Search MCP servers using natural language query")
-            query_input = gr.Textbox(
-                label="Describe the MCP Server you're looking for",
-                placeholder="e.g., 'I need an MCP Server that can generate images'"
-            )
-            
-            gr.Markdown("### Select sources to search")
-            hf_checkbox = gr.Checkbox(label="Hugging Face Spaces", value=True)
-            smithery_checkbox = gr.Checkbox(label="Smithery", value=False)
-            registry_checkbox = gr.Checkbox(label="Registry (Coming Soon)", value=False, interactive=False)
-            
-            result_limit = gr.Number(
-                label="Maximum number of results for each source",
-                value=3,
-                minimum=1,
-                maximum=20,
-                step=1
-            )
-            
-            gr.Markdown("### Select your OS")
-            client_radio = gr.Radio(
-                choices=["Mac/Linux", "Windows", "WSL"],
-                label="Choose your operating system to get the appropriate command format",
-                value="Mac/Linux",  # Default back to Mac/Linux
-                interactive=True,
-                elem_id="client_radio"
-            )
-            
+    with gr.Tabs() as tabs:
+        with gr.Tab("Overview"):
             with gr.Row():
-                keyword_search_button = gr.Button("Keyword Search")
-                semantic_search_button = gr.Button("Semantic Search")
-        
-        with gr.Column():
-            results_output = gr.JSON(
-                label="Search Results",
-                elem_id="results_output"
-            )
+                with gr.Column():
+                    gr.Markdown("""
+                    Router MCP is a powerful tool that helps you discover and connect to MCP servers. 
+                    Whether you're looking for specific functionality or exploring new possibilities, 
+                    Router MCP makes it easy to find the perfect server for your needs.
+
+                    ### How to Use Router MCP
+
+                    1. **Enter Your Query**
+                       - Type a natural language description of the MCP Server you're looking for
+                       - Be as specific or general as you need
+
+                    2. **Select Search Sources**
+                       - Choose where to search for MCP Servers
+                       - Currently supports Hugging Face Spaces and Smithery
+                       - Note: Anthropic's Registry is under development and not yet available
+
+                    3. **Choose Your OS**
+                       - Select your operating system (Mac/Linux, Windows, or WSL)
+                       - This ensures you get the correct configuration format for your system
+
+                    4. **Choose Search Type**
+                       - **Keyword Search**: Use when you have specific terms or names in mind
+                       - **Semantic Search**: Use when you want to find servers based on meaning and intent
+                       - Both methods will return ready-to-use MCP configurations
+
+                    ### Understanding Search Results
+
+                    The search results will show MCP Servers from different sources, each with their own format:
+
+                    #### Hugging Face Spaces Results
+                    - **id**: The Space's unique identifier
+                    - **likes**: Number of likes the Space has received
+                    - **trending_score**: The Space's popularity score
+                    - **source**: Always "huggingface"
+                    - **configuration**: Ready-to-use MCP configuration for SSE connection
+
+                    #### Smithery Results
+                    - **id**: The server's qualified name (e.g., "author/server-name")
+                    - **name**: Display name of the server
+                    - **description**: Detailed description of the server's capabilities
+                    - **likes**: Number of times the server has been used
+                    - **source**: Always "smithery"
+                    - **configuration**: OS-specific MCP configuration (requires your Smithery key)
+
+                    > Note: For Smithery servers, you'll need to replace "YOUR_SMITHERY_KEY" in the configuration with your actual Smithery API key.
+                    """)
+                with gr.Column():
+                    gr.Markdown("""
+                    ### Features
+
+                    - **Multi-Source Search**: Search across Hugging Face Spaces and Smithery
+                    - **Smart Search**: Choose between keyword and semantic search
+                    - **OS-Specific Configs**: Get configurations tailored to your operating system
+                    - **Ready-to-Use**: Direct integration with MCP-compatible clients
+                    """)
+
+        with gr.Tab("Try Router MCP"):
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown("### Search MCP servers using natural language query")
+                    query_input = gr.Textbox(
+                        label="Describe the MCP Server you're looking for",
+                        placeholder="e.g., 'I need an MCP Server that can generate images'"
+                    )
+                    
+                    gr.Markdown("### Select sources to search")
+                    hf_checkbox = gr.Checkbox(label="Hugging Face Spaces", value=True)
+                    smithery_checkbox = gr.Checkbox(label="Smithery", value=False)
+                    registry_checkbox = gr.Checkbox(label="Registry (Coming Soon)", value=False, interactive=False)
+                    
+                    result_limit = gr.Number(
+                        label="Maximum number of results for each source",
+                        value=3,
+                        minimum=1,
+                        maximum=20,
+                        step=1
+                    )
+                    
+                    gr.Markdown("### Select your OS")
+                    client_radio = gr.Radio(
+                        choices=["Mac/Linux", "Windows", "WSL"],
+                        label="Choose your operating system to get the appropriate command format",
+                        value="Mac/Linux",
+                        interactive=True,
+                        elem_id="client_radio"
+                    )
+                    
+                    with gr.Row():
+                        keyword_search_button = gr.Button("Keyword Search")
+                        semantic_search_button = gr.Button("Semantic Search")
+                
+                with gr.Column():
+                    results_output = gr.JSON(
+                        label="Search Results",
+                        elem_id="results_output"
+                    )
+
+        with gr.Tab("How to Integrate"):
+            gr.Markdown("""
+            ### Integration Guide
+
+            To integrate Router MCP with your preferred client, follow these instructions:
+
+            #### For SSE-Supported Clients
+            For clients that support SSE (e.g., Cursor, Windsurf, Cline), add this configuration to your MCP config:
+
+            ```json
+            {
+              "mcpServers": {
+                "gradio": {
+                  "url": "https://agents-mcp-hackathon-router-mcp.hf.space/gradio_api/mcp/sse"
+                }
+              }
+            }
+            ```
+
+            #### For stdio-Only Clients
+            For clients that only support stdio (e.g., Claude Desktop):
+            1. First, install Node.js
+            2. Add this configuration to your MCP config:
+
+            ```json
+            {
+              "mcpServers": {
+                "gradio": {
+                  "command": "npx",
+                  "args": [
+                    "mcp-remote",
+                    "https://agents-mcp-hackathon-router-mcp.hf.space/gradio_api/mcp/sse",
+                    "--transport",
+                    "sse-only"
+                  ]
+                }
+              }
+            }
+            ```
+
+            For more information about MCP, check out the [Gradio documentation](https://gradio.app/docs/mcp).
+            """)
     
     # Set up event handlers
     def get_sources():