Spaces:

korakot
/

render-html

Running

App Files Files Community

korakot commited on 4 days ago

Commit

ee7487c

verified ·

1 Parent(s): 48a7d73

Upload app.py with huggingface_hub

Browse files

Files changed (1) hide show

app.py +79 -31

app.py CHANGED Viewed

@@ -2,22 +2,27 @@
 Architecture (matching PDF Viewer pattern):
 1. Resource at ui://render-html/viewer.html (text/html;profile=mcp-app)
-2. Tools have _meta.ui.resourceUri AND _meta["ui/resourceUri"] pointing to viewer
 3. Tools return structuredContent + outputSchema
-4. Viewer receives data via postMessage (ui/notifications/tool-result)
 """
 from mcp.server.fastmcp import FastMCP
 from mcp.server.transport_security import TransportSecuritySettings
 from mcp.types import CallToolResult, TextContent
-from pydantic import BaseModel, Field
 from typing import Annotated
 mcp = FastMCP("render-html", transport_security=TransportSecuritySettings(
     enable_dns_rebinding_protection=False,
 ))
-# ── The viewer HTML app ──────────────────────────────────────────────
 VIEWER_HTML = """<!DOCTYPE html>
 <html lang="en">
@@ -27,46 +32,87 @@ VIEWER_HTML = """<!DOCTYPE html>
 <title>Render HTML Viewer</title>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
-  html, body { width: 100%; height: 100%; overflow: auto; }
   #content { width: 100%; min-height: 100%; }
   #loading { display: flex; align-items: center; justify-content: center;
-             height: 100vh; font-family: system-ui; color: #666; }
 </style>
 </head>
 <body>
-<div id="loading">Loading...</div>
 <div id="content" style="display:none;"></div>
 <script>
-  const contentEl = document.getElementById('content');
-  const loadingEl = document.getElementById('loading');
   function renderContent(data) {
     if (!data) return;
-    const html = data.html || data.svg || '';
-    if (html) {
-      loadingEl.style.display = 'none';
-      contentEl.style.display = 'block';
-      contentEl.innerHTML = html;
-      // Execute any script tags
-      contentEl.querySelectorAll('script').forEach(old => {
-        const s = document.createElement('script');
-        if (old.src) s.src = old.src;
-        else s.textContent = old.textContent;
-        old.replaceWith(s);
-      });
     }
   }
-  // Listen for MCP Apps tool-result notification
-  window.addEventListener('message', (event) => {
     if (event.source !== window.parent) return;
-    const msg = event.data;
     if (!msg || msg.jsonrpc !== '2.0') return;
     if (msg.method === 'ui/notifications/tool-result') {
-      renderContent(msg.params?.structuredContent);
     }
   }, { passive: true });
 </script>
 </body>
 </html>
@@ -74,14 +120,14 @@ VIEWER_HTML = """<!DOCTYPE html>
 VIEWER_URI = "ui://render-html/viewer.html"
-# Both forms of the meta key (PDF Viewer uses both)
 TOOL_META = {
     "ui": {"resourceUri": VIEWER_URI},
     "ui/resourceUri": VIEWER_URI,
 }
