Generative UI
without the SDK
HyperGen is an open protocol where AI agents stream interactive HTML with HTMX attributes via SSE into sandboxed iframes. No JSON schemas. No component catalogs. No framework lock-in.
Host Application
└─ Sandboxed <iframe sandbox="allow-scripts allow-same-origin allow-forms">
├─ HTMX (14KB) → hx-get, hx-post, hx-swap, hx-target
├─ SSE Extension → sse-connect, sse-swap (streaming)
├─ Agent HTML + CSS → --hg-* variables for theming
└─ postMessage bridge → Host (theme, resize, navigate)
Agent Server (any language, any framework)
└─ SSE endpoint → streams HTML fragments
└─ POST endpoint → receives user actions from HTMXHTML is the Protocol
Agents output HTML with HTMX attributes. No JSON translation layer, no component catalog. The web's native format is the protocol.
Truly Agent-Agnostic
Claude, GPT, Ollama, a shell script — anything that outputs HTML works. Zero integration libraries. Zero vendor coupling.
Streaming-First
SSE delivers HTML fragments progressively. HTMX swaps them into the DOM as they arrive. Users see UI building in real-time.
Secure by Default
Generated UI runs in a sandboxed iframe. No access to host DOM, cookies, or storage. postMessage bridges only what you allow.
Copy, Don't Install
Two TypeScript files, zero dependencies. Copy them into your project — they're yours. Code ownership, not package dependency.
Zero Custom Attributes
Standard HTMX + official SSE extension. Nothing new to learn. If you know HTMX, you already know HyperGen.
The Entire Server in 15 Lines
import { bootstrapHtml, createSSEStream, HyperGenResponse }
from "./hypergen-server";
// Serve the iframe bootstrap
app.get("/bootstrap", () => new Response(
bootstrapHtml({ sseEndpoint: "/api/stream" }),
{ headers: { "Content-Type": "text/html" } }
));
// Stream HTML from your agent
app.get("/api/stream", () => HyperGenResponse(
createSSEStream(async function* () {
yield '<h2>Hello from the agent!</h2>';
yield '<button hx-post="/api/action"
hx-swap="outerHTML">Click me</button>';
})
));How HyperGen Compares
| HyperGen | AG-UI | A2UI | MCP Apps | |
|---|---|---|---|---|
| UI Format | Raw HTML | Events | JSON Schema | HTML (iframe) |
| Streaming | SSE + HTMX | SSE | Transport-dep. | None |
| Interactivity | HTMX attrs | Framework | Catalog | JavaScript |
| Dependencies | 0 | RxJS, Zod… | Renderers | MCP SDK |
| Lock-in | None | CopilotKit | Google ADK | MCP |
Ready to ship agent UI?
Copy two files. Stream HTML. That's it.
Get Started in 5 Minutes