Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,4 @@ clean-install.sh
lint-fix.sh

draft/
.venv/
32 changes: 32 additions & 0 deletions translations/zh-CN/.co-op-translator.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"CODE_OF_CONDUCT.md": {
"original_hash": "fb4c91192caf84a289053f1cc62c6956",
"translation_date": "2026-04-11T02:52:22+00:00",
"source_file": "CODE_OF_CONDUCT.md",
"language_code": "zh-CN"
},
"CONTRIBUTING.md": {
"original_hash": "81f7f10d015181a5f40d1b46d727a89a",
"translation_date": "2026-04-11T02:53:05+00:00",
"source_file": "CONTRIBUTING.md",
"language_code": "zh-CN"
},
"README.md": {
"original_hash": "f5ba2133cbf2decfe0e443996142747f",
"translation_date": "2026-04-11T02:52:57+00:00",
"source_file": "README.md",
"language_code": "zh-CN"
},
"SECURITY.md": {
"original_hash": "a20186b934f5abceb678bba91868aa7a",
"translation_date": "2026-04-11T02:53:13+00:00",
"source_file": "SECURITY.md",
"language_code": "zh-CN"
},
"benchmarks/README.md": {
"original_hash": "69af6ec2b537d3b78c7f3f638b9aa1b6",
"translation_date": "2026-04-11T02:53:50+00:00",
"source_file": "benchmarks/README.md",
"language_code": "zh-CN"
}
}
99 changes: 99 additions & 0 deletions translations/zh-CN/CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
# Contributor Covenant 行为准则

## 我们的承诺

作为成员、贡献者和社区领导者,我们承诺让每个人都能在社区中获得免受骚扰的参与体验,不因年龄、体型、可见或不可见的残障、族裔、性特征、性别认同与表达、经验水平、教育程度、社会经济地位、国籍、个人外貌、种族、种姓、肤色、宗教或性认同与性取向而受到区别对待。

我们承诺以开放、友善、多元、包容且健康的方式行动与互动,共同建设社区。

## 我们的准则

有助于为社区营造积极环境的行为包括:

* 对他人展现同理心与善意
* 尊重不同的意见、观点和经历
* 提供建设性反馈,并以得体的态度接受反馈
* 对自己的错误承担责任,向受影响的人致歉,并从中吸取经验教训
* 关注什么对整个社区最有益,而不只是对我们个人有利

不可接受的行为包括:

* 使用带有性暗示的语言或图像,以及任何形式的性关注或性挑逗
* 挑衅、侮辱性或贬损性评论,以及人身或政治攻击
* 公开或私下骚扰
* 未经明确许可,发布他人的私人信息,例如住址或电子邮箱地址
* 其他在专业场合中可被合理认为不恰当的行为

## 执行责任

社区领导者有责任说明并执行我们关于可接受行为的标准,并将对任何他们认定为不当、具有威胁性、冒犯性或有害的行为采取适当且公正的纠正措施。

社区领导者有权利也有责任删除、编辑或拒绝与本行为准则不一致的评论、提交、代码、wiki 编辑、议题及其他贡献,并会在适当情况下说明管理决定的原因。

## 适用范围

本行为准则适用于所有社区空间,也适用于个人在公共场合正式代表社区时的行为。
代表社区的例子包括:使用官方电子邮箱地址、通过官方社交媒体账号发布内容,或在网络或线下活动中担任指定代表。

## 执行

辱骂、骚扰或其他不可接受行为的事件,可通过
[INSERT CONTACT METHOD]
向负责执行的社区领导者报告。
所有投诉都会被及时且公正地审查和调查。

所有社区领导者都有义务尊重事件举报人的隐私与安全。

## 执行指南

社区领导者将在判断违反本行为准则的后果时,参考以下社区影响指南:

### 1. 纠正

<strong>社区影响</strong>:在社区中使用不当语言,或其他被认为不专业或不受欢迎的行为。

<strong>后果</strong>:社区领导者将以私下书面警告的形式,明确说明违规性质,并解释为何该行为不当。也可能要求公开道歉。

### 2. 警告

<strong>社区影响</strong>:单次事件或一系列行为构成的违规。

