现在的AI对话产品大多还停留在文字墙阶段。模型已经能写代码、画图表、调工具但用户看到的仍然是一行行往外蹦的Markdown文本——想看到表格、图表、可点击的卡片只能靠前端一遍遍补组件。TokUI 这个开源项目就是想把这个补丁式的现状从底层改掉。它由向量空间JBoltAI 团队开发并正式开源上线定位是面向AI的零依赖流式UI描述与渲染引擎核心思路是From Token to UI——让大模型输出的每个Token都能直接变成可交互的界面元素。一、AI对话为什么需要富UI大多数AI对话产品本质上还是文本输出前端强拼凑模型返回一段 Markdown前端用现成渲染器展示想在对话里插入图表、表格、卡片就单独写组件、接数据工具调用、推理过程往往直接扔一串 JSON 到聊天流里用户看不懂也点不了。这种模式有几个明显痛点体验割裂AI的能力在进化但展示形态还停留在纯文本时代用户只能看不能操作。开发成本高每个新的展示形态都要后端定义结构、前端实现组件重复造轮子。结构化输出与流式渲染错配JSON/HTML 必须等完整数据到达才能渲染而 AI 是逐 Token 输出两者节奏对不上。向量空间JBoltAI 在做企业级 AI 平台的过程中也很早就撞到这堵墙模型能力再强如果前端只是一堵文字墙交互体验就永远是残缺的。TokUI 就是为了解决这个问题而生。二、TokUI 是什么不只是UI组件库TokUI 不是简单的前端组件库而是一整套AI对话富UI的解决方案零依赖流式UI引擎前后端全部基于原生 API 实现不依赖第三方 npm 包体积小、易嵌入。极简 DSLDomain Specific Language专门为 AI 流式输出设计的一套 UI 描述语言比 HTML 更省 Token天然支持流式渲染。字符级状态机解析器首个 Token 到达即可开始渲染 DOM后续 Token 逐步填充内容实现真正的边生成边显示。官方给它的定位是全球首个面向 AI 的零依赖流式 UI 描述与渲染引擎。简单理解以前 AI 只会说人话有了 TokUIAI 还可以用 DSL画界面。三、TokUI 如何让AI对话长出界面1. 流式渲染首Token即可渲染不用等整段生成完TokUI 的 DSL 是线性字符串天然适配 SSE、WebSocket 等流式传输方式。前端基于状态机做字符级增量解析第一个 Token 到达就开始创建对应的 DOM 节点后续 Token 逐步填充属性、内容、子组件不需要等完整结构生成完毕就能看到界面一点点长出来。这意味着表格可以一行一行出现图表可以一根柱子一根柱子冒出来卡片内容可以一段一段填充进去。体验上和 AI 逐字输出文字完全一致——只不过现在逐字长出来的不是文字而是可交互的 UI。2. 极简 DSL比 HTML、JSON 更省 Token在按 Token 计费的时代输出成本直接影响项目预算。TokUI 的 DSL 从设计之初就考虑 Token 经济属性用最短标识符布尔属性只写键不写值表格一行就是一行数据一行 DSL 就能表达一行完整记录。对比一下HTML标签冗长嵌套多Token 消耗大JSON Schema大量引号、嵌套也偏冗余TokUI DSL线性、紧凑专为 AI 流式输出优化。同样渲染一张带斑马纹的表格加折线图TokUI 的 DSL 往往比 HTML、JSON 少很多 Token这对高频调用场景来说是实打实的成本优化。3. 零依赖轻量嵌入不污染你的项目TokUI 的前后端都基于原生 API 实现前端不引入任何第三方 npm 依赖图表采用纯 SVG 自绘制代码高亮、语法解析等核心功能全部自研。这对现有项目非常友好不需要重构技术栈不会引入版本冲突可以通过 CDN 引入也可以直接拷贝源码到项目中。向量空间JBoltAI 本身就大量服务 Java 技术栈的企业客户TokUI 的零依赖设计让它在嵌入各类业务系统时几乎没有排异反应。四、内置组件覆盖 AI 对话的典型场景TokUI 并不是只会画简单卡片而是自带一套完整的 AI 对话组件体系内置150 组件分为七大类基础展示、表单、表格、布局、图表、AI 对话专用模块等其中30 为 AI 对话专属组件对话气泡、推理过程折叠、工具调用卡片、Agent 状态展示、代码差异对比、Artifact 预览等。这些组件基本覆盖了当前主流 AI 产品的交互形态智能问答 / 助手问答气泡、引用来源卡片、建议操作按钮Agent / 工具调用工具调用卡片、执行状态展示、参数表单智能 BI / 分析动态图表、指标卡、可交互表格表单收集 / 业务操作动态生成的录入表单、查询表单。而且前后端共享同一套 DSL 语义后端用 Builder 链式生成 DSL前端 Parser 解析渲染三端模型、后端、前端语义对齐避免各说各话。五、安全与稳定面向生产环境的设计AI 动态生成 UI最大的隐患之一就是XSS 注入。TokUI 在架构层面做了几层防护DSL 文本中不携带任何可执行脚本事件处理器只支持前端预注册的命名函数DSL 中只能引用名称DOM 创建时自动过滤危险属性如 onclick 等仅在少数可信模块受控使用 innerHTML其余全部使用 textContent 等安全方式渲染。同时TokUI 还内置了容错与降级机制未识别组件或单个组件渲染异常不会导致整页崩溃对超长输入设置缓冲和嵌套深度上限避免前端资源被耗尽支持主题切换、深浅模式适配方便与现有系统视觉风格统一。这些设计让向量空间JBoltAI 在企业级私有化部署、政企场景中能够放心地把 TokUI 作为底层 UI 基础设施。六、TokUI 在向量空间JBoltAI 生态中的角色TokUI 并不是一个单打独斗的项目而是向量空间JBoltAI 整体生态中的重要前端基建在 RAG / AgentRAG 场景中TokUI 用于实时展示推理步骤、工具调用结果、知识来源引用在智能问数 / 自动报表场景中TokUI 用于流式生成指标卡、图表、数据表格在业务流程自动化场景中TokUI 用于动态生成表单、操作卡片实现对话即操作。从架构视角看向量空间JBoltAI 提供的是一整套AIGSAI Generated Service开发范式从模型接入、推理编排到前端 UI 渲染形成完整闭环。TokUI 则是这闭环中的最后一公里——把模型的能力变成用户真正看得见、摸得着的界面。七、适合谁用怎么接入TokUI 已经采用MIT 协议开源对个人和企业都无使用门槛。大致有几类典型使用场景正在开发 AI 对话产品的团队需要在聊天流中嵌入图表、表格、表单等富 UI不想从零实现一套 UI 渲染框架。已经在使用向量空间JBoltAI 的企业用户TokUI 与向量空间JBoltAI 的后端 SDK 深度打通可以直接用 DSL 描述界面由前端统一渲染有利于统一 UI 协议降低前后端协作成本。前端开发者 / 技术决策者需要评估一套新的 AI UI 方案关注 Token 成本、安全、可维护性。接入方式也比较简单前端引入 TokUI 的渲染器挂载到指定容器后端使用 TokUI Builder目前 Node.js 已实现其他语言 SDK 规划中生成 DSL通过 SSE 或 WebSocket 推送 DSL 流前端解析并渲染。八、总结从文字对话到流式富UI对话TokUI 的开源对 AI 对话产品来说是一次交互方式的升级AI 不再只是输出文字而是可以输出界面用户不再只是看文字而是可以在对话中直接操作、选择、确认开发者不再需要为每种 UI 形态单独写组件而是通过统一的 DSL 描述界面。从更宏观的视角看向量空间JBoltAI 通过 TokUI把From Token to UI这条路真正走通模型的能力、后端的编排、前端的展示第一次在流式富 UI这条主线上对齐。如果你在做 AI 对话、智能 Agent、自动报表等应用TokUI 提供了一个值得认真评估的新选项。项目已正式上线开源协议 MIT零依赖可直接克隆集成。更多细节和在线演示可以在向量空间JBoltAI 的 TokUI 官网中查看。