OpenUI — The Open Standard for Generative UI

Core Architecture

1. Library — Components defined with Zod schemas + React renderers via

   defineComponent

   . This is the contract between app and AI: it constrains what the LLM can generate.
2. Prompt Generator —

   library.prompt()

   converts the library into a system prompt with syntax rules, component signatures, and streaming guidelines.
3. Parser — Parses OpenUI Lang line-by-line (streaming-compatible) into a typed element tree. Validates against the library's JSON Schema.
4. Renderer — The

   <Renderer />

   React component maps parsed elements to your React components, rendering progressively as the stream arrives.

Component Library → System Prompt → LLM → OpenUI Lang Stream → Parser → Renderer → Live UI

OpenUI Lang Overview

Syntax Rules (Critical)

1. One statement per line:

   identifier = Expression

2. Root entry point: The first statement MUST assign to the identifier

   root

   .
3. Top-down generation: Write Layout → Components → Data for best streaming performance.
4. Positional arguments: Arguments map to component props by position, determined by key order in the Zod schema.
5. Forward references (hoisting): An identifier can be referenced before it's defined — the renderer shows a skeleton/placeholder until the definition arrives.

root = Stack([header, stats])
header = TextContent("Q4 Dashboard", "large-heavy")
stats = Grid([s1, s2])
s1 = StatCard("Revenue", "$1.2M", "up")
s2 = StatCard("Users", "450k", "flat")

Documentation

https://www.openui.com/llms-full.txt

https://www.openui.com/llms.txt

SDK Packages

@openuidev/react-lang

@openuidev/react-headless

@openuidev/react-ui

Scaffolding

npx @openuidev/cli@latest create --name my-genui-app
cd my-genui-app
echo "OPENAI_API_KEY=sk-your-key-here" > .env
npm run dev

Framework Integration

library.prompt()

<Renderer />