返回资源列表

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 密钥体系。
  1. 选择学习环境

    按你的电脑系统准备;提示词在你自己的电脑上使用。

    本机动手

    这是 OpenUI 之上的开源生成式 UI 实现:模型流式输出 OpenUI Lang,前端用组件库渲染成地图、图表、表单等交互界面。先按 README 把演示跑起来,再对照 src/lib/library.ts 与 /gallery 理解组件与程序写法。

    Node 24 环境、npm;需要一个 OpenUI Cloud(THESYS_API_KEY)或自备 OpenAI 兼容 API 密钥,或用本地 Ollama。

  2. 准备工具和账号

    标“选用”的可以跳过。

    • Node.js 24运行本项目(README 写明 Requires Node 24)
    • npm安装依赖与执行 npm 脚本
    • OpenUI Cloud 密钥(THESYS_API_KEY)或 OpenAI 兼容 API 密钥让 /api/chat 调用模型生成 OpenUI Lang
    • Ollama 选用可选,用本地模型替代云端 Gateway

    运行费用:实践需要付费,运行与调用模型需要 THESYS_API_KEY(OpenUI Cloud),或自备 OpenAI 兼容 API 密钥;也可用本地 Ollama 模型替代。

  3. 让 AI Agent 一次搭好课程

    复制开课提示词发给你常用的 AI Agent。它会下载允许保存的官方材料、建立课节目录并自检;需要账号、权限或费用时会先问你。

    开课提示词 · 只需用一次此提示词尚未实测验证
    请帮我把「Open Intelligent UI」的学习环境一次准备好,让我之后只需要按顺序学习和做练习。
    开始前先问我:课程放在哪个目录(等我给出完整路径),确认我的操作系统和已有工具。确认前不要创建文件或安装软件。
    
    课程入口:https://github.com/thesysdev/open-intelligent-ui
    我的系统:Linux。如果实际不符,先调整方案。
    本次路线:Linux:本机动手。只准备这条路线需要的工具;只读路线不安装运行环境、不配置模型密钥。
    练习:按 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.sh     # 环境自检,按 README 操作
    ├── data/            # 练习用到的样例数据
    └── lessons/         # 每课一个文件夹:notes.md + exercises/
        └── 01-01-open-intelligent-ui-readme-functions/
    - 每课文件夹里建 notes.md(顶部写本课官方链接)和 exercises/;课节文件夹名称与上面一致。
    - 已有课程目录先检查并复用;不覆盖笔记、作业或 progress.md,不重置已有进度。尚未发布的课节保留入口并注明未发布,不能代写讲义或虚构练习。
    4. 自检
    - 创建 check-env.sh,逐项检查并记录“通过/未通过”:
    - 在课程根目录运行;每项检查独立执行,进入子目录不能影响下一项。使用当前系统的终端运行。
      - 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.sh     # 环境自检,按 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:代码可自由使用和修改,需保留版权声明。原站说明
  • 本站只提供原始链接和学习指南,不转载、不镜像课程材料;引用时请注明原作者与出处。