如果你正在做一款 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 | 代码差异、终端输出、可执行沙箱 |
| Artifact | artifact、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 值得一试。