AI 输出只能显示纯文本？TokUI 让大模型边说边画界面

你用 ChatGPT 或者任何 AI 助手聊过天，大概率遇到过这种情况：问它一个需要表格或者结构化数据的问题，它先是一大段文字铺垫，然后给你一个排版乱的 Markdown 表格，或者干脆让你自己去理解文字描述。想让它直接出一个漂亮的、可交互的界面？别想了，等着它一段一段吐完再说。

这不是大模型的能力问题，而是前端渲染那层出了瓶颈。大模型是一个 Token 一个 Token 往外输出的，传统的前端框架——不管你用的是 React、Vue 还是别的什么——都得等整个响应回来才能渲染完整页面。就算你做了"流式显示"，也不过是逐字显示纯文本，跟打字机效果差不多。

TokUI 就是为解决这个问题来的。

一、TokUI 是什么

TokUI 的定位很明确：全球首个专为 AI 流式输出设计的零依赖 UI 渲染框架。它的口号是 “From Token to UI”——大模型每输出一个 Token，TokUI 就能立刻把它变成对应的 UI 组件。

简单说，它做了两件事：

后端用极简 DSL 描述界面。大模型不需要生成复杂的 HTML 或 React 代码，只需要输出一段非常简短的 DSL 文本，就能描述出表格、图表、按钮、卡片等各种 UI 组件。这套 DSL 比 HTML 省 90% 以上的 Token，对大模型来说负担极低。

前端逐 Token 增量解析并实时渲染。TokUI 内置了一个字符状态机，DSL 字符流一边到达一边解析，第一个字符到达时就开始绘制 DOM，不需要等待完整的语法块写完。这意味着用户看到的是"AI 边说，界面边长出来"的效果。

举个例子，大模型只需要输出类似这样的 DSL：

[card tt:"销售数据" v:highlight] [table stripe] [thead cols:"指标/c,数值,趋势/r"] [tbody] [tr ,月活,128k,↑12%] [tr ,留存,64%,↑3%] [/tbody] [/table] [/card]

前端就能立刻渲染出一个带高亮边框的卡片，里面有一张带斑马纹的表格，数据一目了然。而且这个过程是流式的——用户不需要等大模型把整段 DSL 输出完，就能看到界面逐渐成型。

二、为什么需要零依赖

TokUI 另一个值得注意的特性是零依赖。前后端都基于原生 API，运行时不引入任何 npm 包。图表用纯 SVG 画，代码高亮用的是自研的 tokenizer，整个框架的运行时依赖为 0。

这个设计不是"极简主义"的执念，而是有实际考量的。

AI 应用开发中，前端展示层往往只是一个"呈现管道"——把大模型的推理结果、知识检索的结果、Agent 工具调用的结果，以可视化的方式呈现给用户。如果这个渲染层本身依赖了 React、Vue、Ant Design、ECharts 一堆库，包体积动辄几 MB，加载慢不说，还可能跟项目里已有的前端框架产生冲突。

TokUI 把自己定位为"呈现层增强器"，它不替代你现有的前端框架，而是作为一个独立模块嵌入。不管是现代的 SPA 应用还是传统的多页面网站，直接引入就能用，不会跟现有代码打架。

NPM 包名是@jboltai/tokui，CDN 引入也只需要一行：

<scriptsrc="https://cdn.jsdelivr.net/npm/@jboltai/tokui/dist/tokui.min.js"></script>

接入步骤就三步：引入构建产物、挂载容器、喂数据。

三、DSL 长什么样

TokUI 的 DSL 语法设计得非常直观，接近自然语言的简洁程度。标签用方括号，属性用key:value的写法，层级关系用缩进表示。

文本段落：

[p 你好，这是 TokUI 渲染的文本。]

一个带点击事件的按钮：

[btn clk:handleClick] 提交申请

一张带斑马纹的表格：

[table stripe] [thead cols:"姓名/c,年龄,城市"] [tbody] [tr ,张三,28,北京] [tr ,李四,35,上海] [/tbody] [/table]

图表也不复杂，基于纯 SVG 实现，不需要 ECharts 之类的图表库：

