HyperGen

HyperGen is an open protocol that enables AI agents to generate interactive user interfaces by streaming HTML fragments with HTMX attributes over Server-Sent Events (SSE) into sandboxed iframes.

Unlike existing Generative UI approaches that require JSON schemas, component catalogs, or framework-specific SDKs, HyperGen uses HTML itself as the protocol. Any system that can output an HTML string -- whether a large language model, a rule-based engine, or a database query -- can produce interactive UI through HyperGen.

Core Principles

• HTML is the protocol -- No intermediate JSON. No component catalogs. Agents output HTML with HTMX attributes, and it renders as interactive UI.
• Truly agent-agnostic -- Any system that can produce an HTML string can participate. Claude, GPT, Ollama, a shell script -- no SDK required.
• Streaming-first -- SSE + HTMX fragment swapping delivers real-time progressive rendering. Users see UI as it is generated.
• Copy, don't install -- Reference implementations follow the code ownership model. Copy two files into your project and own them. No npm install.

Architecture

Host Application
  └─ Sandboxed <iframe>
       ├─ HTMX (14KB CDN) — hx-get, hx-post, hx-swap, hx-target, etc.
       ├─ SSE Extension — sse-connect, sse-swap for streaming
       ├─ Agent-generated HTML + CSS (--hg-* vars) + inline JS
       └─ postMessage bridge → Host (theme, resize, navigate, data)

Agent Server (any language, any framework)
  └─ SSE endpoint streaming HTML fragments
  └─ POST endpoints receiving user actions from HTMX

Guides

Step-by-step guides for building with HyperGen:

• Getting Started -- Run your first HyperGen app in 5 minutes
• Server Setup -- Bootstrap documents, SSE streaming, framework examples
• Client Setup -- Iframe mounting, React/Vue/Svelte integration, lifecycle management
• Theming -- CSS variables, light/dark themes, dynamic switching
• Agent Integration -- Connect Claude, OpenAI, Ollama, or custom agents

Specification

The formal protocol specification defines the contracts between host, iframe, and agent server:

• Specification -- Protocol layers, message formats, and conformance requirements

Architecture Decision Records

The ADRs capture the "why" behind HyperGen's design decisions:

• ADR-001: Project Concept -- Why HyperGen exists
• ADR-002: Scope and Deliverables -- What HyperGen is (and is not)
• ADR-003: HTMX Technology Selection -- Why HTMX over custom JS
• ADR-004: Security Model -- Sandboxed iframe architecture
• ADR-005: Zero Custom Attributes -- Standard HTMX only