01实践者中心 · Generative UI
我们构建 AI 界面 真正上线。
为需要将 AI 功能投入生产的团队提供 Generative UI 咨询与开发——不是演示。流式组件、工具调用流程、智能体工作流，端到端交付。
02原则
What is generative UI?
Generative UI is interfaces produced by language models at runtime. Components are streamed from LLM output and rendered as real UI, not text. The model picks the form alongside the content: a chart for numbers, a form for input, a list for choices.
模型选择形式
数字用图表，输入用表单，选择用列表。
组件来自你的组件库
模型不写 HTML 或 JSX —— 它从你的组件库中挑选。
流式渲染而非文本
交互元素以真实 UI 流式出现，而不是文本。
通过提示词变更
通过编辑提示词或目录即可发布变更。
Traditional UI
Generative UI
Form chosen by the designer at build time
Form chosen by the model at inference time
Static templates, deterministic outcomes
Runtime components, probabilistic outcomes
Same screen for every user, every request
Different shape per user, per request
Changes ship through a release cycle
Changes ship by editing the prompt or the catalog
04领域指南
Field guide
Six tracks across the generative-UI landscape. Pick by where you are — engineer mid-build, designer mapping patterns, PM evaluating, or executive sizing the bet.
Runtimes & SDKs
Vercel AI SDK, CopilotKit, Tambo, Thesys C1, A2UI — how each one streams components, where the seams are, and what production looks like.
Patterns & components
Interaction patterns for LLM-rendered UI — disclosure, repair flows, tool confirmations, and the design questions GenUI raises.
Designers · EngineersProduction engineering
Observability, performance, testing, accessibility. What it takes to put a streaming, LLM-rendered interface in front of users and keep it up.
EngineersRAG & tool use
Retrieval-augmented generation, tool calling, agent workflows. Patterns that move generative UI past static catalogs into real action.
EngineersState of the field
Market state, vendor landscape, adoption curves. What is and isn't shipping in production right now — for evaluation, scoping, and bets.
PMs · Executives · ConsultantsGetting started
What generative UI is, who it's for, when it makes sense to adopt. The entry-level primer for anyone new to the term.
Written for engineers, designers, product managers, and executives working on or evaluating generative UI. Topic-organised navigation and per-role filters are on the roadmap.
05现状
State of generative UI — runtimes at a glance
Five production-grade options, compared on stack, streaming model, openness, and maturity.
| 运行时 | 成熟度 | 摘要 |
|---|---|---|
| Vercel AI SDK | Mature | Streaming React/Vue components with first-class tool use. The default for new Next.js and Nuxt apps. |
| CopilotKit | Maturing | Drop-in copilot hooks and UI primitives. Strong for adding an assistant to an existing app. |
| Tambo | Early | Component catalog the model picks from. Useful when the design system is the unit of generation. |
| Thesys C1 | Maturing | Hosted API that returns ready-to-render UI. Trades infra ownership for time-to-first-screen. |
| A2UI (Google) | Early | Open JSON schema for renderer-agnostic UI from agents. Cross-runtime, very early. |
开源
零闪烁的流式 Markdown
普通的 innerHTML 渲染器每次收到 token 时都会重建 DOM——导致闪烁、焦点丢失和布局抖动。Generative DOM 对 AST 进行差量比对，仅修补发生变化的部分，以最多减少 90 倍 DOM 操作的代价，实现流畅、无障碍的流式输出。
user显示 Q1 销售额
modeltool · revenueChart({range:"Q1",currency:"RUB"})
dom<RevenueChart/> — 已挂载
dom<FilterPanel/> — 已挂载
diff仅变更的节点 · 无闪烁
07开源
LLM 真正能拼装的 Web 组件
100+ 个与框架无关的标签 —— 聊天界面、图表、决策矩阵、教学小部件 —— 每个组件都自带经校验的 meta.json：props、事件、slots、主题、依赖关系全部以机器可读 JSON 暴露。模型看到的目录与开发者一致，能为即将渲染的数据挑选合适的原语。
目录：100+ 标签 · 每个都有 meta.json。