OpenUI Replicates ChatGPT's Intelligent UI on Any Model with 53% Token Savings

Problem: Text Walls vs. Interactive UI

Most AI users do not want a black-screen terminal; they want to see and click things to make quick decisions. ChatGPT's Intelligent UI solves this by returning interactive maps, photos, and selectable routes instead of text walls, but it is locked inside ChatGPT's own product. Developers building their own agents still rely on plain text replies.

Generative UI: Components Over Code

Generative UI means the AI decides what the answer should look like, and the screen builds itself around that answer. The model does not write raw webpage code; instead it selects from a predefined component library (cards, charts, maps, buttons) and arranges them. OpenUI renders those components to the screen, keeping the interface style consistent with the product and preventing the model from breaking out of the component sandbox.

OpenUI Lang: Token-Efficient, Streaming, Controllable

The model outputs a compact format called OpenUI Lang, designed specifically for streaming UI generation. Its three core advantages:

Token savings. Across seven UI scenarios, OpenUI Lang uses 52.8% fewer tokens than Vercel's JSON-Render and 51.7% fewer than Thesys C1 JSON. In the contact-form scenario the gap is largest: 294 tokens vs. 893 (Vercel, -67.1%) and 849 (C1, -65.4%). The dashboard scenario shows the smallest gap: 1,226 tokens vs. 2,247 and 2,261 (reductions of 45.4% and 45.8%). Total tokens across all scenarios: 4,800 vs. 10,180 and 9,948.

True streaming. Tokens are rendered as they arrive; no need to wait for a complete JSON closure.

Controllable output. Output is constrained to registered components with Zod schema validation, so the model cannot go outside the allowed component set.

Five-Step Workflow

Define or reuse a component library

Generate system prompt from the component library

Send the prompt to the model

Model streams OpenUI Lang

Renderer progressively renders the UI

Quick Start with One Command

Requires Node.js 24, pnpm, and an OpenRouter key (one key accesses almost all mainstream models). Run:

pnpx @openuidev/cli@latest create --example open-intelligent-ui

Edit .env with OpenRouter base URL, key, and model ID (e.g., anthropic/claude-opus-5.5). Then run npm run dev and open localhost:3000.

Key Insight: Rendering Layer Does the Heavy Lifting

The model only outputs a component schema; the application handles rendering. Any model that can return JSON works. This explains OpenUI's multi-framework support (React, Vue, Svelte, Angular), A2UI protocol (Google's Agent-to-User Interface), and LangChain/LangGraph integration.

Comparison with Alternatives

Compared to Vercel's json-render, Google's A2UI, and CopilotKit OpenGenUI, OpenUI uses a 1x token baseline (others 3-4x), achieves 4.9s latency at 60 tok/s (others 14-20s), supports full streaming, guarantees output consistency, provides a built-in component library plus custom components, works across web, mobile, and email, includes built-in data fetching, and includes a built-in chat UI.

Try It Online

Visit https://openui.com/compare to test in the browser. GitHub: https://github.com/thesysdev/openui