Local Preview

prefab serve renders a PrefabApp as a self-contained HTML page and serves it locally. This lets you iterate on layouts, styling, and client-side interactions (state, forms, conditionals) without wiring up an MCP server or host application.

Quick Start

Create a Python file that defines a PrefabApp:

app.py

from prefab_ui.app import PrefabApp
from prefab_ui.components import Heading, Text

with PrefabApp(state={"greeting": "Hello"}, css_class="p-6") as app:
    Heading("Hello Prefab")
    Text("This is a local preview.")

Then serve it:

prefab serve app.py

This opens your browser to http://127.0.0.1:5175 with the rendered UI. All client-side behavior works — state binding, SetState/ToggleState actions, ForEach loops, conditional rendering, form submissions. The only thing that won’t work is CallTool, since there’s no MCP server to call back to.

Auto-Discovery

If your file has a single PrefabApp instance, prefab serve finds it automatically. If there are multiple, point to the one you want:

prefab serve app.py:dashboard

Live Reload

Pass --reload to watch for file changes and regenerate the page on save:

prefab serve app.py --reload

This watches all .py files in the same directory as your target file. When a change is detected, it re-executes the module and regenerates the HTML. Refresh your browser to see the update.

Options

Flag	Default	Description
`--port`, `-p`	`5175`	Port for the local server
`--reload` / `--no-reload`	`--no-reload`	Watch for file changes

If the requested port is in use, prefab serve automatically finds the next available one. See PrefabApp for the full API reference.

Get Started

Concepts

Apps

Running Prefab

Examples

Reference

Quick Start

Auto-Discovery

Live Reload

Options

​Quick Start

​Auto-Discovery

​Live Reload

​Options

Quick Start

Auto-Discovery

Live Reload

Options