MinUiRuntime

AI JSON → Runtime → HTML
Deterministic UI, rendered from AI.
MinUiRuntime turns structured AI output into stable, server-rendered HTML using a strict execution engine.
AI suggests. The runtime decides.

A runtime establishes clear boundaries between AI output and what actually renders. Instead of treating AI-generated code as trusted input, MinUiRuntime executes structured instructions in a controlled environment. This separation means rendering behavior is predictable, testable, and independent of how the AI model evolves.

Security is enforced by design. Because it's WASM, the runtime sandboxes execution, validates every instruction before processing, and prevents unauthorized DOM access or script injection. AI models can suggest UI structure, but they cannot execute arbitrary code or bypass rendering constraints. This architectural decision eliminates entire classes of vulnerabilities common in systems that directly interpret AI output.

The practical result is stable infrastructure. Rendering logic stays deterministic across deployments. Debugging becomes straightforward because execution traces are consistent. Server-side rendering works reliably because the runtime guarantees the same HTML output for the same input. When AI models update or change behavior, the runtime continues enforcing the same rules.

Try it out

See Demo

Inspect the Code

MinUiRuntime is open source. Review the implementation, contribute, or fork it.

View on GitHub

Installation

Available on npm: @minuiruntime/minui_rt

npm install @minuiruntime/minui_rt

📥 Importing the Runtime

import init, { MinUiRuntime } from "@minuiruntime/minui_rt";

🖼️ Basic Usage — Render JSON → HTML

import init, { MinUiRuntime } from "@minuiruntime/minui_rt";

// Initialize WASM first (required before using the runtime)
await init("/assets/wasm/minui_rt_bg.wasm");
// OR just: await init(); for auto-loading from default path

// This can also be a pure string from the LLM
const jsonString = JSON.stringify({
  version: "1.0",
  type: "element",
  tag: "div",
  attrs: { class: "message" },
  children: [
    { type: "text", value: "Hello from MinUI Runtime!" }
  ]
});

// Render directly — returns Frame object
const frame = MinUiRuntime.render(jsonString);

console.log(frame.html);
// → <div class="message">Hello from MinUI Runtime!</div>

🌊 Streaming Usage — Incremental Updates

For AI-powered applications that stream JSON chunks incrementally:

import init, { MinUiRuntime } from "@minuiruntime/minui_rt";

// Initialize WASM first (required before using the runtime)
await init("/assets/wasm/minui_rt_bg.wasm");

console.log("Creating streaming session...");

// Create a streaming session with options
const session = MinUiRuntime.createStreamingSession({ mode: "auto" });

// Update session with chunks as they arrive
const chunk = '{"type":"element","tag":"div","children":[{"type":"text","value":"Hello"}]}';
const frame = session.update(chunk);

// Log frame fields to inspect the response
console.log("Frame fields:", {
  html: frame.html,
  patchesApplied: frame.patchesApplied,
  diagnostics: frame.diagnostics
});

// Access the rendered HTML
console.log(frame.html);
// → <div>Hello</div>

// Access diagnostics
const delta = frame.diagnostics?.patchCountDelta ?? 0;
console.log(`Applied ${delta} patches in this update`);

// Continue updating as more chunks arrive
const chunk2 = '{"type":"element","tag":"div","children":[{"type":"text","value":"Hello, World!"}]}';
const frame2 = session.update(chunk2);
console.log(frame2.html);
// → <div>Hello, World!</div>

// Get current HTML at any time
const currentHtml = session.html();

Options

  • mode (optional): "auto" (default), "json", or "ai"
    • "auto": Automatically detects JSON vs AI-generated text
    • "json": Strict JSON mode (must conform to schema)
    • "ai": AI-generated text mode (more lenient parsing)
  • debug (optional): boolean (default: false)
    • Enable debug logging to console

For more details, visit the npm package page.