generate_prefab_ui
Execute Prefab Python components in a sandbox to render interactive web UI panels with reactive state, charts, and responsive layouts.
Instructions
Execute Prefab Python code in a sandbox and render the result.
The code runs in a Pyodide WASM sandbox with full Python support.
Import everything you use. Use the components tool to look up
available components and their import paths.
Always use PrefabApp as the outermost context manager — this enables streaming so the UI renders progressively as code is written:
from prefab_ui.components import Column, Heading, Text, Row, Badge
from prefab_ui.app import PrefabApp
with PrefabApp() as app:
with Column(gap=4):
Heading("Dashboard")
with Row(gap=2):
Text("Revenue: $1.2M")
Badge("On Track", variant="success")For interactive UIs, pass initial state as a dict and use .rx
on stateful components for reactive bindings:
from prefab_ui.components import Column, Slider, Text
from prefab_ui.app import PrefabApp
with PrefabApp(state={"threshold": 50}) as app:
with Column(gap=4):
slider = Slider(value=50, min=0, max=100, name="threshold")
Text(f"Threshold: {slider.rx}%")slider.rx produces {{ threshold }}, a template expression
that resolves against client-side state. Use Rx("key") directly,
or apply pipe filters: Rx("balance").currency() produces
{{ balance | currency }}.
Available pipes: upper, lower, currency, length, json, round(n), default(val), truncate(n).
Charts live in prefab_ui.components.charts:
from prefab_ui.components.charts import BarChart, ChartSeries
BarChart(
data=[{"month": "Jan", "rev": 100}, {"month": "Feb", "rev": 200}],
series=[ChartSeries(data_key="rev", label="Revenue")],
x_axis="month",
)Values passed via data are available as global variables in the
code. Python features like loops, f-strings, and comprehensions all
work.
Layout patterns:
Card sub-components (CardHeader, CardContent, CardFooter) have built-in padding. Don't add extra padding to them. For a simple card without sub-components, use
Card(css_class="p-6").Use
Grid(columns=N, gap=4)for equal-width cards or panels. Grid handles sizing automatically — no flex classes needed. For unequal widths, pass a list:Grid(columns=[2, 1], gap=4)gives a 2:1 ratio.Row is for inline elements (badges, icons + text, buttons). Prefer Grid when children should have equal or proportional widths. Row does not wrap by default.
Column and Row accept
gap(Tailwind scale: 1-12),align(cross-axis), andjustify(main-axis) as native props — prefer these over raw css_class for spacing.Use
css_class="overflow-hidden"on containers if chart or content edges should clip to the container boundary.
Args: code: Python code that builds a Prefab component tree. data: Values injected as variables in the sandbox namespace. sandbox: A Sandbox instance. If not provided, a new one is created on each call.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | ||
| data | No |