DESIGN:OS · Runtime · DESIGN:OS Generative UI
Stream-first interactive visual runtime for AI agents — 60fps morphdom, WebGL, and zero-flicker DOM reconciliation.
Open-source generative UI runtime and guidelines for Claude Artifacts, ChatGPT Canvas, and Gemini: streaming HTML sanitizer, morphdom diffing, Chart.js, KaTeX, Mermaid, and Three.js.
DESIGN:OS Generative UI in operation: deterministic execution with verified output contracts.
production build · verifiedWhat it is
- Repository
- jangtrinh/
design-os-generative-ui - Requires
- Standard ToolchainZero native dependencies
- Interface
- CLI & Library APIDeterministic output
- Telemetry
- Zero TrackingNo phone-home
- Environment
- Local-FirstWorks completely offline
- License
- MIT
Why DESIGN:OS Generative UI, compared with alternatives
What this project does that alternative approaches do not, or do differently. Our advantages first, followed by the honest trade-offs.
Sub-50ms System 1 routing & 60fps morphdom
Powered by createStreamRenderer and DesignOSComposer: 6.53ms P50 local Apple Silicon decision latency and zero-flicker DOM reconciliation.
Zod-guarded Catalog & streaming sanitizer
100% type-safe component registry (defaultCatalog) with DesignOSRenderer and streaming HTML sanitizer—zero XSS or hallucinated tags.
Bidirectional DesignOSBridge & HITL actions
Interactive widgets dispatch typed action contracts (listenDesignOSActions) with blast-radius metadata back to Claude, ChatGPT, and Gemini agents.
Rich visual engines (WebGL, Chart.js, KaTeX, Mermaid)
First-class support for Three.js WebGL canvases, SVG charts, mathematical typesetting, and diagrams under strict Stark Zinc tokens.
Where unconstrained LLM code generators win, and it is not close: Tools like v0.dev and Bolt.new generate arbitrary one-off marketing pages and full-stack Next.js repositories from scratch. Choose DESIGN:OS Generative UI when you need sub-50ms deterministic runtime widgets, zero-flicker morphdom streaming, and strict schema safety.
Install once
Install the package via pnpm or npm to embed DesignOSComposer, DesignOSRenderer, createStreamRenderer, and DesignOSBridge in your app.
pnpm add github:jangtrinh/design-os-generative-ui
# or via npm:
npm install github:jangtrinh/design-os-generative-uiFirst safe use
- Run the 15-test Agentic Era verification suite (Local-Only, Action Contracts, Swarm Mission Control).
npx tsx tests/test-agentic-upgrade.ts - Execute the 10-case multi-domain latency and schema benchmark.
npx tsx tests/demo-10-cases.ts - Launch the live 60fps interactive playground at
http://localhost:3300.npm run dev:playground
Examine the structured output before executing live actions. Verified outputs guarantee state integrity.
A practical loop
DesignOSComposer
Routes natural-language intents through the local Laya-MLX edge (~6.5ms) or cloud cascade into a Zod-validated UISpec.
createStreamRenderer
Sanitizes partial HTML/SVG chunks and applies 60fps morphdom DOM reconciliation without remounting WebGL or canvas state.
DesignOSRenderer
Mounts Stark Zinc catalog components (metric_card, trend_chart, kanban_board, swarm_mission_control) with live SWR data hydration.
DesignOSBridge
Streams bidirectional HITL action events (listenDesignOSActions) with blast-radius guards back to the host AI agent.
Frequently asked questions
What is DESIGN:OS Generative UI?
DESIGN:OS Generative UI is an open-source tool designed for developers and engineering teams. Open-source generative UI runtime and guidelines for Claude Artifacts, ChatGPT Canvas, and Gemini: streaming HTML sanitizer, morphdom diffing, Chart.js, KaTeX, Mermaid, and Three.js.
How is DESIGN:OS Generative UI installed?
Clone the repository from GitHub and follow the Quickstart instructions, or install via your preferred package manager if distributed.
How does it compare with alternatives?
DESIGN:OS Generative UI prioritizes zero-dependency execution, deterministic results, and local privacy over bloated closed-source platforms.
Does it send telemetry or require cloud services?
No. DESIGN:OS Generative UI operates strictly on your local machine. No external tracking, no cloud lock-in, no telemetry.
What license is DESIGN:OS Generative UI released under?
DESIGN:OS Generative UI is licensed under the permissive MIT license, allowing free commercial and personal use.
Ecosystem & Related Projects
Explore complementary developer tools and companion repositories designed to work together.