open-intelligent-ui - 用开源组件复刻 ChatGPT 式交互式回答界面

open-intelligent-ui 是一个开源项目，目标是把 ChatGPT 中被称为「Intelligent UI」的交互式回答体验，用开源组件重新实现出来。据项目 README 说明，在那种体验里，用户提出「plan a day in San Francisco」这类请求，得到的不是一段文字，而是一张地图、若干照片和一份可编辑的行程。这个仓库希望让同样的界面能够被构建、修改，并放进任意应用里。它适合想在自己的产品中引入生成式 UI 的前端与全栈开发者，也适合研究 OpenUI Lang 渲染与状态绑定方式的团队。项目 README 明确声明，该项目独立开发，与 OpenAI 无隶属关系，也未获其背书；「Intelligent UI」指的是它所复刻的 ChatGPT 功能。

维护者与状态

项目由 thesysdev 维护，仓库创建于 2026-10-08，最后一次提交在 2026-10-17。截至 2026-10-18，仓库获得 531 个星标。事实表显示该项目尚无正式 release，也就是说目前没有可引用的版本号，使用者需要直接跟进仓库主分支的代码状态。项目另有一个在线演示页面，可用于在本地部署前先观察效果。

主要能力

以下内容均来自项目自述，属于维护者对自身能力的描述，未经独立验证。

• 模型流式输出 OpenUI Lang 1.0，由应用侧渲染。据项目说明，模型输出的是 OpenUI Lang 1.0，应用用一套原语库把它渲染出来，布局不由组件固定，而由模型自行安排。组件库位于 src/lib/library.ts，组件在 src/lib/components/ 下，遵循 Open Intelligent UI 的设计。
• 布局与文本组件。布局类包括 Col、Row、Box（背景、圆角、边框、尺寸、flex）、Grid、Card、Carousel、Popover、Divider、Spacer；文本类包括 Title、Text（支持行内粗体、斜体、代码与链接）、Caption、Label、Badge、Link、List 与 ListItem（项目符号、编号、时间线）、Markdown。
• 输入组件与变量绑定。包括 Button、IconButton、Pressable、Input、TextArea、Select、SegmentedControl、Slider、Checkbox、RadioGroup、DatePicker、Timer（倒计时）、Form。据项目说明，每个输入组件的第一个参数是它的值，通常是一个 $variable，供其他语句读取。
• 媒体与数据展示。SearchImage 由应用为查询找到一张照片，类似 ChatGPT 的服务端解析图片；Image 使用给定 URL；Icon 使用 lucide 图标名；Table 的单元格可以是组件；Chart 支持柱状、折线、面积、饼图、环形、散点；Map 配合 MapMarker（基于 MapLibre GL，支持分类筛选、展开与街道路线）；另有 YouTube。
• 富文本与互动元素。Text 可接收混合字符串与行内组件的列表；Quote、Code（带复制）、Math（KaTeX）；Flashcard 可翻转，Celebration 在条件成立时撒彩带。
• 绘图与沙箱页面。Svg 配合 G、Circle、Ellipse、Rect、Line、Path、Polyline、Polygon、SvgText，其属性可接受表达式，从而让状态驱动图形；HtmlView 在沙箱 iframe 中运行一个 HTML 页面，例如游戏或 canvas。
• 59 个通用函数。在 1.0 内置函数之外，src/lib/functions/ 提供列表（@Append、@Remove、@Update、@Toggle、@Includes、@Range、@Chunk、@Shuffle 等）、数字（@Pow、@Random、@Clamp、@Percent、@Allocate、@Payment、@Convert）、文本（@Format、@Join、@Split、@Replace、@Capitalize、@Plural、@Duration、@Default）、颜色（@MixColor）、日期（@Today、@FormatDate、@AddDays、@AddMonths、@DaysBetween、@MonthsBetween、@StartOf）以及仪表盘用数据函数（@GroupBy、@Pivot、@Top、@Between、@Bucket、@Cumulative、@MovingAvg、@Change、@Histogram、@Stats）。据项目说明，参数错误时调用结果为 null，与 1.0 一致。
• 动作与状态。提供 @CopyToClipboard(text)，用于复制购物清单或分账结果。输入绑定到 $variables，读取它们的语句会随用户交互更新；按钮与 Pressable 执行 @Set、@Reset、@ToAssistant、@OpenUrl、@CopyToClipboard 等步骤。
• 画廊页面。仅开发环境可用的 /gallery 渲染手写程序，覆盖 16 个 Intelligent UI 示例（从 7 速自行车到街机游戏）、两个基于演示数据的仪表盘、提示词中的示例，以及覆盖每个组件的程序。

使用入口

仓库地址：thesysdev/open-intelligent-ui。在线演示：openui.com/demo/intelligent-ui。

据项目说明，本地运行需要 Node 24，基本步骤如下：

cp .env.example .env
npm install
npm run generate:apiKey
npm run dev

随后打开 http://localhost:3000，可以尝试「I'm in San Francisco for a day, plan a sightseeing route for me」这类请求。环境变量中，THESYS_API_KEY 为 OpenUI Cloud（Gateway）密钥，仅在服务端使用；THESYS_MODEL 为 {provider}/{model} 形式的模型 id；THESYS_BASE_URL 指向 Gateway 的 Responses 端点。

项目还提供两条替代路径。其一，设置 LLM_BASE_URL、LLM_API_KEY、LLM_MODEL，即可跳过 OpenUI Cloud，直接调用任意 OpenAI 兼容的 Chat Completions API；此时 /api/chat 会在服务端用同一份库规范与提示词选项构建完整的 OpenUI 1.0 系统提示，流式转发 Chat Completions 并把文本作为 Responses 事件中继，浏览器侧无需改动。其二，设置 MODEL_PROVIDER=ollama 可通过 Ollama 在本地模型上运行，无需 API 密钥，也适用于 LM Studio 等 OpenAI 兼容本地服务，通过 OLLAMA_BASE_URL 指定地址。

许可与限制

项目采用 MIT 许可证。

据项目说明，使用时有若干需要注意的边界：

• 本地模型没有输出校正。Gateway 会校验并纠正生成的 OpenUI Lang；本地运行时模型输出按原样渲染，因此更大的模型效果更好。
• 上下文窗口必须调大。该应用的 OpenUI 提示词约 8,000 tokens，而 Ollama 默认窗口为 4,096，会静默截断提示词并产生损坏的输出。项目建议以 OLLAMA_CONTEXT_LENGTH=32768 启动服务，或创建带更大窗口的模型变体。
• 默认本地模型有硬件门槛。默认模型为 qwen3.8:27b，约 18 GB，最好有 32 GB 或以上内存；项目也列出 gpt-oss:20b 与 qwen3:8b 作为更小的替代。
• 速度取决于硬件。Ollama 加载模型后的首次请求需要读取整个提示词，后续请求会复用，速度明显更快；对推理模型设置 LLM_REASONING_EFFORT=low 可显著缩短等待。
• 主题支持不完整。组件带有明暗两套 token，但只有 /gallery 与基准测试的 /preview 会切换到暗色，聊天界面仅支持亮色。
• 图片检索依赖外部来源。SearchImage（以及 Image 的 URL 失败时）会请求 /api/wiki 获取与查询同名的 Wikipedia 条目首图，再请求 /api/image-search 检索 Wikipedia 与 Wikimedia 的图片，因此结果受这些来源约束。

此外，项目尚无正式 release，接口与目录结构可能随主分支变动，采用前建议先阅读仓库中的说明与代码。