如果你正在做一款 AI 对话产品大概率遇到过这些场景Agent 调用了三个工具完成了一个任务你想把调用过程可视化地展示给用户AI 生成了数据分析报告但用户看到的还是一堵 Markdown 文字墙你想在对话里直接弹出一个表单让用户填写却发现 Markdown 根本不支持交互组件。这些痛点的根源是同一个AI 时代缺少一种为流式生成可交互而生的 UI 表达介质。TokUI 是 JBoltAI 团队开源的流式 UI 描述与渲染引擎内置 150 组件覆盖 AI 对话产品的全部交互形态。采用 MIT 协议零运行时依赖。本文从六个真实场景出发讲清楚 TokUI 能用在哪里、怎么用。一、核心场景AI 对话产品的富 UI 回复这是 TokUI 的主场。一个真实的 AI 回复不再是纯文本而是一组流式渲染的对话组件[bubble role:ai model:GPT-5] [think tt:思考过程]用户问的是销售数据需要先查询再可视化…[/think] [tool-call name:sales_query status:success id:call_001] [p 已从销售库提取Q2数据耗时 0.8s。] [/tool-call] [md]根据查询结果近6个月销售趋势如下[/md] [chart t:line tt:近6月销售 area l:1月,2月,3月,4月,5月,6月 d:42,55,48,70,82,95] [source n:1 tt:2026 Q2销售报表 u:#] [msg-actions copy regenerate like dislike] [/bubble]这段 DSL 流式渲染后用户看到的是一个完整的 AI 回复卡片顶部是可折叠的思考过程中间是工具调用状态卡片然后是数据分析文字接着是一张实时长出的折线图底部是引用来源和操作按钮。全部边生成边渲染不需要等整条消息输出完毕。TokUI 内置 30 AI 对话专属组件按功能分类组件类别具体组件场景对话气泡bubble、toolbar、msg-actions消息容器、工具条、复制/重新生成/赞踩思考过程think、think-chain、think-step可折叠推理、分步推理链工具调用tool-call、agent工具调用卡片、智能体协作执行计划plan、plan-step任务计划清单、步骤追踪代码相关diff、terminal、sandbox代码差异、终端输出、可执行沙箱Artifactartifact、artifact-code、artifact-preview代码槽实时预览槽引用与建议source、quote、quick-reply、suggestions信息来源、快捷回复、建议卡片开发工具test-result、commit、file-tree测试报告、Git 提交、文件树对话框架welcome、conversations、chat-input、attachments欢迎页、历史会话、输入框、附件这意味着接入 TokUI 后AI 对话产品的前端 UI 开发从手写每个组件变成AI 直接输出组件描述。产品迭代的瓶颈从前端开发转移到 AI 的 DSL 生成能力上。二、AI Agent 与工具调用的实时可视化Agent 在执行多步任务时每一步都在流式演进。用户最想知道的是Agent 现在在干什么、进度如何、结果怎样。传统做法是用一个转圈动画加一段文字正在执行...用户只能等。TokUI 的做法是让 Agent 的每一步都实时可见[plan tt:部署分析任务] [plan-step id:s1 status:done tx:数据查询 desc:从销售库提取Q2数据] [plan-step id:s2 status:active tx:趋势分析 desc:计算环比和同比] [plan-step id:s3 status:pending tx:报告生成 desc:汇总分析结论] [/plan]每个 plan-step 支持 status 流转pending 到 active 到 done 或 error。配合upd组件可以实现动态状态更新[upd id:s2 status:done] [upd id:s3 status:active]用户看到的是一个实时刷新的执行计划第一步打勾、第二步转圈、第三步等待。当 Agent 调用工具时tool-call 组件展示工具名称、参数、耗时和返回结果。当多个 Agent 协作时agent 组件展示协作关系和状态流转。这种可视化的工程价值在于信任建设。用户能看到 Agent 的完整决策链路而不是面对一个黑盒。在 JBoltAI 的实践中Agent 交互过程可视化后用户对 AI 结果的接受度显著提升——因为用户理解了为什么是这个结果而不是只看到结果是什么。三、数据分析与 BI 报告的流式生成让 AI 直接画出一份报告而不是写出一份报告[card tt:2026 Q2销售分析] [row] [col span:3][stat tt:总营收 v:¥1.2亿 trend:up][/col] [col span:3][stat tt:同比增长 v:18% trend:up][/col] [col span:3][stat tt:客单价 v:¥398 trend:up][/col] [col span:3][stat tt:退货率 v:2.1% trend:down][/col] [/row] [chart t:bar tt:分渠道营收 c:4f46e5,10b981,f59e0b] [table stripe] [thead cols:渠道,营收,占比,趋势/r] [tbody] [tr 线上,¥4800w,40%,↑22%] [tr 线下,¥3600w,30%,↑8%] [tr 分销,¥1800w,15%,↓5%] [/tbody] [/table] [callout t:success tt:结论 tx:线上渠道增长强劲] [/card]报告边生成边呈现指标卡先到、柱状图逐根长出、表格逐行刷入、结论最后弹出。用户不需要等整份报告生成完毕才开始阅读。TokUI 的图表组件覆盖 9 种类型bar、line、pie、radar、donut、scatter、gantt、funnel、gauge。全部用纯 SVG 实现零第三方依赖。在流式过程中图表的半成品预览让用户看着数据点逐个长出来——这是真流式体验的极致体现。四、表单收集与 CRUD 管理AI 可以在对话中直接抛出表单引导用户填写并提交[card tt:快速添加成员] [form sub:onAddMember] [row] [col span:6][input l:姓名 req][/col] [col span:6][input t:email l:邮箱 req][/col] [/row] [select l:角色] [opt v:admin tx:管理员] [opt v:user tx:普通用户] [/select] [textarea l:备注 rows:4] [btn tx:添加 v:primary sub:onAddMember] [/form] [/card]用户提交后前端通过TokUI.registerHandler(onAddMember, fn)预注册的处理器接收表单数据。DSL 本身不含可执行代码——sub:onAddMember只是指向处理器名真正的逻辑由前端注册决定。表单、表格、栅格、分页、下拉选择组合出完整的后台 CRUD 子页面。全部可流式渲染、可交互。这意味着 AI 对话产品不只是问答工具而是可以在对话中直接构建可操作的微型应用。这种能力对于企业级 AI 产品尤其重要。当 Agent 完成一个分析任务后可以紧接着输出一个操作表单让用户确认下一步动作形成分析到决策到执行的完整闭环。五、实时数据看板与动态更新TokUI 的upd组件可以动态更新已渲染元素的值结合 SSE 非常适合实时数据看板[card tt:服务器监控] [progress id:cpu v:35 l:CPU使用率] [progress id:mem v:62 l:内存使用率] [chart t:gauge id:net v:45 tt:网络吞吐] [chart t:line id:traffic tt:实时流量 anim] [/card] [upd id:cpu v:67] [upd id:cpu v:89 status:error] [upd id:mem v:78]CPU 使用率实时跳动、流量图逐点增长、指标超阈值自动变红。用户看到的是一个活的数据看板而不是静态截图。这个场景的关键技术点是upd 组件只更新目标元素的值和状态不触发整棵 DOM 树重渲染。性能开销极低单次更新耗时在毫秒级。六、低代码平台与跨语言 UI 协议TokUI 的协议设计天然兼顾通用性。同一套 DSL 既可以由 AI 生成也可以由可视化拖拽编辑器生成、由配置中心下发、由多端运行时消费。三个延伸场景低代码平台拖拽组件生成 DSL存入数据库多端渲染。DSL 是纯文本协议存储和传输成本极低。远程 UI 配置服务端下发 DSL 字符串客户端无需发版即可更新界面。对于 SaaS 产品做 A/B 测试、灰度发布非常方便。跨端 UI 协议Web、Electron、桌面端共用一套描述语言。后端 SDK 正在多语言化Node.js 已实现Python、Rust、Java、Go、C# 在规划中。无论后端是什么技术栈只要输出符合 TokUI DSL 规范就能驱动同一个前端。这意味着 TokUI 正在成为一层语言无关的 UI 中间件——AI 生成 UI 只是它的第一个场景但不是唯一场景。与 JBoltAI 的协同价值TokUI 是 JBoltAI 团队的开源前端 UI 项目与企业级 Agent 平台形成前后端协同JBoltAI 后端负责 Agent 的推理、工具调用、数据治理和执行环境。当 Agent 需要向用户展示结果时后端通过 TokUIBuilder 生成 DSL经 SSE 推送到前端TokUI 引擎实时渲染为富 UI。这条链路的完整闭环是用户提问到 JBoltAI Agent 推理到工具调用到 TokUIBuilder 生成 DSL 到 SSE 推送到 TokUI 渲染为可交互界面。从 Token 到 UI全程流式无需等待。对于正在构建 AI 对话产品的团队TokUI 解决的是最直接的前端痛点不再需要为每个 AI 功能手写一套前端组件AI 输出什么前端就渲染什么。体验与上手TokUI 已正式开源采用 MIT 协议零运行时依赖。本地运行只需两条命令即可启动 SSE 演示服务器和 Vite 开发服务器查看 150 组件画廊和 AI 对话演示。如果正在构建 AI 对话产品、实时数据看板、低代码平台或者只是想看看AI 生成的界面应该长什么样TokUI 值得一试。