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), and justify (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.

Search the Prefab component library.

Use this tool to look up exact argument names, accepted values, and usage examples before writing component code. The skill covers patterns and layout; this tool has the API details.

The query matches component names and descriptions. Space-separated terms match independently, so "Card Badge Metric" returns all three.

When a query matches a small number of components, full details (docstrings, args, examples) are shown automatically. For broad searches, a compact listing is returned instead. Use detail to override this behavior.

Args: query: Filter by component name or description. Space-separated terms are OR-matched. detail: Show full docstrings and args. Defaults to automatic (detailed for ≤5 matches, compact otherwise). limit: Max components to return in detail mode (default 8). No limit in compact mode.