3分钟认识Prefab：Python生态首个真正好用的生成式UI框架，连AI Agent都能上手
3分钟认识Prefab：Python生态首个真正好用的生成式UI框架，连AI Agent都能上手
Prefab 是一个基于 Python 的生成式UI框架：只用一个普通的 Python 文件，就能做出数据仪表盘、交互表单和 AI Agent 界面，全程不碰 JavaScript、HTML 或前端构建工具。它自带 100+ 生产级组件，UI 既可以由人类编写，也可以由 AI Agent 现场生成。
什么是Prefab：一个Python生成式UI框架
Prefab 是「用 Python 构建富交互界面」的UI框架，官方口号是 The generative UI framework that even humans can use（连人类都能用的生成式UI框架），详见 README.md。
它的核心链路非常直白：
Python DSL → JSON 协议 → React 渲染器
- Python 侧：用
with语句层层嵌套组件来描述界面，编译成一份标准 JSON 组件树； - 渲染器侧：仓库内置了一个可打包成单个 HTML 文件的 React 应用，读取 JSON 后渲染出完整可交互的界面——状态、数据绑定、动画全部在浏览器端完成，你不需要写一行 JavaScript。
整体架构设计可以在 VISION.md 中阅读。
为什么说它是「生成式UI」？
传统 Python UI 框架都假设背后有一个常驻后端可以调用，而 Prefab 的产物是可序列化、可校验的 JSON 协议，这意味着：
- 人类可以提前声明式地写死界面；
- AI Agent 可以在运行时动态生成界面——协议格式固定、可安全地在沙箱里执行；
- 同一份 UI 代码可以放进 MCP Apps、FastAPI、浏览器等不同宿主。
这也是「连 AI Agent 都能上手」的底层原因。
60秒快速上手：安装Prefab并跑通第一个应用
一键安装步骤
要求 Python 3.10+：
pip install prefab-ui
安装完成后可运行 prefab version 验证。
本地预览最快配置方法
官方 Quickstart 推荐用 prefab serve 做本地预览 docs/getting-started/quickstart.mdx：
prefab serve app.py --reload
浏览器会自动打开 http://127.0.0.1:5175，--reload 会监听文件变化——每次保存 Python 文件，UI 立即重新生成。「写 Python → 保存 → 看到效果」就是它的开发循环，预览机制细节见 docs/serve.mdx。
Hello World：30行Python写出一个交互式卡片
Prefab 的「hello world」不是一行文字，而是一张输入实时联动的卡片：
from prefab_ui.components import *
from prefab_ui.rx import Rx
name = Rx("name").default("world")
with Card():
with CardContent():
H3(f"Hello, {name}!")
Input(name="name", placeholder="Your name...")
记住 3 个要点即可：
- 上下文管理器嵌套：
with语句表达组件层级，比手写 JSON 省 token，天然适合流式生成； - 响应式状态
Rx：Rx("name")是客户端状态键的引用，放进 f-string 后会编译成{{ name }}。在输入框里打字，标题和徽标实时更新——全程无服务器往返； - 零 JavaScript：所有交互逻辑都跑在浏览器渲染器里。
组件展示：100+组件开箱即用，图表数据表格都有
Prefab 内置 100+ 生产级组件，按用途大致分为四类：
| 类别 | 代表组件 |
|---|---|
| 布局 | Row、Column、Grid、Card、Container |
| 表单控件 | Input、Select、Checkbox、Slider、DatePicker、Combobox |
| 数据可视化 | BarChart、LineChart、RadarChart、Sparkline、DataTable |
| 反馈与交互 | Dialog、Tooltip、Toast、Carousel、Progress |
组件源码位于 src/prefab_ui/components/。命名沿用了 shadcn/ui 的惯例（Card、Badge、Alert），图表 API 参照 Recharts 风格——这些命名对大语言模型非常「眼熟」，所以 Agent 生成代码的成功率更高。
下图就是一个纯 Python 写出的交互式仪表盘，包含环形进度、雷达图、柱状图、数据表格、开关、轮播等多种组件：
对应源码见 examples/hitchhikers-guide/dashboard.py。
生成式UI实战：让AI Agent现场生成仪表盘
这是 Prefab 的杀手锏。流程是一条清晰的流水线：
用户提示词 → LLM 生成 Prefab Python 代码 → 沙箱安全执行 → 渲染为实时界面
- 沙箱基于 Pyodide（编译为 WebAssembly 的 CPython）运行，启动后撤销文件系统与网络权限，可安全执行 AI 生成的代码，实现位于 src/prefab_ui/sandbox/；首次调用约 2 秒冷启动，之后每次执行只需毫秒级；
- 官方示例服务器 examples/generative-ui/server.py 提供两个工具：
execute_ui（执行生成的代码）和components（组件库检索）。LLM 写代码前会先自己查组件用法，模式详解见 docs/concepts/generative-ui.mdx； - 官方实测：LLM 仅凭工具 docstring + 组件检索工具，就生成了 200 行、含图表/数据表/响应式控件的多区块仪表盘。
对新手来说这意味着：你不必背下 100+ 组件的 API，用自然语言描述需求，Agent 会自己查组件、自己写界面。
三大真实使用场景：MCP、FastAPI、Agent生成
| 场景 | 说明 |
|---|---|
| MCP Apps | 工具返回组件树，由宿主应用渲染成沙箱 iframe；是 FastMCP 的原生组成部分，见 docs/running/fastmcp.mdx |
| REST / FastAPI | 接口直接返回 Prefab 组件，交互通过 HTTP 回调更新界面 |
| 生成式UI | Agent 动态生成 UI，用户只看到针对自己问题的定制界面 |
三种场景共用同一套「Python → JSON → 渲染器」核心链路，只是传输层不同，一份 UI 代码可跨场景复用。
开始上手的3个核心概念
跑通 Quickstart 后，理解这 3 个概念就能独立开发，完整讲解见 docs/concepts/core-concepts.mdx：
- State（状态）：浏览器端的键值存储，表单控件每次输入自动同步；
- Expressions（表达式）：
{{ key }}读取状态并自动更新，支持运算符与管道（如| currency格式化金额）； - Actions（动作）：用户交互时触发。客户端动作（
SetState、ShowToast等）即时生效，CallTool则回调服务器。
这类框架适合谁？
- 🎯 Python 后端工程师：做管理后台、工具页面、数据报表时不必切换前端技术栈；
- 🤖 AI / Agent 开发者：给 MCP 服务器加交互界面，或让 Agent 即时生成界面；
- 📊 数据分析师：把查询结果变成可交互图表，只需几行 Python。
想继续深入，可以看 docs/components/ 的完整组件参考、docs/styling/themes.mdx 的主题系统，以及 examples/ 下的真实示例合集（预算分配器、表单、幻灯片、PyPI 下载看板等）。
📌 最后提醒：Prefab 是 1.0 之前的活跃项目，API 仍在快速演进，生产使用建议锁定版本，升级前阅读发布说明。