thesysdev/open-intelligent-ui

Open Intelligent UI – 概览

Open Intelligent UI 是一个开源演示，重现了 ChatGPT 中展示的“智能 UI”体验 – 例如，用户查询“在旧金山规划一天”会返回丰富、交互式的答案（地图、照片、可编辑的行程），而不是纯文本。该项目基于 OpenUI 构建，这是一个用于生成式 UI 的开放标准，让语言模型流式传输 UI 组件（OpenUI Lang 1.0）的描述，然后由前端进行渲染。

核心理念

• 模型驱动 UI – LLM 生成一个 OpenUI Lang 程序，组装 UI 原语（布局、文本、输入、媒体、图表、地图等）。没有静态布局被硬编码；模型决定使用哪些组件。
• 组件库 – TypeScript 库（src/lib/components/）定义了 30 多个可重用原语（例如 Col, Row, Map, Chart, SearchImage）。每个组件都有 schema、样式标记和深色模式支持。
• 内置函数 – 59 个通用 @functions（列表、数学、日期、颜色、聚合等）让生成的程序能够计算值、更新状态并驱动交互式小部件。
• 状态与操作 – UI 输入绑定到 $variables；诸如 @Set、@CopyToClipboard、@OpenUrl 之类的操作会改变状态，而无需往返服务器。
• 可插拔后端 – 默认情况下，应用与 OpenUI Cloud 网关通信，但您可以指向任何与 OpenAI 兼容的 API（OpenRouter、本地 Ollama 等）。

工作原理（高层流程）

1. 用户输入请求 → 前端将其发送到 /api/chat。
2. 服务器构建系统提示，包含组件规范和提示选项，然后调用所选的 LLM（OpenAI、Ollama 等）。
3. LLM 流式传输 OpenUI Lang 描述 UI。
4. 前端解析流并实时渲染所描述的组件。状态更改（滑块、复选框）会在客户端触发相同的函数。
5. 可选工具 – SearchImage 获取 Wikipedia 的引导图片，/api/street-route 从 OSRM 获取道路几何形状等。

开箱即用的功能

• 演示聊天 UI（http://localhost:3000），可以回答旅行规划、仪表盘和其他“智能 UI”提示。
• 设计界面（/gallery）展示了所有 16 个官方示例和 2 个仪表盘的手写程序，有助于 UI 设计师探索组件集。
• 基准测试脚本，可以针对任何模型运行 16 个示例和 8 个仪表盘提示，验证生成的 UI 并捕获屏幕截图。

开始使用（快速步骤）

cp .env.example .env
npm install
npm run generate:apiKey   # 将 THESYS_API_KEY 写入 .env（如果使用自己的 API，可跳过）
npm run dev               # 启动开发服务器

打开浏览器，输入类似以下的请求：

I'm in San Francisco for a day, plan a sightseeing route for me

界面将显示地图、照片和可编辑的行程。

使用 Ollama 本地运行（无需云密钥）

1. 安装 Ollama 并拉取模型（默认 qwen3.8:27b）。
2. 确保大的上下文窗口（OLLAMA_CONTEXT_LENGTH=32768）。
3. 在 .env 中设置 MODEL_PROVIDER=ollama 并运行 npm run dev。
   • 没有输出校正步骤，因此更大的模型会带来更好的结果。

谁可能使用它

• 开发者 – 构建 AI 增强产品并需要现成 UI 生成栈的人。
• 设计师 – 探索如何从可重用原语组成 LLM 驱动界面的设计师。
• 研究人员 – 评估生成式 UI 模型的研究人员（基准脚本使系统测试变得容易）。

局限性

• 演示依赖于相当大的提示（约 8k tokens）；本地模型需要大的上下文窗口。
• 使用本地模型时，OpenUI 网关的验证/更正会被跳过，因此格式错误的 UI 代码可能会破坏 UI。
• 只实现了 OpenUI 1.0 组件/函数的子集；扩展库需要添加 schema 和重新生成步骤。

---

简而言之： Open Intelligent UI 是 ChatGPT 风格“智能 UI”的一个具体开源实现，使用 OpenUI 生成式 UI 标准，包含完整的组件库、有状态函数和灵活的后端选项，适用于任何与 OpenAI 兼容的模型。