Introduction

OpenUI Lang is an open, compact language for describing interfaces with components your application controls. Models generate it efficiently, renderers can display it progressively, and applications can use it with any model provider, agent framework, or chat library.

Architecture at a Glance

1. System prompt includes OpenUI Lang spec: Your backend adds the prompt generated from your component library to your system prompt. It tells the LLM to respond in OpenUI Lang instead of plain text or JSON.

2. LLM generates OpenUI Lang: Instead of returning markdown, the model outputs a compact, line-oriented syntax (e.g., root = Stack([chart])) constrained to your component library.

3. Streaming render: On the client, the <Renderer /> component parses each line as it arrives and maps it to your React components. Structure renders first, then data fills in.

The result is a native UI dynamically composed by the AI, streamed efficiently, and rendered safely from your own components. For data-driven apps with live tools and reactive state, see Architecture.

OpenUI Lang

OpenUI Lang is a compact, line-oriented language designed specifically for Large Language Models (LLMs) to generate user interfaces. It uses fewer tokens than JSON and streams line by line. For the complete syntax reference, see the Language Specification.

Why a New Language?

While JSON is a common data interchange format, it has significant drawbacks when streamed directly from an LLM for UI generation. And there are multiple implementations around it, like Vercel JSON-Render and A2UI.

OpenUI Lang was created to solve these core issues:

• Token Efficiency: JSON repeats keys like "component", "props", and "children" for every element. Each repeated key costs tokens, which adds cost and latency. OpenUI Lang uses positional arguments instead. In our benchmarks it uses up to 67% fewer tokens than JSON.

• Streaming-First Design: The language is line-oriented (identifier = Expression). The renderer can show each line as it arrives from the model. With JSON, the UI often waits until the object is complete enough to parse.

• Robustness: LLMs can invent component names or produce invalid structures. The parser validates the output, drops the invalid parts, and the renderer shows the rest.

What can you build?

Want to try it? Open the Demos or follow the Quick Start.