OpenUI

OpenUI：构建实时生成式 UI 的开源开发利器

在人工智能驱动的应用开发领域，如何让 AI 不仅仅返回文本，而是直接输出精美且可交互的界面（UI）？OpenUI 为此提供了完美的解决方案。作为一个功能强大的开源工具包，OpenUI 允许开发者定义自己的组件库，并让 AI 应用根据用户需求实时响应原生 UI，彻底改变了人机交互的体验。

什么是 OpenUI (What's OpenUI)

OpenUI 是一个开源开发套件，专门用于构建支持生成式 UI 的 AI 应用程序。它不仅仅是一个简单的渲染器，更是一套完整的生态系统，包含了 OpenUI Lang 语言规范、Playground 测试环境以及高效的 API Reference。通过 OpenUI，开发者可以轻松地将静态的 LLM（大语言模型）对话转变为动态的界面交互，例如在搜索巴黎现代设计酒店时，系统能直接渲染出包含酒店详情、地图位置和预订按钮的卡片，而非一段枯燥的文字描述。

OpenUI 的核心功能 (Features)

OpenUI 凭借其卓越的设计理念，在性能和易用性上均处于行业领先地位：

• 性能优化 (Performance Optimized)：渲染速度比传统的 json-render 快达 3.0 倍，确保了极致的用户响应体验。
• Token 高效 (Token Efficient)：通过精简的 OpenUI Lang，比 json-render 减少了高达 67.1% 的 Token 消耗，显著降低了 API 调用成本。
• 原生类型支持 (Native Types)：具备高性能和内存安全性，支持复杂的逻辑处理。
• 跨平台运行 (Works Across Platforms)：目前支持 JS 运行时，并即将推出对 iOS 和 Android 的原生支持。
• 流式原生支持 (Streaming Native)：支持流式传输和部分响应，用户无需等待完整结果即可看到界面更新。
• 交互性 (Interactive)：能够处理用户输入和交互流，使 UI 不仅仅是展示，更是功能窗口。
• 默认安全 (Safe by Default)：严格限制任意代码执行，确保生成界面的安全性。
• 兼容性极强：
  • 支持任何 UI 库：包括 ShadCN、Material Design 或自定义设计系统。
  • 支持任何 LLM：OpenAI、Anthropic、Gemini、Mistral 等。
  • 支持任何框架：Vercel AI SDK、LangChain、CrewAI、OpenAI/Anthropic Agents SDK 等。

如何使用 OpenUI (How to Use)

通过以下简单的四个步骤，您可以在几分钟内构建一个生成式 UI 聊天应用：

1. 定义您的组件库

使用 defineComponent 和 createLibrary 注册您的组件。例如定义一个轮播图组件：

import { z } from "zod"
import { defineComponent, createLibrary } from "@openuidev/react-lang"

const CarouselCard = defineComponent({
  name: "CarouselCard",
  props: z.object({
    title: z.string(),
    imageUrl: z.string().url(),
    ctaLabel: z.string(),
  }),
  component: ({ props }) => <CarouselCard {...props} />,
})

export const library = createLibrary({
  root: "Carousel",
  components: [Carousel, CarouselCard],
})

2. 生成系统提示词 (System Prompt)

OpenUI 会根据您的组件定义自动生成优化的系统提示词，告知 LLM 如何正确调用这些 UI 组件。

3. LLM 响应

大语言模型会根据用户的输入（如“我需要巴黎的一家现代设计酒店”），使用 OpenUI Lang 格式返回数据。

4. 解析与渲染

OpenUI 渲染器解析 LLM 的响应，并在前端实时渲染出精美的 UI 界面。

应用场景 (Use Case)

旅游预订与搜索

当用户搜索“巴黎现代设计酒店”时，OpenUI 可以实时展示：

• Hotel Plaza Athénée：位于香榭丽舍大街附近，结合了经典巴黎威望与现代升级，拥有 Dior 水疗中心。
• Four Seasons Hotel George V：地标性建筑，提供宽敞的现代客房和米其林餐厅。
• 交互式卡片：包含酒店特色（如免费 Wifi、宠物友好）、预订按钮及价格信息。

数据可视化与表单

• 图表 (Charts)：根据数据实时生成统计图表。
• 表单 (Forms)：动态生成符合用户意图的输入表单。
• 表格与列表 (Tables & Lists)：高效展示结构化信息，支持实时排序和筛选。

常见问题 (FAQ)

Q: 如何开始一个新的 OpenUI 项目？

A: 您可以通过命令行运行 npx @openuidev/cli@latest create 快速初始化项目。

Q: OpenUI 比 JSON 渲染好在哪里？

A: OpenUI 专门为 AI 场景优化，渲染速度提升 3 倍，且节省了超过 60% 的 Token，这意味着更快的响应和更低的运营成本。

Q: 它是否支持我现有的 UI 框架？

A: 是的，无论是 ShadCN 还是您自己公司内部的设计系统，OpenUI 都能完美适配。

Q: 是否支持移动端？

A: 目前已支持 JS 运行时，iOS 和 Android 的原生支持已在开发计划中，即将发布。

---

由 Thesys Inc. 精心打造。