Add 'Use with MCP' button that opens API view

app.py

@@ -211,6 +211,22 @@ with gr.Blocks(title="Web Search MCP Server") as demo:
         also test it manually below.
         """
     )
+    
+    gr.HTML(
+        """
+        <div style="margin: 16px 0;">
+            <a href="#" 
+               onclick="window.location.href = window.location.pathname + '?view=api'; return false;"
+               style="display: inline-block; padding: 10px 20px; background-color: #1a1a2e; color: white; text-decoration: none; border-radius: 6px; font-weight: 500; border: 1px solid #333; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2); cursor: pointer;"
+               onmouseover="this.style.backgroundColor='#16213e'; this.style.boxShadow='0 4px 8px rgba(0,0,0,0.3)';"
+               onmouseout="this.style.backgroundColor='#1a1a2e'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.2)';">
+                <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/use-with-mcp-lg-dark.svg" 
+                     alt="Use with MCP" 
+                     style="height: 20px; vertical-align: middle;">
+            </a>
+        </div>
+        """
+    )
 
     with gr.Row():
         with gr.Column(scale=3):