Skip to content

TokUIFrom Token to UI

全球首个 For AI & 零依赖的流式 UI 描述与渲染框架。后端用极简 DSL 描述组件,经 SSE 或 WebSocket 流式推送,前端增量解析、首个 Token 即开始渲染 —— 让 AI 使用极少的 Token 去输出更灵活、更具表现力的 UI。

实时演示

一行 DSL,一个组件

左侧是 TokUI DSL 源码(自动格式化 + 语法高亮),右侧是它渲染出的真实 DOM。点「编辑」即可即时改动。

1[card tt:"TokUI 一览" v:highlight]
2 [row]
3 [col span:7]
4 [h3 📊 数据表格]
5 [table stripe]
6 [thead cols:"chk,#,指标/c,数值,趋势/r"]
7 [tbody]
8 [tr chk,,月活,128k,↑12%]
9 [tr chk,,留存,64%,↑3%]
10 [tr chk,,收入,¥39w,↑18%]
11 [/tbody]
12 [/table]
13 [/col]
14 [col span:5]
15 [h3 📈 趋势]
16 [chart t:line tt:"近 6 月" l:"1月,2月,3月,4月,5月,6月" d:"42,55,48,70,82,95" area]
17 [/col]
18 [/row]
19 [callout t:info tt:零依赖 tx:"上述表格、图表、卡片全部由 ~20 个 Token 的 DSL 流式渲染,无任何前端依赖。"]
20[/card]
加载 TokUI…
TokUI DSL · 左代码右渲染
1[bubble role:ai]
2 [p 你好!我可以把回答渲染成富 UI,而不只是纯文本:]
3 [suggestions cols:2]
4 [suggestion tt:📊 数据看板 tx:用表格+图表呈现分析结果 clk:picks]
5 [suggestion tt:📝 结构化表单 tx:收集用户输入 clk:picks]
6 [suggestion tt:🤖 Agent 状态 tx:展示工具调用与推理 clk:picks]
7 [suggestion tt:🎨 成品卡片 tx:图文混排信息卡 clk:picks]
8 [/suggestions]
9[/bubble]
加载 TokUI…
TokUI DSL · 左代码右渲染
为什么是 TokUI

AI 时代的流式 UI 框架

大模型输出纯文本,用户得到的是一堵文字墙。TokUI 给 AI 一种结构化的表达语言:用极少的 Token,流式生成可交互的富 UI。

🌊

真·流式渲染

基于状态机的增量解析器,[card tt:...] 标签到达即可创建容器,子节点陆续填充。无需等待闭合,首屏即现。

💴

Token 经济

极简 DSL 语法(key:value、逗号多值、布尔属性),相同 UI 的 Token 消耗远低于 HTML 或 JSON Schema。

🔌

三端零摩擦

服务端 TokUIBuilder 链式生成 DSL → SSE 推送 → 前端 TokUI 增量渲染。前后端同一套组件语义。

🧠

AI 场景组件

内置工具调用、推理链、代码差异、Agent 状态、Artifact 预览等对话专属组件,覆盖主流 AI 产品的交互形态。

3 分钟,跑起第一个流式 UI

引入构建产物、挂载容器、喂数据 —— 就这么简单。