thesysdev(GitHub)
Open Intelligent UI
Open Intelligent UI是thesysdev(GitHub)的免费开源项目(英语)。前置条件:需要基本的前端与 TypeScript/React 知识,并了解调用 LLM API 的基本方式。
能够按官方 README 在本地跑起一个基于 OpenUI 的生成式 UI 演示应用,理解模型流式输出 OpenUI Lang 并由组件库渲染成交互界面的机制,并可自行替换模型接口。
- 难度
- 见前置条件
- 类型
- 开源项目
- 语言
- 英语
- 规模
- 1 个课节
- 内容费用
- 免费
- 动手
- 需要动手环境
使用限制
阅读材料无需账号;运行演示需要 Node 24 环境和一个模型密钥(或本地 Ollama)。
- 练习与作业
- THESYS_API_KEY(OpenUI Cloud Gateway 密钥),或自备 LLM_BASE_URL / LLM_API_KEY / LLM_MODEL
- 内容提示
- 原站推广:README 顶部含指向 www.openui.com/demo/intelligent-ui 的 Try the live demo 推介链接,推广作者自家的 OpenUI 平台与 Gateway 密钥体系。
选择学习环境
按你的电脑系统准备;提示词在你自己的电脑上使用。
本机动手
这是 OpenUI 之上的开源生成式 UI 实现:模型流式输出 OpenUI Lang,前端用组件库渲染成地图、图表、表单等交互界面。先按 README 把演示跑起来,再对照 src/lib/library.ts 与 /gallery 理解组件与程序写法。
Node 24 环境、npm;需要一个 OpenUI Cloud(THESYS_API_KEY)或自备 OpenAI 兼容 API 密钥,或用本地 Ollama。
准备工具和账号
标“选用”的可以跳过。
- Node.js 24运行本项目(README 写明 Requires Node 24)
- npm安装依赖与执行 npm 脚本
- OpenUI Cloud 密钥(THESYS_API_KEY)或 OpenAI 兼容 API 密钥让 /api/chat 调用模型生成 OpenUI Lang
- Ollama 选用可选,用本地模型替代云端 Gateway
让 AI Agent 一次搭好课程
复制开课提示词发给你常用的 AI Agent。它会下载允许保存的官方材料、建立课节目录并自检;需要账号、权限或费用时会先问你。
开课提示词 · 只需用一次此提示词尚未实测验证请帮我把「Open Intelligent UI」的学习环境一次准备好,让我之后只需要按顺序学习和做练习。 开始前先问我:课程放在哪个目录(等我给出完整路径),确认我的操作系统和已有工具。确认前不要创建文件或安装软件。 课程入口:https://github.com/thesysdev/open-intelligent-ui 我的系统:Windows。如果实际不符,先调整方案。 本次路线:Windows:本机动手。只准备这条路线需要的工具;只读路线不安装运行环境、不配置模型密钥。 练习:按 README 的 Setup 与 Use any OpenAI-compatible API 部分,切换模型来源(Gateway、OpenRouter 或本地 Ollama),并对照组件文档自己写一段 OpenUI Lang 程序在 /gallery 类似页面中渲染。 课节(官方顺序): 1. Open Intelligent UI 仓库主页(README:项目说明、组件库、@functions、Setup 与环境变量):https://github.com/thesysdev/open-intelligent-ui 1. 环境 - Node 24 - npm - .env 配置文件 - 模型密钥(THESYS_API_KEY 或 LLM_API_KEY) - 安装前先列出要装的软件和命令,等我同意;已装好的直接复用。 2. 材料 - 官方课程页面:只记录链接 https://github.com/thesysdev/open-intelligent-ui 3. 目录(最外层放在我确认的位置) open-intelligent-ui/ ├── README.md # 课程入口、课节清单、每次怎么开始 ├── progress.md # 每课:读讲义 / 做练习 / 记笔记 ├── questions.md # 待解决的问题 ├── check-env.ps1 # 环境自检,按 README 操作 ├── data/ # 练习用到的样例数据 └── lessons/ # 每课一个文件夹:notes.md + exercises/ └── 01-01-open-intelligent-ui-readme-functions/ - 每课文件夹里建 notes.md(顶部写本课官方链接)和 exercises/;课节文件夹名称与上面一致。 - 已有课程目录先检查并复用;不覆盖笔记、作业或 progress.md,不重置已有进度。尚未发布的课节保留入口并注明未发布,不能代写讲义或虚构练习。 4. 自检 - 创建 check-env.ps1,逐项检查并记录“通过/未通过”: - 在课程根目录运行;每项检查独立执行,进入子目录不能影响下一项。将下面检查转换为 PowerShell 命令,不使用 Bash 语法。 - node -v → 输出 v24.x - 打开 http://localhost:3000 并提交一个示例请求 → 页面流式渲染出交互式 UI 回答 - 打开 http://localhost:3000/gallery → 能看到手写的示例程序及其渲染结果 - 标注为人工检查、浏览器操作或 notebook 单元的项目,按相应方式操作,不直接粘贴进 shell;脚本只包含当前系统可执行的命令。 - 仅在当前路线需要、对应材料已获准保存、工具已安装时运行该项;需要登录、付费或尚未开放的材料记为“需要我操作/未验证”,不能伪报通过。不执行会调用付费 API、提交作业或修改云服务的检查。 - 运行一次,把结果给我看;未通过的项目说明原因和修复办法。 5. 学习计划 - README.md:课程入口、课节清单(带链接)、每次学习怎么开始(使用“每课提示词”)。 - progress.md:每课三项勾选——读讲义、做练习、记笔记。 6. 最后分三部分汇报:已完成、需要我自己操作的、尚未验证的。 边界: - 需要管理员权限、会产生费用或需要填写密钥的操作,先告诉我原因,等我同意。密钥由我在本机配置,不发到聊天,不写进笔记或版本库;原项目需要 .env 时确认已被 Git 忽略。 - 不替我写练习或作业答案,也不替我提交。我卡住时只给提示;我明确要求时才给解答。 - 只下载许可允许个人保存的材料;其余只放链接。不把未运行的命令说成成功。 如果你不能直接操作我的文件系统,请在确认目录后给出适用于我的系统、可直接执行的命令和需要保存的文件内容。搭好后的课程目录
open-intelligent-ui/ ├── README.md # 课程入口、课节清单、每次怎么开始 ├── progress.md # 每课:读讲义 / 做练习 / 记笔记 ├── questions.md # 待解决的问题 ├── check-env.ps1 # 环境自检,按 README 操作 ├── data/ # 练习用到的样例数据 └── lessons/ # 每课一个文件夹:notes.md + exercises/ └── 01-01-open-intelligent-ui-readme-functions/
常见问题
免费吗?
免费:仓库以 MIT license 开源,README 正文即为完整的项目说明与搭建步骤,无需付费或登录即可阅读。实践需要付费:运行与调用模型需要 THESYS_API_KEY(OpenUI Cloud),或自备 OpenAI 兼容 API 密钥;也可用本地 Ollama 模型替代。
需要什么基础?
需要基本的前端与 TypeScript/React 知识,并了解调用 LLM API 的基本方式。软件、账号与硬件:Node 24 环境、npm;需要一个 OpenUI Cloud(THESYS_API_KEY)或自备 OpenAI 兼容 API 密钥,或用本地 Ollama。
有中文吗?
本站记录的语言是英语;是否有中文字幕或译本本站未核实,请以原站为准。
怎么开始?
从原始资源入口开始:https://github.com/thesysdev/open-intelligent-ui。本页“学前准备”列出环境与工具,“学习指南”给出开课提示词,可以在自己的电脑上按步骤开始。开课提示词尚未完整验证。练习与作业需要自备:THESYS_API_KEY(OpenUI Cloud Gateway 密钥),或自备 LLM_BASE_URL / LLM_API_KEY / LLM_MODEL。
来源与使用须知
- 收录时间
- 本站首次收录 2026-10-23
- 指南参考
- 课程主页
版权与转载
- MIT:代码可自由使用和修改,需保留版权声明。原站说明
- 本站只提供原始链接和学习指南,不转载、不镜像课程材料;引用时请注明原作者与出处。