正在加载陈远的个人网站

开源复刻 ChatGPT 智能界面:AI 实时生成交互式 UI

基于 OpenUI 的开源项目,让大模型把回答流式生成为地图、图表、表单等可交互界面。

AI 应用前端工程Agent 工程

来源摘录

What if your AI chatbot could build an entire interactive interface instead of just replying with text? This open-source GitHub project generates working maps, charts, tables, and editable components in real time using models from OpenRouter, Ollama, and more. Repo: https://t.co/rpoHryk13G

深度解析

是什么:thesysdev/open-intelligent-ui 是 ChatGPT「Intelligent UI」体验的开源复刻:模型不再返回纯文本,而是流式输出 OpenUI Lang 程序,前端用一套原语组件库实时渲染出地图、图表、表格、照片与可编辑组件。TypeScript/Next.js 实现,529 星,支持 OpenUI Cloud、任意 OpenAI 兼容 API(如 OpenRouter)以及 Ollama 本地模型。

核心设计:三层解耦——组件库(Layout/Text/Input/媒体/绘图原语,无固定布局)+ 表达式系统($variables 状态绑定与 59 个 @functions 在答案内计算)+ 动作(@Set、@CopyToClipboard 等)。模型依据 prompt-options 中的规范与 16 个工作示例自行编排组件;Gateway 路径对生成的 OpenUI Lang 做校验纠错,本地路径则原样渲染。设计令牌集中于 theme.css,含暗色集但仅 /gallery 启用。

值得借鉴:「系统提示词即 UI 规范」——generateSystemPrompt 把组件库规格注入提示词,模型输出即程序;状态驱动让滑块、按钮在页面内闭环,无需回传表单;「无固定布局的原语」思路值得生成式界面设计参考。

坑与边界:本地模型无纠错、输出质量强依赖模型能力;Ollama 默认 4096 上下文会静默截断约 8000 token 的提示词;街道路线依赖公共 OSRM 演示服务器;照片靠 Wikipedia 标题匹配而非真实搜索。