Skip to content

TokUIFrom Token to UI

The world's first For AI & zero-dependency streaming UI framework. Describe components with a minimal DSL on the backend, push over SSE or WebSocket, and render incrementally on the frontend — the first token starts painting the DOM, letting AI produce more flexible, expressive UI with minimal tokens.

Live Demo

One line of DSL, one component

On the left is the TokUI DSL source (auto-formatted + syntax highlighted); on the right is the real DOM it renders. Hit "Edit" to tweak it live.

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]
Loading TokUI…
TokUI DSL · code ↔ render
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]
Loading TokUI…
TokUI DSL · code ↔ render
Why TokUI

The streaming UI framework for the AI era

LLMs emit plain text, leaving users staring at a wall of words. TokUI gives the model a structured expression language: stream rich, interactive UI from minimal tokens.

🌊

True streaming

A state-machine incremental parser — a [card tt:…] tag creates its container on arrival, children fill in as they come. No waiting for close tags; first paint is instant.

💴

Token economy

Minimal DSL syntax (key:value, comma multi-values, boolean attrs) — the same UI costs far fewer tokens than HTML or a JSON schema.

🔌

Three-tier, zero friction

Server TokUIBuilder chains the DSL → SSE push → frontend TokUI incremental render. One component vocabulary across the stack.

🧠

AI-scene components

Built-in tool-call, thought chain, code diff, agent status, artifact preview and more — the interaction patterns of mainstream AI products, ready to go.

Ship your first streaming UI in 3 minutes

Import the build, mount a container, feed data — that simple.