TokUI

From Token to UI：大模型输出的每个 Token，直接变成可交互的界面元素

项目速览

项目 内容
仓库 jboltai/tokui
语言 TypeScript（前后端零第三方依赖）
Stars 开源即登国内多个榜单，持续上升中
协议 MIT
作者 向量空间 JBoltAI 团队
测试 24 个测试文件 / 866+ 用例，核心模块覆盖率约 91%

它想解决什么问题

AI 对话产品的现状是一堵”文字墙”：模型已经能写代码、画图表、调工具，但用户看到的仍是逐字蹦出的 Markdown。想在对话里插表格、图表、可点击卡片，只能靠前端一遍遍补组件；JSON/HTML 又必须等完整闭合才能解析——结构化输出与 AI 逐 Token 生成的节奏天然错配。TokUI 的定位一句话：全球首个面向 AI 的零依赖真流式 UI 描述与渲染引擎——后端用极简 DSL 描述组件，SSE/WebSocket 逐字符推送，前端状态机增量解析，首个 Token 到达即开始渲染真实 DOM。

核心机制拆解

1. 极简 DSL，Token 省到骨子里。 同样的 UI，DSL 的 Token 消耗远低于 HTML 或 JSON Schema——按 Token 计费的时代这就是硬省钱。一段表格只要一行：

1
[table stripe][thead cols:"指标,数值"][tbody][tr ,月活,128k][/tbody][/table]

2. 字符级真流式，不是伪流式。 市面上很多”流式渲染”本质是把完整 JSON 切块分批，分块边界劈开标签就崩。TokUI 的状态机解析器从第一行起就为”输入随时在任意位置被切断”而设计：[card tt: 一到达卡片容器就已插入 DOM；代码块逐字高亮、图表逐根长出、甘特图任务条逐条增长；引号未闭合、标签写一半、AI 漏了右括号——全部容错，流式永不中断。

3. AI 场景组件开箱即用。 150+ 组件覆盖七大类：工具调用展示、推理链可视化（可折叠）、代码 diff 对比、Agent 状态面板（”正在调用→调用成功”实时流转）、Artifact 预览——主流 AI 产品的交互形态全部内置。

4. 工程化底子扎实。 React/Vue/Svelte/Web Component 四个官方适配器；5 套 CSS 变量主题 + HSB 色阶生成器；866+ 用例零测试框架依赖；多语言后端 SDK 在路线图上（Node.js 已实现，Python/Rust/Java/Go 规划中），DSL 规范正在固化为跨语言契约。

安装与上手

1
2
3
git clone https://github.com/jboltai/tokui
cd tokui && npm install
npm run dev   # 文档站 + 在线 DSL 实时渲染演示

官方口径”3 分钟跑起第一个流式 UI”：引入构建产物、挂载容器、喂数据，三步完成。

点评

亮点是把这个方向想得很透：它不是 HTML 替代品也不是 Markdown 升级版，而是为”AI 流式输出”专门发明的第三种 UI 介质；真流式的容错解析是实打实的技术壁垒，866+ 用例说明团队知道自己在做什么；零依赖让嵌入成本几乎为零；前后端同一套 DSL 语义，对接成本极低。国产团队做出这种完成度的底层引擎，值得点赞。

局限：DSL 是新发明，意味着学习成本与生态冷启动；多语言 SDK 还在路线图上，非 Node 后端要再等等；”首个”的定位需要时间与社区验证；设计系统的丰富度与 antd 这类成熟库还有差距。

适合人群：做 AI 对话产品、Agent 平台、BI 报表流式生成的前端与全栈团队——只要你的产品有”大模型逐 Token 输出”这个场景，TokUI 就值得试。