Building Generative UIs with Python and Prefab

The Breakthrough

Jeremiah Lowin developed Prefab, a Python DSL that allows developers to compose interactive UIs by nesting context managers, which then serializes into a JSON protocol to render React components within MCP applications.

What Actually Worked

• Component Composition: Developers build interfaces by nesting Python classes as context managers, which map directly to Shadcn UI components.
• Reactive Data Binding: The RX class enables client-side interactivity and data synchronization between components without requiring the developer to write custom JavaScript.
• Protocol Optimization: The system was updated to stream Python code over the wire instead of JSON, resulting in a 70% reduction in payload size, which is then executed in a sandbox to generate the UI.
• Direct File Handling: By using an Upload component within an MCP app, users can bypass the agent's context window, avoiding the latency and token costs of having an agent manually retype file contents into an MCP server.

Context

Standard MCP tools force data through the agent's context window, which creates significant bottlenecks for tasks like file uploads or complex data visualization. Prefab was created to provide Python engineers with a way to ship functional UIs—specifically tables, forms, and charts—without forcing them to manage a full React frontend ecosystem. The framework treats the JSON protocol as the primary interface, allowing agents to generate or modify UIs dynamically, while the Python DSL serves as an ergonomic wrapper for the developer.

Notable Quotes

• "Because only the agent can reach an MCP server, a naive file upload tool makes the agent retype the file into the server character by character. Jeremiah Lowin calls it the world's most expensive copy paste operation."
• "The JSON is the actual point: a serializable UI is one an agent can generate, receive, or edit. The Python DSL, he says, was an accident he noticed later."

Content References

{"type": "tool", "title": "FastMCP", "url": "https://github.com/PrefectHQ/fastmcp", "context": "recommended"}, {"type": "tool", "title": "Prefab", "url": "https://prefab.prefect.io/", "context": "reviewed"}, {"type": "tool", "title": "MCP", "url": "https://modelcontextprotocol.io/", "context": "cited"}