[chart t:line tt:"近6月趋势" l:"1月,2月,3月,4月,5月,6月" d:"42,55,48,70,82,95" area]

这套语法的设计原则是：大模型容易生成，人类容易阅读。相比让大模型输出一段完整的 React 组件代码，DSL 的 Token 消耗量低了一个数量级，而且不容易出错。

四、150+ 组件覆盖什么场景

TokUI 内置了 150 多个已注册组件，分成七大类：

基础组件——标题、按钮、标签、提示、进度条、统计数字、Markdown 渲染、代码高亮（支持 11 种语言）。

表单控件——输入框、下拉选择、开关、滑块、评分、日期选择、级联选择、穿梭框、文件上传。这意味着 AI 不仅能展示信息，还能收集用户输入，实现真正的交互式对话。

布局容器——卡片、栅格、标签页、折叠面板、抽屉、对话框、时间轴、树形结构。

数据展示——表格（支持斑马纹、分页、排序）、描述列表、分页器、徽标、头像、骨架屏、空状态提示。

图表——柱状图、折线图、饼图、雷达图、散点图、甘特图、漏斗图，全部纯 SVG 实现。

AI 对话专用——对话气泡、工具调用展示、推理链可视化、代码差异对比、计划展示、终端输出、沙盒环境、Artifact 预览。这组组件是 TokUI 区别于通用 UI 框架的核心——它们是专门为 AI 对话场景设计的。

综合案例——注册表单、CRUD 界面、表单与表格联动、报告类成品。这些开箱即用的模板可以快速搭建完整的业务页面。

五、事件安全与容错设计

在 AI 场景下，安全性有一个特殊的问题：大模型输出的内容可能包含恶意代码。如果直接让大模型生成 HTML 或 JavaScript 并渲染，那就等于开了一个 XSS 的后门。

TokUI 的处理方式很巧妙：事件处理器采用命名引用机制。DSL 里可以写clk:handleClick（点击事件）或者sub:handleSubmit（提交事件），但这些只是一个名字引用，不是可执行代码。前端必须预先通过registerHandler注册对应的处理函数，未注册的事件引用会被忽略。这样就从根源上防止了注入攻击。

容错方面，TokUI 也做了充分设计：遇到未注册的组件类型，会降级渲染为一个div.tokui-unknown容器；渲染过程中抛出异常，会生成降级提示，而不会导致整个页面崩溃。考虑到流式渲染是一个持续的过程，这种"单点容错"的设计对稳定性至关重要。

还有防 Token 截断机制。大模型输出的 Token 可能在 DSL 标签中间被切断，TokUI 的状态机会在下一个 Token 到达时自动补全，不会报错。这在真实的流式场景中非常实用——网络抖动、模型分块输出都不会影响渲染。

六、实际能用在哪些地方

AI 智能问答是最直接的场景。问大模型一个数据分析问题，它不只是给你一段文字，而是直接流式渲染出表格和图表，用户一边看数据一边理解结论。

**ChatBI（智能问数）**是 TokUI 一个很好的用武之地。用户用自然语言查询数据，AI 生成 DSL 描述表格和图表，TokUI 流式渲染——从"问问题"到"看到可视化结果"，体验是连续的，不需要等待。

AI Agent 的交互界面也是重要场景。Agent 执行多步骤任务时，每一步的中间结果（工具调用、推理过程、执行状态）都需要实时展示。TokUI 的 AI 对话组件（推理链、终端输出、沙盒环境等）就是为此设计的。

智能客服领域，快速呈现结构化回复内容（按钮、卡片、表单），消除用户等待感，提升服务体验。

TokUI 由山东向量空间人工智能科技团队开发，是 JBoltAI 生态的前端呈现层。JBoltAI 是一个 Java AI 应用开发框架，后端负责 AI 推理、知识检索等处理，TokUI 负责把这些处理结果以流式 UI 的方式呈现给用户。两者配合，形成了一个从后端到前端的完整 AI 应用方案。MIT 协议开源，代码在 GitHub 和 Gitee 上都能找到。