Update app.py

app.py

@@ -1534,35 +1534,58 @@ Built with ❤️ for the MCP community
             )
         
         with gr.Tab("📖 API Docs"):
-            gr.Markdown(
-                """
-📡 API EndpointsOrchestrator APIBase URL: https://mcp-1st-birthday-rewardpilot-orchestrator.hf.spacePOST /recommendGet comprehensive card recommendation.Request:
-jsonCopy code[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}{
+            api_docs_html = """
+<div style="font-family: system-ui; padding: 20px;">
+    <h2>📡 API Endpoints</h2>
+    
+    <h3>Orchestrator API</h3>
+    <p><strong>Base URL:</strong> <code>https://mcp-1st-birthday-rewardpilot-orchestrator.hf.space</code></p>
+    
+    <h4>POST /recommend</h4>
+    <p>Get comprehensive card recommendation.</p>
+    
+    <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
+{
   "user_id": "u_alice",
   "merchant": "Whole Foods",
   "mcc": "5411",
   "amount_usd": 125.50,
   "transaction_date": "2025-01-15"
 }
+    </pre>
+    
+    <hr>
+    
+    <h3>Other Services</h3>
+    <ul>
+        <li><strong>Smart Wallet:</strong> https://mcp-1st-birthday-rewardpilot-smart-wallet.hf.space</li>
+        <li><strong>Rewards-RAG:</strong> https://mcp-1st-birthday-rewardpilot-rewards-rag.hf.space</li>
+        <li><strong>Spend-Forecast:</strong> https://mcp-1st-birthday-rewardpilot-spend-forecast.hf.space</li>
+    </ul>
+    
+    <hr>
+    
+    <h3>📚 Interactive Docs</h3>
+    <p>Visit <code>/docs</code> on any service for Swagger UI:</p>
+    <ul>
+        <li><a href="https://mcp-1st-birthday-rewardpilot-orchestrator.hf.space/docs" target="_blank">Orchestrator Docs</a></li>
+        <li><a href="https://mcp-1st-birthday-rewardpilot-smart-wallet.hf.space/docs" target="_blank">Smart Wallet Docs</a></li>
+    </ul>
+    
+    <hr>
+    
+    <h3>🔧 cURL Example</h3>
+    <pre style="background: #f5f5f5; padding: 15px; border-radius: 5px; overflow-x: auto;">
+curl -X POST https://mcp-1st-birthday-rewardpilot-orchestrator.hf.space/recommend \\
+  -H "Content-Type: application/json" \\
+  -d '{"user_id": "u_alice", "merchant": "Whole Foods", "mcc": "5411", "amount_usd": 125.50}'
+    </pre>
+</div>
+"""
 
-Other Services[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}ServiceBase URLSmart Wallethttps://mcp-1st-birthday-rewardpilot-smart-wallet.hf.spaceRewards-RAGhttps://mcp-1st-birthday-rewardpilot-rewards-rag.hf.spaceSpend-Forecasthttps://mcp-1st-birthday-rewardpilot-spend-forecast.hf.space
-
-📚 Interactive DocsVisit /docs on any service for interactive Swagger UI documentation.Examples:
-https://mcp-1st-birthday-rewardpilot-orchestrator.hf.space/docs
-https://mcp-1st-birthday-rewardpilot-smart-wallet.hf.space/docs
+            # In your Gradio interface:
+            gr.HTML(api_docs_html)
 
-🔧 cURL ExamplesbashCopy code[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}# Get recommendation
-curl -X POST https://mcp-1st-birthday-rewardpilot-orchestrator.hf.space/recommend \
-  -H "Content-Type: application/json" \
-  -d '{
-    "user_id": "u_alice",
-    "merchant": "Whole Foods",
-    "mcc": "5411",
-    "amount_usd": 125.50
-  }'
-  
-"""
-)
 
 
 # ===================== Launch App =====================