オープンプロトコル · MIT License · 依存関係ゼロ

Generative UI
SDKなしで

HyperGenは、AIエージェントがHTMX属性付きのインタラクティブなHTMLを SSE経由でサンドボックス化されたiframeにストリーミングするオープンプロトコルです。 JSONスキーマ不要。コンポーネントカタログ不要。フレームワークロックイン不要。

はじめる仕様を読む

ホストアプリケーション
  └─ サンドボックス化された <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 (ストリーミング)
       ├─ エージェント HTML + CSS   → --hg-* 変数によるテーマ適用
       └─ postMessage ブリッジ → ホスト (テーマ, リサイズ, ナビゲーション)

エージェントサーバー (任意の言語、任意のフレームワーク)
  └─ SSE エンドポイント   → HTMLフラグメントをストリーミング
  └─ POST エンドポイント  → HTMXからのユーザーアクションを受信

HTMLがプロトコル

エージェントはHTMX属性付きのHTMLを出力します。JSON変換レイヤーもコンポーネントカタログも不要。Webのネイティブフォーマットがそのままプロトコルです。

真のエージェント非依存

Claude、GPT、Ollama、シェルスクリプト — HTMLを出力できるものなら何でも動きます。統合ライブラリゼロ。ベンダー依存ゼロ。

ストリーミングファースト

SSEがHTMLフラグメントを段階的に配信。HTMXがそれをDOMにスワップ。ユーザーはリアルタイムでUIが構築される様子を目にします。

デフォルトで安全

生成されたUIはサンドボックス化されたiframeで実行。ホストのDOM、Cookie、ストレージへのアクセスなし。postMessageで許可したものだけをブリッジ。

インストールではなくコピー

TypeScriptファイル2つ、依存関係ゼロ。プロジェクトにコピーするだけ。パッケージ依存ではなく、コードの所有権。

カスタム属性ゼロ

標準HTMX + 公式SSE拡張。新しく学ぶことはありません。HTMXを知っていれば、HyperGenはもう使えます。

サーバー全体を15行で

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>';
  })
));

HyperGenの比較

	HyperGen	AG-UI	A2UI	MCP Apps
UIフォーマット	生HTML	イベント	JSONスキーマ	HTML (iframe)
ストリーミング	SSE + HTMX	SSE	トランスポート依存	なし
インタラクティビティ	HTMX属性	フレームワーク	カタログ	JavaScript
依存関係	0	RxJS, Zod…	レンダラー	MCP SDK
ロックイン	なし	CopilotKit	Google ADK	MCP

エージェントUIを出荷する準備はできましたか?

ファイルを2つコピーして、HTMLをストリーミング。それだけです。

5分ではじめる

Generative UISDKなしで