使用者痛点的观点是，从文本到界面的困境

当你在 LLM 聊天场景里提问诸如“北欧风室内设计”时程序往往会输出一大段文字：明厅设计采用落地窗搭配浅色木地板…，厨房以白色橱柜为主。读者需要逐行阅读、脑中拼凑画面耗时耗力。说到常见痛点包括，

• 长文本阅读导致信息量过大，易遗漏关键信息。
• 缺乏视觉锚点，无法快速定位所需内容。
• 无法即时交互，想要进一步探索只能重新发起请求。
• 纯文本或 HTML 输出难以约束结构，导致前端渲染不稳定。

GenUI 的主要思路：让 LLM 输出可直接浏览、点击、交互的界面

LLM 的纯文本输出信息密度高，却缺少层次与视觉导向。UI协议，将 LLM 输出转化为可视化组件，实现更高效的信息获取。

Spec 协议的优势

• 至于结构扁平。避免嵌套过深，使 LLM 更容易一次性理解完整布局。
• 至于易于增量更新。适合流式渲染，无需等整个 JSON 完成后才显示。
• 与 Zod Schema 搭配使用。实现编译期与运行期双重校验，提高鲁棒性。

从 Stream 到组件的完整旅程

LLM Stream → chunk-processor → Spec 提取 → VtuRenderer → 使用者交互 → 新一轮对话

组件库架构

为了让 Spec 能被直接渲染，我们建立了一个状态驱动、无外部依赖的组件库。每个组件通过 Props 接收数据，通过事件向外通信：

index.ts // 入口文件
meta.jsonc // 定义与人类阅读兼容的元数据
states/*.ts // 状态及其驱动方法
config/*.ts // 所需数据或配置

ImageGallery 示例 Props：

// Zod Schema 定义
export const ImageGalleryItemSchema = z.object({
id这方面。z.string.min,src: z.url,title: z.string,caption: z.string
});export type ImageGalleryItem = z.infer;怎么说呢，export interface ImageGalleryProps {
从id来看。string，images: ImageGalleryItem;onImageClick?: => void，}

chunk‑processor：流式 Spec 抽取与修复

1. 检测：扫描流式文本寻找 json 标记。
2. 提取：用 jsonrepair 修复不完整 JSON。
3. 验证：检查是否符合 { “root”: … ,“elements”: …} 的结构，
4. 包装：转换为 模板供 MarkStream‑Vue 使用。

至于示例，LLM 在中途输出可能出现 “{ \"root\":\"root\"。\"elements\":{\"root\":{\"type\":\"Col””，chunk‑processor 会持续修复并最终提供合法 JSON 给渲染器。

流式渲染策略

Avoiding dreaded “空白等待”。我们采用按顺序生成 Spec 属性的提示词，例如先输出 type、id、title，再逐步补充 images 数组。话说回来，这样即使 images 尚未完全到达。界面已能呈现骨架状态，让使用者知道内容正在生成中。说起来，因为第一个完整的 ImageItem 到达。图片开始逐张渲染，这样就能实现真正的流式体验。

使用者交互处理方式

• P1：单点交互——直接由 LLM 提供上下文，如点击图片后将“明厅设计”拼接至下一轮对话。
• P2：表单/容器——需要渲染器注入响应式状态或事件监听。以便捕获多选框选择等复杂交互，并同步至上下文。老实说，
• P3：弹窗/长任务——视需求拆分成子对话流程。以保持整体对话连贯性，

所有交互事件都，这样就能实现灵活且鲁棒的对话闭环。

容错设计原则

• Zod 校验：LMM 输出若缺字段或类型错误，在渲染前被拦截；仅合法 Spec 才进入 UI 渲染流程。
• Denoise 与降级：`chunk‑processor` 对不完整 JSON 做补全； 若仍失败，则以占位符或简易布局展示，以免 UI 崩溃。
• Mediation Layer：`vtu-renderer` 对事件捕获做防御性编程，即使某个组件异常也不会影响整体聊天流程。

未尽之路 & 实践挑战

A. 虚拟滚动与长对话性能：每条消息包含工具调用、思考过程和回答块。高度差异导致高度计算困难，需要精细调整滚动算法以保持性能稳定。B. 自定义组件 性：虽然结论可行。但需具备强壮 Renderer 与规范层支持低码场景，否则自定义 难以落地。C. AI 与人类协作模式转变：当 AI 能提供可操作界面而非单纯文字时人机协作将发生根本变化，这正是 GenUI 的终极价值所在。未来将继续深入分享相关技术与实践经验。

关键词《GenUI》 | 《Spec 协议》 | 《streaming rendering》 | 《Zod 校验》 | 《虚拟滚动》