HyperGen

HyperGenは、AIエージェントがHTMX属性付きのHTMLフラグメントをServer-Sent Events (SSE) 経由でサンドボックス化されたiframeにストリーミングすることで、インタラクティブなユーザーインターフェースを生成できるオープンプロトコルです。

JSONスキーマやコンポーネントカタログ、フレームワーク固有のSDKを必要とする既存のGenerative UIアプローチとは異なり、HyperGenはHTML自体をプロトコルとして使用します。HTML文字列を出力できるシステムであれば — 大規模言語モデル、ルールベースエンジン、データベースクエリなど — HyperGenを通じてインタラクティブなUIを生成できます。

基本原則

• HTMLがプロトコル — 中間JSONなし。コンポーネントカタログなし。エージェントはHTMX属性付きのHTMLを出力し、それがインタラクティブなUIとしてレンダリングされます。
• 真のエージェント非依存 — HTML文字列を生成できるシステムなら何でも参加可能。Claude、GPT、Ollama、シェルスクリプト — SDKは不要です。
• ストリーミングファースト — SSE + HTMXフラグメントスワッピングにより、リアルタイムのプログレッシブレンダリングを実現。ユーザーは生成中のUIを即座に確認できます。
• インストールではなくコピー — リファレンス実装はコードオーナーシップモデルに従います。2つのファイルをプロジェクトにコピーして、自分のものにしてください。npm installは不要です。

アーキテクチャ

ホストアプリケーション
  └─ サンドボックス化された <iframe>
       ├─ HTMX (14KB CDN) — hx-get, hx-post, hx-swap, hx-target など
       ├─ SSE Extension — sse-connect, sse-swap によるストリーミング
       ├─ エージェント生成HTML + CSS (--hg-* 変数) + インラインJS
       └─ postMessage ブリッジ → ホスト (テーマ, リサイズ, ナビゲーション, データ)

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

ガイド

HyperGenで構築するためのステップバイステップガイド:

• はじめに — 5分でHyperGenアプリを実行
• サーバーセットアップ — ブートストラップドキュメント、SSEストリーミング、フレームワーク例
• クライアントセットアップ — iframeマウント、React/Vue/Svelte統合、ライフサイクル管理
• テーマ設定 — CSS変数、ライト/ダークテーマ、動的切り替え
• エージェント統合 — Claude、OpenAI、Ollama、カスタムエージェントの接続

仕様

正式なプロトコル仕様は、ホスト、iframe、エージェントサーバー間の契約を定義します:

• 仕様 — プロトコルレイヤー、メッセージフォーマット、適合要件

アーキテクチャ決定記録

ADRはHyperGenの設計判断の「なぜ」を記録しています:

• ADR-001: プロジェクトコンセプト — HyperGenが存在する理由
• ADR-002: スコープと成果物 — HyperGenとは何か（そして何でないか）
• ADR-003: HTMX技術選定 — カスタムJSではなくHTMXを選んだ理由
• ADR-004: セキュリティモデル — サンドボックス化されたiframeアーキテクチャ
• ADR-005: カスタム属性ゼロ — 標準HTMXのみ