Skip to main content
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 Column, Heading, Text

with Column(gap=3) as view:
    Heading("Hello Prefab")
    Text("This is a local preview.")

app = PrefabApp(view=view, state={"greeting": "Hello"})
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

FlagDefaultDescription
--port, -p5175Port for the local server
--reload / --no-reload--no-reloadWatch for file changes
If the requested port is in use, prefab serve automatically finds the next available one.

​
PrefabApp

PrefabApp is a pure data object describing a complete UI application. It holds the view tree, initial state, reusable definitions, and external asset URLs. 
from prefab_ui.app import PrefabApp

app = PrefabApp(
    view=view,
    state={"count": 0},
    stylesheets=["https://fonts.googleapis.com/css2?family=Inter"],
    scripts=["https://cdn.example.com/chart.js"],
)
FieldTypeDescription
viewComponentComponent tree to render
statedictInitial client-side state
defslist[Define]Reusable component definitions
stylesheetslist[str]External CSS URLs to load
scriptslist[str]External JS URLs to load
connect_domainslist[str]Domains to allow in CSP connect-src

​
Methods

app.html() returns a complete, self-contained HTML page with the Prefab renderer and all application data baked in. This is what prefab serve uses internally, and it’s also what any transport integration (FastMCP, FastAPI, etc.) ultimately delivers. app.to_json() returns the Prefab wire-format envelope — a dict with version, view, state, and defs. This is the data structure the renderer consumes. app.csp() computes Content Security Policy domains from the app’s asset configuration. It merges the renderer’s base CSP with origins extracted from stylesheets, scripts, and connect_domains.