Skip to main content
Prefab Prefab is a JSON component format that renders to real interactive frontends. Describe a UI — from an MCP server, a ChatGPT app, an AI agent, or a Python script — and Prefab renders it as a live React application with forms, tables, state management, and real-time interactivity.
Every example in the Prefab docs — including this one! — is rendered with Prefab from the Python code.
Prefab is made with 💙 by Prefect.

​
Why Prefab

Every frontend framework assumes a human wrote the code and a server is running. Prefab assumes neither. It’s a JSON component format that anything can target: an MCP server, a ChatGPT app, an AI agent mid-conversation, or a Python developer who doesn’t want to touch JavaScript. The renderer compiles that JSON to real React — production UI components with state management, forms, data tables, and declarative interactivity. And it runs as a self-contained static bundle, no backend required at runtime. Prefab originated as FastMCP’s Apps system and has been extracted as a standalone library so it can serve any backend. The Python side has no transport dependencies — it works with MCP servers via FastMCP, with REST APIs via FastAPI, or with anything else that can return JSON.

​
How It Works

The core idea is a pipeline: JSON → React. For Python authors, it’s Python → JSON → React.
  1. A component tree is described — in Python via the DSL, or as raw JSON from any source
  2. The tree serializes to Prefab’s JSON wire format
  3. A React renderer (shipped as @prefecthq/prefab-ui on npm) compiles the JSON into a live interface
State flows through templates. When you write {{ query }}, the renderer interpolates the current value of query from client-side state. Actions like ToolCall and SetState update that state, keeping the UI reactive.

​
Installation

pip install prefab-ui
Requires Python 3.10+. The only runtime dependency is Pydantic.

​
What’s in the Box

Components

35+ components: layout, typography, forms, data display, and interactive elements. Nest them with Python context managers.

Actions

Declarative interactivity — state updates, server calls, navigation, and toast notifications. Chain them with lifecycle callbacks.

Patterns

Common recipes: interactive search, form handling, data tables, and confirmation dialogs.

Testing

A headless Simulator for testing interactive UIs without a browser. Execute actions, track state, query the component tree.