面向正式产品的生成式 UI

让界面和模型一起流式出现。

StreamCanvas 把 Claude 风格的生成式 UI 打造成一个真正可交付的开源产品: 更稳妥的渲染边界、可复用的 React 原语,以及一个可以直接验证交互方式的参考应用。

服务端与客户端共用 NDJSON 事件流协议
组件中的动作可以结构化回传到宿主应用
优先采用 SVG 方案,离线演示也能运行
价值

流式组件渲染

工具调用可以直接变成真实可操作的界面,而不是只能截图或回退成 Markdown。

价值

默认更安全

默认使用沙箱 iframe 渲染,同时支持经过 Schema 校验的 React 组件模式。

价值

应用与 SDK 一体化

一个仓库同时包含参考应用、核心协议、React SDK 和脚手架,方便团队直接评估。

平台层

流式协议层

类型化事件协议统一描述消息、组件创建、增量 HTML 帧、组件载荷与宿主回调。

平台层

渲染层

默认提供沙箱 iframe 渲染 HTML 组件,也支持 Schema 校验后的 React 原生组件。

平台层

动作桥接层

客户端工具、审批点与结构化载荷让生成式界面可以触发可信宿主动作,而不是任意 DOM 注入。

适合谁

把 AI 输出变成用户可以直接操作的界面,而不是只能阅读的文本。

StreamCanvas 适合 AI 产品团队、Agent 构建者、分析型 SaaS 以及希望加入生成式 UI 层的业务系统。你可以先用落地页和演示应用评估交互方式,再把底层包接入到自己的产品中。

语言访问

默认支持中英文,方便全球团队评估。

StreamCanvas 目前完整支持 English 和简体中文。站点会记住你的语言选择,并可在首次访问时把中文用户直接引导到中文版本。

搜索意图

如果你在找“开源 Claude 生成式 UI”,这里就是实际可用的答案。

StreamCanvas 不是对某个闭源实现做像素级复制,而是把真正有价值的交互模式开源化: 类型化事件流、沙箱组件渲染、React SDK、宿主动作桥接,以及正式部署模型。

阅读中文实现说明
应用场景

SaaS Copilot

将 AI 工作台直接嵌入现有产品,让用户在同一页面内提问、审批、微调并执行动作。

应用场景

运营工作台

渲染仪表盘、计划画布与运营简报,让模型在流式返回时就开始提供可操作界面。

应用场景

分析型体验

把 Prompt 转成图表、情景摘要与数据复核流程,并通过结构化回调连接宿主系统。

为运营和交付准备

在组件还没完全渲染完之前,就先让回答开始有用。

服务端通过一条流同时发送消息与组件事件,React 包负责消费这些事件、增量渲染界面, 并把组件动作安全地桥接回宿主应用。落地页、演示路由和 SDK 共用同一套协议模型。

01工具调用先规划界面结构
02服务端流式发送消息与组件帧
03沙箱渲染器把结构化事件发回宿主应用
架构8 分钟阅读

生产级生成式 UI 真正需要什么

一份面向正式产品的生成式 UI 架构指南,从事件流协议到渲染边界逐层拆解。

阅读文章
安全7 分钟阅读

如何保护流式组件渲染的安全性

解释为什么渲染策略决定风险边界,以及如何在不破坏交互体验的前提下收敛风险。

阅读文章
产品9 分钟阅读

设计用户真正能操作的 AI 界面

帮助团队判断生成式 UI 应该放进产品的什么位置,以及哪些场景仍然更适合传统界面。

阅读文章
FAQ

StreamCanvas 是什么?

StreamCanvas 是一个开源框架,用来构建可以在模型流式返回过程中生成真实组件、仪表盘与操作工作面的 AI 界面。

FAQ

StreamCanvas 会把原始 HTML 直接注入宿主页面吗?

不会。默认渲染器使用沙箱 iframe,并且会先对 HTML 进行清洗,再把内容展示到组件画布中。

FAQ

它可以自托管并集成到现有产品里吗?

可以。参考应用与服务端辅助包都支持自托管,React 包也可以直接对接你自己的后端服务。

先验证,再扩展

先从参考应用开始,再过渡到 SDK 集成。

体验中文工作台