<strong>后果</strong>:发出警告,并说明若持续该行为将面临的后果。在规定时间内,不得与相关人员发生任何互动,包括主动与执行本行为准则的人接触。这也包括避免在社区空间以及社交媒体等外部渠道中的互动。违反这些要求可能导致临时或永久封禁。

### 3. 临时封禁

<strong>社区影响</strong>:严重违反社区准则,包括持续的不当行为。

<strong>后果</strong>:在规定时间内,暂时禁止与社区进行任何形式的互动或公开交流。在此期间,不得与相关人员进行任何公开或私下互动,包括主动与执行本行为准则的人接触。违反这些要求可能导致永久封禁。

### 4. 永久封禁

<strong>社区影响</strong>:表现出持续违反社区准则的模式,包括持续的不当行为、对个人的骚扰,或对特定群体表现出攻击性或贬低行为。

<strong>后果</strong>:永久禁止在社区内进行任何形式的公开互动。

## 署名

本行为准则改编自 [Contributor Covenant][homepage] 2.1 版,原文见
[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]。

社区影响指南的灵感来自
[Mozilla's code of conduct enforcement ladder][Mozilla CoC]。

如需了解关于本行为准则的常见问题,请参阅
[https://www.contributor-covenant.org/faq][FAQ]。
各语言译本见
[https://www.contributor-covenant.org/translations][translations]。

[homepage]: https://www.contributor-covenant.org
[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
[Mozilla CoC]: https://github.com/mozilla/diversity
[FAQ]: https://www.contributor-covenant.org/faq
[translations]: https://www.contributor-covenant.org/translations

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**:
本文档使用 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。尽管我们力求准确,但请注意,自动翻译可能包含错误或不准确之处。应将原始语言版本的原始文档视为权威来源。对于关键信息,建议使用专业人工翻译。对于因使用此翻译而引起的任何误解或误释,我们概不负责。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
32 changes: 32 additions & 0 deletions translations/zh-CN/CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# 贡献指南

感谢你考虑为 _openui_ 做出贡献!本文档提供了参与贡献的相关指引。

## 如何贡献

1. Fork 此仓库。
2. 创建一个新分支(`git checkout -b feature/amazing-feature`)并进行你的修改。
3. 确保你的代码符合我们的风格指南。
4. 如有需要,更新 README.md 并自动生成文档。
5. 提交一个 Pull Request

## Bug 报告

请使用 Github Issues 来报告 Bug。提交 Bug 报告时,请包含以下内容:

- 对问题的清晰描述
- 复现步骤
- 预期行为与实际行为
- 你的环境详情

## 有问题?

我们很乐意提供帮助!如果你有任何问题或疑虑,欢迎随时提交 issue。
你也可以加入我们的 [Discord](https://discord.gg/Pbv5PsqUSv) 与团队交流。

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**:
本文件已使用 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。尽管我们力求准确,但请注意,自动翻译可能包含错误或不准确之处。应以该文档原始语言版本为权威来源。对于关键信息,建议采用专业人工翻译。对于因使用本翻译而产生的任何误解或曲解,我们概不负责。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
188 changes: 188 additions & 0 deletions translations/zh-CN/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
<div align="center">

<img src="../../assets/banner.png" alt="OpenUI —— 生成式 UI 的开放标准" width="100%">

# OpenUI —— 生成式 UI 的开放标准

[![Build](https://github.com/thesysdev/openui/actions/workflows/build-js.yml/badge.svg)](https://github.com/thesysdev/openui/actions/workflows/build-js.yml)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
[![Discord](https://img.shields.io/badge/Discord-Chat-7289da?logo=discord&logoColor=white)](https://discord.com/invite/Pbv5PsqUSv)

<a href="https://trendshift.io/repositories/22357" target="_blank"><img src="https://trendshift.io/api/badge/repositories/22357" alt="thesysdev%2Fopenui | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>

</div>


OpenUI 是一个全栈生成式 UI 框架——包含一种紧凑、以流式输出为优先的语言,一个内置组件库的 React 运行时,以及可直接使用的聊天界面;与 JSON 相比,最高可提升 67% 的 token 效率。



---



[文档](https://openui.com) · [Playground](https://www.openui.com/playground) · [示例聊天应用](../../examples/openui-chat) · [Discord](https://discord.com/invite/Pbv5PsqUSv) · [参与贡献](./CONTRIBUTING.md) · [行为准则](./CODE_OF_CONDUCT.md) · [安全](./SECURITY.md) · [许可证](../../LICENSE)


---

## 什么是 OpenUI

<div align="center">

<img src="./assets/demo.gif" alt="OpenUI 演示" width="100%">
</div>

OpenUI 的核心是 **OpenUI Lang**:一种紧凑、面向流式输出的语言,专为模型生成 UI 而设计。OpenUI 不再只把模型输出当作文本处理,而是让你定义组件、基于组件库生成提示词指令,并在模型流式输出的同时渲染结构化 UI。

**核心能力:**

- **OpenUI Lang** —— 一种用于结构化 UI 生成的紧凑语言,专为流式输出设计。
- <strong>内置组件库</strong> —— 图表、表单、表格、布局等,开箱即用,也可按需扩展。
- <strong>基于组件库生成提示词</strong> —— 直接从你允许使用的组件生成模型指令。
- <strong>流式渲染器</strong> —— 随着 token 到达,在 React 中渐进式解析并渲染模型输出。
- <strong>聊天与应用界面</strong> - 可将同一套基础能力用于助手、copilot 以及更广泛的交互式产品流程。


## 快速开始

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

这是开始使用 OpenUI 的最快方式。脚手架生成的应用为你提供了一个端到端的起点,内置流式处理、UI 组件和 OpenUI Lang 支持。

你将获得:

- **OpenUI Lang 支持** - 从一开始就在应用流程中内置结构化 UI 生成功能。
- <strong>库驱动的提示词</strong> - 根据你允许的组件集生成指令。
- <strong>流式支持</strong> - 在输出到达时渐进式更新 UI。
- <strong>可运行的应用基础</strong> - 从一个开箱即跑的示例开始,而不是手动把所有东西接起来。



## 工作原理

你的组件决定了模型可以生成什么。

```mermaid
flowchart LR
A["组件库"] --> B["系统提示词"]
B --> C["LLM"]
C --> D["OpenUI Lang 流"]
D --> E["渲染器"]
E --> F["实时 UI"]
```
1. 定义或复用一个组件库。
2. 基于该组件库生成 system prompt。
3. 将该 prompt 发送给你的模型。
4. 将 OpenUI Lang 的流式输出返回给客户端。
5. 使用 Renderer 渐进式渲染输出。

在 [Playground](https://www.openui.com/playground) 中亲自试试看——使用默认组件库实时生成 UI。

## 包

| Package | 描述 |
| :--- | :--- |
| [`@openuidev/react-lang`](../../packages/react-lang) | 核心运行时 —— 组件定义、解析器、渲染器、提示词生成 |
| [`@openuidev/react-headless`](../../packages/react-headless) | 无头聊天状态、流式适配器、消息格式转换器 |
| [`@openuidev/react-ui`](../../packages/react-ui) | 预构建的聊天布局和两个内置组件库 |
| [`@openuidev/cli`](../../packages/openui-cli) | 用于脚手架生成应用和生成 system prompt 的 CLI |

```bash
npm install @openuidev/react-lang @openuidev/react-ui
```

## 为什么选择 OpenUI Lang

OpenUI Lang 专为模型生成 UI 而设计,既要求结构化,也要求可流式传输。

- <strong>流式输出</strong> —— 随着 token 到达逐步输出 UI。
- **Token 效率** —— 相比等价 JSON,最多可减少 67% 的 token(见[基准测试](../../benchmarks))。
- <strong>受控渲染</strong> —— 将输出限制在你定义并注册的组件范围内。
- <strong>类型化组件契约</strong> —— 通过 Zod schemas 预先定义组件 props 和结构。

### Token 效率基准测试

使用 `tiktoken`(GPT-5 encoder)测量。对比对象为 OpenUI Lang 与两种基于 JSON 的流式格式,覆盖七种 UI 场景:

| 场景 | Vercel JSON-Render | Thesys C1 JSON | OpenUI Lang | 相比 Vercel | 相比 C1 |
| ------------------ | -----------------: | -------------: | ----------: | -----------: | --------: |
| simple-table | 340 | 357 | 148 | -56.5% | -58.5% |
| chart-with-data | 520 | 516 | 231 | -55.6% | -55.2% |
| contact-form | 893 | 849 | 294 | -67.1% | -65.4% |
| dashboard | 2247 | 2261 | 1226 | -45.4% | -45.8% |
| pricing-page | 2487 | 2379 | 1195 | -52.0% | -49.8% |
| settings-panel | 1244 | 1205 | 540 | -56.6% | -55.2% |
| e-commerce-product | 2449 | 2381 | 1166 | -52.4% | -51.0% |
| <strong>总计</strong> | **10180** | **9948** | **4800** | **-52.8%** | **-51.7%** |

完整方法说明和复现步骤见 [`benchmarks/`](../../benchmarks)。

## 文档

详细文档请访问 [openui.com](https://openui.com)。

## 仓库结构

```
openui/
├── packages/
│ ├── react-lang/ # Core runtime (parser, renderer, prompt generation)
│ ├── react-headless/ # Headless chat state & streaming adapters
│ ├── react-ui/ # Prebuilt chat layouts & component libraries
│ └── openui-cli/ # CLI for scaffolding & prompt generation
├── skills/
│ └── openui/ # Claude Code skill for AI-assisted development
├── examples/
│ └── openui-chat/ # Full working example app (Next.js)
├── docs/ # Documentation site (openui.com)
└── benchmarks/ # Token efficiency benchmarks
```

推荐从以下内容开始:

- [openui.com](https://openui.com) 查看完整文档
- [`examples/openui-chat`](../../examples/openui-chat) 查看可运行示例应用
- 如果你想参与贡献,请查看 [`CONTRIBUTING.md`](./CONTRIBUTING.md)

## 社区

- [Discord](https://discord.com/invite/Pbv5PsqUSv) —— 提问、分享你正在构建的内容
- [GitHub Issues](https://github.com/thesysdev/openui/issues) —— 报告 bug 或提出功能请求


## 参与贡献

欢迎贡献。请查看 [`CONTRIBUTING.md`](./CONTRIBUTING.md) 了解贡献指南以及参与方式。

## Agent Skill

OpenUI 提供了一个 [Agent Skill](https://agentskills.io),让 AI 编程助手(Claude Code、Codex、Cursor、Copilot 等)能够帮助你使用 OpenUI Lang 搭建、开发和调试生成式 UI 应用。

### 安装

```bash
# 使用 skills CLI(适用于所有代理)
npx skills add thesysdev/openui --skill openui

# 手动——复制到你的项目中
cp -r skills/openui .claude/skills/openui
```

该技能涵盖组件库设计、OpenUI Lang 语法、system prompt 生成、Renderer、SDK 包,以及对格式错误的 LLM 输出进行调试。

## 许可证

本项目按 [`LICENSE`](../../LICENSE) 中描述的条款提供。

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**:
本文档已使用 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。尽管我们力求准确,但请注意,自动翻译可能包含错误或不准确之处。应以该文档原始语言版本为权威来源。对于关键信息,建议使用专业人工翻译。对于因使用本翻译而产生的任何误解或误释,我们概不负责。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
24 changes: 24 additions & 0 deletions translations/zh-CN/SECURITY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# 安全政策

## 报告漏洞

我们非常重视 OpenUI 的安全性。如果你认为自己发现了安全漏洞,请通过 GitHub 安全通告中的“Report a Vulnerability”标签向我们报告。

**请不要通过公开的 GitHub issues 报告安全漏洞。**

请改为:

1. 前往此仓库的“Security”标签页
2. 点击“Report a vulnerability”
3. 在表单中填写漏洞描述

我们会尽快回应你的报告,并与你合作核实和修复该问题。

感谢你帮助保障 OpenUI 及其用户的安全!

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**:
本文档使用 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行了翻译。尽管我们力求准确,但请注意,自动翻译可能包含错误或不准确之处。应以该文档原始语言版本为权威来源。对于关键信息,建议采用专业人工翻译。对于因使用本翻译而产生的任何误解或误读,我们概不负责。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading
Loading