TokUI 出击，Token 即 UI！国产神器「AI 流式渲染」的底牌全开源了

一、先讲一个真相：你的 AI 产品，还在用「石器时代」的方式显示内容

当大模型已经能写代码、画图表、调工具的时候，用户在对话框里看到的，却依然是一堵缓慢铺开的文字墙。
Markdown？那是给人读文档用的，不是给 AI 实时生成交互界面的。
HTML？标签冗长，按 Token 计费的时代，每一个 <div> 都是在烧钱。
JSON Schema？必须等完整闭合才能解析，用户盯着转圈十几秒，然后「啪」地一下全弹出来——这叫哪门子流式？
AI 的输出是一串 Token，UI 的渲染也应该跟着 Token 的节奏走。
来于山东向量科技（jboit ai 的团队）在自家产品 JBoit AI里埋头打磨数年的答案，如今终于摊牌了——TokUI，2026 年正式开源。

二、TokUI 是什么？一句话杀死比赛

TokUI 是全球首个 For AI 的真流式 UI 描述与渲染引擎。
它不是 HTML 的替代品，不是 Markdown 的升级版，而是为「AI 流式输出」这个全新场景专门发明的第三种 UI 介质。
  • 后端：用极简 DSL 描述组件，Token 消耗低到离谱；
  • 传输：SSE / WebSocket 逐字符推送；
  • 前端：状态机增量解析，首个 Token 到达即开始渲染真实 DOM。
零依赖。150+ 组件。11 种语法高亮自研。单块解析 <1ms。

三、为什么 TokUI 是降维打击？看这张对比表

表格
 
 
维度 HTML Markdown JSON Schema TokUI DSL
Token 成本 高（标签冗长） 低 高（嵌套引号多） 极低
流式友好 否（必须闭合） 部分（逐行） 否（需完整 JSON） 是（逐字符）
可交互 是 否 依赖运行时 是（原生）
AI 生成成本 高 低 中 低
同样一张表格：
HTML 要这么写：
HTML
 
 
<table class="stripe"><thead><tr><th>指标</th><th>数值</th></tr></thead>
<tbody><tr><td>月活</td><td>128k</td></tr></tbody></table>
 
TokUI 只要这么写：
plain
 
[table stripe][thead cols:"指标,数值/r"][tbody][tr ,月活,128k][/tbody][/table]
 
Token 是 AI 时代的货币。TokUI 替你省钱，省到骨子里。

四、真流式，不是伪流式

市面上很多号称「流式渲染」的方案，本质是把完整的 JSON 切成几块分批发送。一旦分块边界劈开了标签或引号，直接崩给你看。
TokUI 的解析器是字符级真流式：
  • 状态机从第一行代码起，就为「输入随时在任意位置被切断」而设计；
  • [card tt: 到达时，卡片容器就已经插入 DOM；
  • 代码块逐字高亮，图表逐根长出，甘特图任务条逐条增长；
  • 引号未闭合、标签写一半、AI 漏了 ] ——TokUI 全部容错，流式过程永不中断。
首 Token 即现，无需等待闭合。这才是 AI 对话该有的体验。

五、零依赖 = 零负担 = 随处可埋

前后端全程原生 API，不引入任何 npm 包。
  • 图表纯 SVG 手绘（bar / line / pie / radar / donut / gantt / funnel / gauge）；
  • 代码高亮自写 tokenizer，覆盖 11 种语言；
  • Markdown 解析、主题系统、事件总线，全部自研。
这意味着什么？你可以把 TokUI 塞进任何已有项目、任何 CDN <script>、任何无构建环境，不污染依赖树、不引发版本冲突。

六、AI 生成内容的安全底线：零注入风险

在「AI 输出直接渲染」的场景里，XSS 是头号风险。
TokUI 从架构上三层设防：
  1. 事件处理器是命名引用，不是代码。DSL 里写 clk:handleLogin，只是一个字符串名字，真实函数需预先 registerHandler 注册；
  2. DOM 创建时过滤所有 on* 属性和 formaction；
  3. 全库仅有两处使用 innerHTML，且均做了净化处理，其余全部 textContent。
AI 输出什么，都不会变成宿主页面的可执行代码。 这是能进生产环境的安全底线。

七、从 JBoit 内部武器到开源利器

TokUI 不是实验室玩具。它最早内建于 JBoit 产品，历经数年真实业务打磨，在 Token 成本敏感、流式延迟敏感、组件动态加载敏感的生产环境里跑出来的。
2026 年，山东向量科技决定开源。为什么？
大模型开发者不应该把精力浪费在「怎么让 AI 画出一个不卡顿的表格」上。
TokUI 要做的就是那层语言无关的 UI 中间件——今天 Node.js 是参考实现，明天 Python / Rust / Java / Go / C# 的 SDK 输出同样的 DSL，前端一行不改。

八、适用场景：不止于 AI 对话

表格
 
 
场景 TokUI 能做什么
AI 对话富 UI 思考链、工具调用卡片、代码差异、Artifact 预览、联网引用——30+ 专属组件
Agent 可视化 多步任务流式状态更新，实时看到「正在调用 → 调用成功」
BI 报告生成 指标卡、图表、表格、结论——边生成边呈现，报告「长」出来
低代码 / 远程 UI 同一套 DSL，拖拽编辑器能生成，配置中心能下发，多端能消费
跨语言后端 无论后端是 Python 还是 Go，输出 DSL 就能驱动同一套前端

九、写在最后

互联网的 UI，过去三十年是「人写、机器渲染」。
AI 时代，UI 正在变成「机器生成、人交互」。而生成的方式，应该是流式的、经济的、安全的、可交互的。
TokUI 想做这四件事的底层介质。
From Token to UI. 让 AI 用极少的 Token，流式生成富 UI。

posted @ 2026-06-23 21:17  鬼门元歌  阅读(113)  评论(0)    收藏  举报