Spaces:

korakot
/

render-html

Sleeping

App Files Files Community

korakot commited on Feb 28

Commit

deb8d3c

verified ·

1 Parent(s): de2d28e

Upload app.py with huggingface_hub

Browse files

Files changed (1) hide show

app.py +141 -47

app.py CHANGED Viewed

@@ -1,41 +1,126 @@
 """render-html MCP Apps server — renders arbitrary HTML inline in AI chat.
-Deploy as HF Space, connect as MCP connector in Claude/ChatGPT.
-Endpoint: https://korakot-render-html.hf.space/mcp
 """
-from fastmcp import FastMCP
-from mcp_ui_server import create_ui_resource
-from mcp_ui_server.core import UIResource
 mcp = FastMCP("render-html")
-@mcp.tool()
-def render_html(html: str, title: str = "Rendered Content") -> list[UIResource]:
     """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 [create_ui_resource({
-        "uri": f"ui://render-html/{title.lower().replace(' ', '-')}",
-        "content": {
-            "type": "rawHtml",
-            "htmlString": html,
-        },
-        "encoding": "text",
-    })]
-@mcp.tool()
-def render_image(url: str, alt: str = "", width: int = 0) -> list[UIResource]:
     """Display an image from a URL inline in the conversation.
     Args:
@@ -47,36 +132,45 @@ def render_image(url: str, alt: str = "", width: int = 0) -> list[UIResource]:
     if width > 0:
         style = f'width:{width}px;max-width:100%;height:auto;'
-    html = f'''<!DOCTYPE html>
-<html><body style="margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;">
-<img src="{url}" alt="{alt}" style="{style}" />
-</body></html>'''
-    return [create_ui_resource({
-        "uri": "ui://render-html/image",
-        "content": {"type": "rawHtml", "htmlString": html},
-        "encoding": "text",
-    })]
-@mcp.tool()
-def render_svg(svg: str, title: str = "SVG Diagram") -> list[UIResource]:
     """Render an SVG diagram inline in the conversation.
     Args:
         svg: SVG markup string.
         title: Optional title.
     """
-    html = f'''<!DOCTYPE html>
-<html><body style="margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background:#fff;">
-{svg}
-</body></html>'''
-    return [create_ui_resource({
-        "uri": "ui://render-html/svg",
-        "content": {"type": "rawHtml", "htmlString": html},
-        "encoding": "text",
-    })]
 if __name__ == "__main__":

 """render-html MCP Apps server — renders arbitrary HTML inline in AI chat.
+Architecture (matching PDF Viewer pattern):
+1. Resource at ui://render-html/viewer.html → the viewer app (text/html;profile=mcp-app)
+2. Tools return structuredContent with _meta.ui.resourceUri pointing to viewer
+3. Viewer receives data via postMessage (ui/notifications/tool-result)
 """
+from mcp.server.fastmcp import FastMCP
+from mcp.types import CallToolResult, TextContent
+import json
 mcp = FastMCP("render-html")
+# ── The viewer HTML app ──────────────────────────────────────────────
+# This is served as an MCP resource. The host renders it in a sandboxed
+# iframe and sends tool results to it via postMessage.
+VIEWER_HTML = """<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<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>
+"""
+VIEWER_URI = "ui://render-html/viewer.html"
+# ── Register the viewer as an MCP resource ───────────────────────────
+@mcp.resource(
+    VIEWER_URI,
+    name="HTML Viewer",
+    description="Viewer app that renders arbitrary HTML content",
+    mime_type="text/html;profile=mcp-app",
+)
+def viewer_resource() -> str:
+    return VIEWER_HTML
+# ── Tools ────────────────────────────────────────────────────────────
+@mcp.tool(
+    name="render_html",
+    annotations={
+        "title": "Render HTML",
+        "readOnlyHint": True,
+        "openWorldHint": True,
+    },
+    meta={"ui": {"resourceUri": VIEWER_URI}},
+)
+def render_html(html: str, title: str = "Rendered Content") -> CallToolResult:
     """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(
+        content=[TextContent(type="text", text=f"Rendered: {title}")],
+        structuredContent={"html": html, "title": title},
+        _meta={"ui": {"resourceUri": VIEWER_URI}},
+    )
+@mcp.tool(
+    name="render_image",
+    annotations={
+        "title": "Render Image",
+        "readOnlyHint": True,
+        "openWorldHint": True,
+    },
+    meta={"ui": {"resourceUri": VIEWER_URI}},
+)
+def render_image(url: str, alt: str = "", width: int = 0) -> CallToolResult:
     """Display an image from a URL inline in the conversation.
     Args:
     if width > 0:
         style = f'width:{width}px;max-width:100%;height:auto;'
+    img_html = (
+        f'<div style="display:flex;justify-content:center;align-items:center;'
+        f'min-height:200px;padding:8px;">'
+        f'<img src="{url}" alt="{alt}" style="{style}" />'
+        f'</div>'
+    )
+    return CallToolResult(
+        content=[TextContent(type="text", text=f"Image: {alt or url}")],
+        structuredContent={"html": img_html, "title": alt or "Image"},
+        _meta={"ui": {"resourceUri": VIEWER_URI}},
+    )
+@mcp.tool(
+    name="render_svg",
+    annotations={
+        "title": "Render SVG",
+        "readOnlyHint": True,
+        "openWorldHint": True,
+    },
+    meta={"ui": {"resourceUri": VIEWER_URI}},
+)
+def render_svg(svg: str, title: str = "SVG Diagram") -> CallToolResult:
     """Render an SVG diagram inline in the conversation.
     Args:
         svg: SVG markup string.
         title: Optional title.
     """
+    wrapped = (
+        f'<div style="display:flex;justify-content:center;align-items:center;'
+        f'min-height:200px;padding:8px;background:#fff;">'
+        f'{svg}</div>'
+    )
+    return CallToolResult(
+        content=[TextContent(type="text", text=f"SVG: {title}")],
+        structuredContent={"svg": wrapped, "title": title},
+        _meta={"ui": {"resourceUri": VIEWER_URI}},
+    )
 if __name__ == "__main__":