-# ── Register the viewer as an MCP resource ───────────────────────────
 @mcp.resource(
     VIEWER_URI,
     name="HTML Viewer",
@@ -92,7 +138,7 @@ def viewer_resource() -> str:
     return VIEWER_HTML
-# ── Output schemas ───────────────────────────────────────────────────
 class HtmlOutput(BaseModel):
     html: str
@@ -103,7 +149,7 @@ class SvgOutput(BaseModel):
     title: str
-# ── Tools ────────────────────────────────────────────────────────────
 @mcp.tool(
     name="render_html",
@@ -118,10 +164,12 @@ def render_html(html: str, title: str = "Rendered Content") -> Annotated[CallToo
     """Render arbitrary HTML content inline in the conversation.
     Use this to display images, SVG diagrams, charts, styled content,
-    or any HTML/CSS/JS directly in the chat.
     Args:
-        html: Complete HTML content to render.
         title: Optional title for the rendered content.
     """
     return CallToolResult(

 Architecture (matching PDF Viewer pattern):
 1. Resource at ui://render-html/viewer.html (text/html;profile=mcp-app)
+2. Tools have _meta.ui.resourceUri pointing to viewer
 3. Tools return structuredContent + outputSchema
+4. Viewer implements MCP Apps handshake: ui/initialize -> tool-result
 """
 from mcp.server.fastmcp import FastMCP
 from mcp.server.transport_security import TransportSecuritySettings
 from mcp.types import CallToolResult, TextContent
+from pydantic import BaseModel
 from typing import Annotated
 mcp = FastMCP("render-html", transport_security=TransportSecuritySettings(
     enable_dns_rebinding_protection=False,
 ))
+# -- The viewer HTML app ---------------------------------------------------
+# Implements the MCP Apps lifecycle:
+# 1. View -> Host: ui/initialize (JSON-RPC request)
+# 2. Host -> View: response with host context
+# 3. View -> Host: ui/notifications/initialized
+# 4. Host -> View: ui/notifications/tool-result with structuredContent
 VIEWER_HTML = """<!DOCTYPE html>
 <html lang="en">
 <title>Render HTML Viewer</title>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { width: 100%; height: 100%; overflow: auto; background: transparent; }
   #content { width: 100%; min-height: 100%; }
   #loading { display: flex; align-items: center; justify-content: center;
+             height: 100vh; font-family: system-ui; color: #666; font-size: 14px; }
 </style>
 </head>
 <body>
+<div id="loading">Loading&#8230;</div>
 <div id="content" style="display:none;"></div>
 <script>
+(function() {
+  var contentEl = document.getElementById('content');
+  var loadingEl = document.getElementById('loading');
+  var msgId = 1;
+  // -- Render HTML content from structuredContent --
   function renderContent(data) {
     if (!data) return;
+    var html = data.html || data.svg || '';
+    if (!html) return;
+    loadingEl.style.display = 'none';
+    contentEl.style.display = 'block';
+    contentEl.innerHTML = html;
+    // Re-execute script tags
+    var scripts = contentEl.querySelectorAll('script');
+    for (var i = 0; i < scripts.length; i++) {
+      var old = scripts[i];
+      var s = document.createElement('script');
+      if (old.src) s.src = old.src;
+      else s.textContent = old.textContent;
+      old.parentNode.replaceChild(s, old);
+    }
+  }
+  // -- Send JSON-RPC message to host --
+  function sendToHost(msg) {
+    if (window.parent && window.parent !== window) {
+      window.parent.postMessage(msg, '*');
     }
   }
+  // -- MCP Apps initialization handshake --
+  // Step 1: Send ui/initialize request to host
+  var initId = msgId++;
+  sendToHost({
+    jsonrpc: '2.0',
+    id: initId,
+    method: 'ui/initialize',
+    params: {
+      appInfo: { name: 'render-html', version: '1.0.0' },
+      capabilities: {}
+    }
+  });
+  // -- Listen for messages from host --
+  window.addEventListener('message', function(event) {
     if (event.source !== window.parent) return;
+    var msg = event.data;
     if (!msg || msg.jsonrpc !== '2.0') return;
+    // Step 2: Host responds to ui/initialize with host context
+    if (msg.id === initId && msg.result) {
+      // Step 3: Send ui/notifications/initialized
+      sendToHost({
+        jsonrpc: '2.0',
+        method: 'ui/notifications/initialized',
+        params: {}
+      });
+    }
+    // Step 4: Receive tool-result notification
     if (msg.method === 'ui/notifications/tool-result') {
+      renderContent(msg.params && msg.params.structuredContent);
+    }
+    // Also handle tool-input (streaming partial args)
+    if (msg.method === 'ui/notifications/tool-input') {
+      // Could show preview; for render-html we wait for final result
     }
   }, { passive: true });
+})();
 </script>
 </body>
 </html>
 VIEWER_URI = "ui://render-html/viewer.html"
+# Both forms of the meta key (matching PDF Viewer)
 TOOL_META = {
     "ui": {"resourceUri": VIEWER_URI},
     "ui/resourceUri": VIEWER_URI,
 }
+# -- Register the viewer as an MCP resource --------------------------------
 @mcp.resource(
     VIEWER_URI,
     name="HTML Viewer",
     return VIEWER_HTML
+# -- Output schemas --------------------------------------------------------
 class HtmlOutput(BaseModel):
     html: str
     title: str
+# -- Tools -----------------------------------------------------------------
 @mcp.tool(
     name="render_html",
     """Render arbitrary HTML content inline in the conversation.
     Use this to display images, SVG diagrams, charts, styled content,
+    or any HTML/CSS/JS directly in the chat. The HTML is rendered in
+    a sandboxed iframe.
     Args:
+        html: Complete HTML content to render. Can include style, script,
+              inline styles, SVG, images via img tags, etc.
         title: Optional title for the rendered content.
     """
     return CallToolResult(