你用 ChatGPT 或者任何 AI 助手聊过天大概率遇到过这种情况问它一个需要表格或者结构化数据的问题它先是一大段文字铺垫然后给你一个排版乱的 Markdown 表格或者干脆让你自己去理解文字描述。想让它直接出一个漂亮的、可交互的界面别想了等着它一段一段吐完再说。这不是大模型的能力问题而是前端渲染那层出了瓶颈。大模型是一个 Token 一个 Token 往外输出的传统的前端框架——不管你用的是 React、Vue 还是别的什么——都得等整个响应回来才能渲染完整页面。就算你做了流式显示也不过是逐字显示纯文本跟打字机效果差不多。TokUI 就是为解决这个问题来的。一、TokUI 是什么TokUI 的定位很明确全球首个专为 AI 流式输出设计的零依赖 UI 渲染框架。它的口号是 “From Token to UI”——大模型每输出一个 TokenTokUI 就能立刻把它变成对应的 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/tokuiCDN 引入也只需要一行scriptsrchttps://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 上都能找到。
AI 输出只能显示纯文本？TokUI 让大模型边说边画界面
发布时间：2026/7/30 16:41:20
你用 ChatGPT 或者任何 AI 助手聊过天大概率遇到过这种情况问它一个需要表格或者结构化数据的问题它先是一大段文字铺垫然后给你一个排版乱的 Markdown 表格或者干脆让你自己去理解文字描述。想让它直接出一个漂亮的、可交互的界面别想了等着它一段一段吐完再说。这不是大模型的能力问题而是前端渲染那层出了瓶颈。大模型是一个 Token 一个 Token 往外输出的传统的前端框架——不管你用的是 React、Vue 还是别的什么——都得等整个响应回来才能渲染完整页面。就算你做了流式显示也不过是逐字显示纯文本跟打字机效果差不多。TokUI 就是为解决这个问题来的。一、TokUI 是什么TokUI 的定位很明确全球首个专为 AI 流式输出设计的零依赖 UI 渲染框架。它的口号是 “From Token to UI”——大模型每输出一个 TokenTokUI 就能立刻把它变成对应的 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/tokuiCDN 引入也只需要一行scriptsrchttps://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 上都能找到。
)
