openui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

OpenUI — The Open Standard for Generative UI

OpenUI — 生成式UI的开源标准

OpenUI is a full-stack Generative UI framework by Thesys. At its center is OpenUI Lang: a compact, line-oriented language designed for LLMs to generate user interfaces, up to 67% more token-efficient than JSON-based alternatives.

Instead of treating LLM output as only text/markdown, OpenUI lets you define a component library, auto-generate a system prompt from it, and render structured UI progressively as the model streams.

OpenUI是由Thesys开发的全栈生成式UI框架。其核心是OpenUI Lang：一种紧凑的、面向行的语言，专为大语言模型（LLM）生成用户界面而设计，相比基于JSON的替代方案，令牌效率最高可提升67%。

不同于将LLM输出仅视为文本/Markdown，OpenUI允许你定义组件库，从中自动生成系统提示词，并随着模型流式输出逐步渲染结构化UI。

Core Architecture

核心架构

OpenUI has four building blocks that form a pipeline:

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.
Prompt Generator —
```
library.prompt()
```
converts the library into a system prompt with syntax rules, component signatures, and streaming guidelines.
Parser — Parses OpenUI Lang line-by-line (streaming-compatible) into a typed element tree. Validates against the library's JSON Schema.
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包含四个构成流水线的核心模块：

组件库（Library） — 通过
```
defineComponent
```
结合Zod模式与React渲染器定义组件。这是应用与AI之间的契约：它约束了LLM可生成的内容范围。
提示词生成器（Prompt Generator） —
```
library.prompt()
```
将组件库转换为包含语法规则、组件签名和流式输出指南的系统提示词。
解析器（Parser） — 逐行解析OpenUI Lang（支持流式处理）为类型化元素树，并根据组件库的JSON Schema进行验证。
渲染器（Renderer） —
```
<Renderer />
```
React组件将解析后的元素映射到你的React组件，随着流式内容到达逐步渲染。

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

OpenUI Lang Overview

OpenUI Lang 概述

OpenUI Lang is a compact, declarative, line-oriented DSL. The LLM generates this instead of JSON or markdown.

OpenUI Lang是一种紧凑的、声明式的、面向行的领域特定语言（DSL）。LLM将生成该语言代码，而非JSON或Markdown。

Syntax Rules (Critical)

语法规则（重点）

One statement per line:
```
identifier = Expression
```
Root entry point: The first statement MUST assign to the identifier
```
root
```
.
Top-down generation: Write Layout → Components → Data for best streaming performance.
Positional arguments: Arguments map to component props by position, determined by key order in the Zod schema.
Forward references (hoisting): An identifier can be referenced before it's defined — the renderer shows a skeleton/placeholder until the definition arrives.

Example:

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")

每行一条语句：
```
标识符 = 表达式
```
根入口点：第一条语句必须赋值给标识符
```
root
```
。
自上而下生成：按照布局→组件→数据的顺序编写，以获得最佳流式性能。
位置参数：参数根据Zod模式中的键顺序按位置映射到组件属性。
前向引用（提升）：标识符可以在定义前被引用——渲染器会在定义到达前显示骨架/占位符。

示例：

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

文档

For comprehensive reference, fetch the full documentation:

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

For a topic index (page titles and descriptions only):

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

When you need detail on a specific topic, fetch the relevant page:

Topic	URL
Quickstart & scaffolding	https://www.openui.com/docs/openui-lang/quickstart
Defining components	https://www.openui.com/docs/openui-lang/defining-components
System prompts	https://www.openui.com/docs/openui-lang/system-prompts
Renderer	https://www.openui.com/docs/openui-lang/renderer
Language specification	https://www.openui.com/docs/openui-lang/specification
Interactivity	https://www.openui.com/docs/openui-lang/interactivity
Built-in component library	https://www.openui.com/docs/openui-lang/standard-library

如需完整参考资料，请获取完整文档：

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

如需主题索引（仅包含页面标题和描述）：

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

如需特定主题的详细内容，请访问对应页面：

主题	URL
快速入门与脚手架搭建	https://www.openui.com/docs/openui-lang/quickstart
定义组件	https://www.openui.com/docs/openui-lang/defining-components
系统提示词	https://www.openui.com/docs/openui-lang/system-prompts
Renderer	https://www.openui.com/docs/openui-lang/renderer
语言规范	https://www.openui.com/docs/openui-lang/specification
交互性	https://www.openui.com/docs/openui-lang/interactivity
内置组件库	https://www.openui.com/docs/openui-lang/standard-library

SDK Packages

SDK 包

Package	Purpose	When to use
`@openuidev/react-lang`	Core: defineComponent, createLibrary, Renderer, parser	Every OpenUI project
`@openuidev/react-headless`	Chat state: ChatProvider, hooks, streaming adapters (OpenAI, AG-UI)	Custom chat UI
`@openuidev/react-ui`	Prebuilt layouts (Copilot, FullScreen, BottomTray) + built-in libraries	Fast path to working chat

包名称	用途	适用场景
`@openuidev/react-lang`	核心功能：defineComponent、createLibrary、Renderer、解析器	所有OpenUI项目
`@openuidev/react-headless`	聊天状态管理：ChatProvider、钩子、流式适配器（OpenAI、AG-UI）	自定义聊天UI
`@openuidev/react-ui`	预构建布局（Copilot、FullScreen、BottomTray）+ 内置组件库	快速搭建可用聊天应用

Scaffolding

脚手架搭建

bash

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

bash

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

框架集成

OpenUI works with any LLM framework. The scaffolded app uses Next.js with the OpenAI SDK. Integration patterns exist for: Vercel AI SDK, LangChain, CrewAI, OpenAI Agents SDK, Anthropic Agents SDK, Google ADK, and any framework that produces a text stream.

The core integration point is always the same: send the system prompt (from

library.prompt()

) to your LLM, then feed the streamed text into

<Renderer />

OpenUI可与任何LLM框架配合使用。脚手架生成的应用使用Next.js和OpenAI SDK。现有集成模式适用于：Vercel AI SDK、LangChain、CrewAI、OpenAI Agents SDK、Anthropic Agents SDK、Google ADK，以及任何可生成文本流的框架。

核心集成方式始终一致：将系统提示词（来自

library.prompt()

）发送给你的LLM，然后将流式文本输入到

<Renderer />

中。