Skip to main content
Glama
Sign In
Claude GenUI

Claude GenUI

by liuchenxiwt798-collab
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

Render HTML

render_html

Renders free-form interactive HTML/CSS/JS interfaces inline in a sandbox for diagrams, simulations, mini apps, and custom visualizations.

Instructions

FALLBACK ONLY — use render_chart for data and render_card for structured info first. Renders a free-form interactive HTML/CSS/JS interface inline in a sandbox — diagrams, simulations, mini apps, custom visualizations (SVG, Canvas, D3, three.js). Provide a body fragment or full document. Scripts may be loaded only from cdn.jsdelivr.net, unpkg.com, cdnjs.cloudflare.com or esm.sh; no other network access. Inside scripts, call window.genui.send('text') to send a message back to Claude.

Tool call template

Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.

{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "arguments": {
      "html": "<html>"
    },
    "name": "render_html"
  }
}

Input Schema

NameRequiredDescriptionDefault
htmlYesHTML to render (inline <style> and <script> allowed)
titleNo
heightNoPreferred height in px

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv1.0.0

TDQS

A4.6/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the burden well: it discloses the sandboxed execution model, the exact CDN allowlist, that no other network access exists, and the window.genui.send feedback channel. It does not cover failure behavior (e.g., what happens on a disallowed script source) or how height/overflow is handled at render time, leaving a small gap.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The fallback constraint is front-loaded in caps, followed by purpose, then constraints, then the messaging hook. It is dense but every clause adds operational information, and nothing is redundant filler.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a no-annotation, no-output-schema rendering tool this is nearly complete: purpose, precedence, network policy, and the return channel to Claude are all covered. Only edge-case behavior (render failures, height overflow) is absent, which is minor.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 67%, with both described parameters already documented. The description adds genuine meaning beyond the schema by clarifying that the html field accepts 'a body fragment or full document', which is a real decision point for the caller; title and height are left to the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states a specific verb and resource ('Renders a free-form interactive HTML/CSS/JS interface inline in a sandbox') and enumerates concrete use cases (diagrams, simulations, mini apps, SVG/Canvas/D3/three.js). It also explicitly distinguishes itself from both siblings by name, so an agent can route without opening any schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It leads with an explicit precedence rule: 'FALLBACK ONLY — use render_chart for data and render_card for structured info first.' The condition that selects the alternatives is named, and the condition that selects this tool (free-form interactive content) is spelled out.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server

Other Tools