update

server.py

@@ -1,7 +1,8 @@
 import contextlib
-from fastapi import FastAPI
+from fastapi import FastAPI, Request
 from fastapi.responses import HTMLResponse, FileResponse
 from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
 from echo_server import mcp as echo_mcp
 from math_server import mcp as math_mcp
 import os
@@ -18,16 +19,24 @@ async def lifespan(app: FastAPI):
 
 BASE_DIR = os.path.dirname(__file__)
 STATIC_DIR = os.path.join(BASE_DIR, "static")
+TEMPLATES_DIR = os.path.join(BASE_DIR, "templates")
 
 app = FastAPI(lifespan=lifespan)
 
-# Serve static assets (screenshot, styles) and the root HTML page
+# Serve static assets (screenshot, styles)
 app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
 
+templates = Jinja2Templates(directory=TEMPLATES_DIR)
+
 
 @app.get("/", response_class=HTMLResponse)
-async def index():
-    return FileResponse(os.path.join(STATIC_DIR, "index.html"), media_type="text/html")
+async def index(request: Request):
+    space_host = os.environ.get("SPACE_HOST")
+    if space_host and space_host.strip():
+        base_url = space_host.strip().rstrip("/")
+    else:
+        base_url = f"{request.url.scheme}://{request.url.netloc}"
+    return templates.TemplateResponse("index.html", {"request": request, "base_url": base_url})
 
 
 app.mount("/echo", echo_mcp.streamable_http_app())

{static → templates}/index.html

@@ -52,13 +52,13 @@
           <div class="tile">
             <h3>Available servers</h3>
             <ul class="muted">
-              <li><a href="/echo">/echo</a> — Echo MCP server</li>
-              <li><a href="/math">/math</a> — Math MCP server</li>
+              <li><a href="{{ base_url }}/echo" target="_blank" rel="noopener noreferrer">{{ base_url }}/echo</a> — Echo MCP server</li>
+              <li><a href="{{ base_url }}/math" target="_blank" rel="noopener noreferrer">{{ base_url }}/math</a> — Math MCP server</li>
             </ul>
           </div>
           <div class="tile">
             <h3>Base URL</h3>
-            <p class="muted">Each server lives at <code>{base_URL}/&lt;server-name&gt;</code>. Replace <code>{base_URL}</code> with your Space's origin.</p>
+            <p class="muted">Each server lives at <code>{{ "{{ base_URL }}" }}</code> → here, resolved to <code>{{ base_url }}</code>. Replace it with your Space's origin if needed.</p>
           </div>
         </div>
 
@@ -71,10 +71,10 @@
 
         <pre><code>Example
 
-base_URL = https://your-space-name.hf.space
+base_URL = {{ base_url }}
 
-Echo MCP  = {base_URL}/echo
-Math MCP  = {base_URL}/math
+Echo MCP  = {{ base_url }}/echo
+Math MCP  = {{ base_url }}/math
 </code></pre>
 
         <p class="muted" style="margin:10px 0 8px">Illustration of the “Embed this Space” dialog:</p>
@@ -85,20 +85,20 @@ Math MCP  = {base_URL}/math
       <div class="card">
         <h3 style="margin-top:0">Quick links</h3>
         <ul>
-          <li><a href="/echo">Open /echo</a></li>
-          <li><a href="/math">Open /math</a></li>
+          <li><a href="{{ base_url }}/echo" target="_blank" rel="noopener noreferrer">Open /echo</a></li>
+          <li><a href="{{ base_url }}/math" target="_blank" rel="noopener noreferrer">Open /math</a></li>
         </ul>
         <h3>Use in clients</h3>
         <p class="muted">Point your MCP client to the endpoints below:</p>
         <pre><code>HTTP streaming endpoints
 
-Echo: GET {base_URL}/echo
-Math: GET {base_URL}/math
+Echo: GET {{ base_url }}/echo
+Math: GET {{ base_url }}/math
 </code></pre>
       </div>
     </div>
 
-    <p class="footer">Built with FastAPI. This page is just a static HTML file served from <code>/static/index.html</code>. Credit: discovered via <a href="https://youtu.be/wXAqv8uvY0M" target="_blank" rel="noopener noreferrer">this video</a>.</p>
+    <p class="footer"> Credit: technique discovered via <a href="https://youtu.be/wXAqv8uvY0M" target="_blank" rel="noopener noreferrer">this video</a>.</p>
   </div>
 </body>
 </html>