ContextQMD
Back to Fastmcp

Generative UI

docs/apps/generative.mdx

3.2.45.2 KB
Original Source

import { VersionBadge } from '/snippets/version-badge.mdx'

<VersionBadge version="3.2.0" />

<video src="/apps/images/generative-ui.mp4" autoPlay loop muted playsInline style={{width:"100%", borderRadius:"8px", marginBottom:"1rem"}} />

With Generative UI, the LLM writes the UI code at runtime. Instead of calling a pre-built tool with a fixed shape, the model writes Prefab Python tailored to the current data and request. The user watches the UI stream in as the model generates it.

python
from fastmcp import FastMCP
from fastmcp.apps.generative import GenerativeUI

mcp = FastMCP("Prefab Studio")
mcp.add_provider(GenerativeUI())

One provider registers three things:

  • generate_prefab_ui — a tool that accepts Python code, executes it in a Pyodide sandbox, and renders the result as a Prefab app
  • search_prefab_components — a tool the LLM uses to discover what components are available
  • The streaming renderer — a ui:// resource with browser-side Pyodide that progressively renders partial code as the LLM generates it

How it works

When the LLM calls generate_prefab_ui, it writes Prefab Python code into the code argument. The MCP Apps protocol creates the renderer iframe in parallel with the tool call, so the app is already running by the time partial arguments start flowing.

As the LLM generates each token:

  1. The host forwards partial arguments to the app via ontoolinputpartial
  2. The renderer extracts the growing code string
  3. Browser-side Pyodide executes whatever compiles successfully
  4. The user sees components appear as they're written

When the LLM finishes, the server runs the complete code in a server-side Pyodide sandbox for validation, and the renderer swaps the streaming preview for the final server-validated result.

What the LLM writes

The tool description includes examples that teach the model the Prefab patterns. A typical generation looks like:

python
from prefab_ui.components import Column, Row, Heading, Text, Badge, Card, CardContent
from prefab_ui.components.charts import BarChart, ChartSeries
from prefab_ui.app import PrefabApp

with PrefabApp() as app:
    with Column(gap=6, css_class="p-6"):
        Heading("Q3 Revenue Report")

        BarChart(
            data=[
                {"month": "Jul", "revenue": 42000},
                {"month": "Aug", "revenue": 51000},
                {"month": "Sep", "revenue": 63000},
            ],
            series=[ChartSeries(data_key="revenue", label="Revenue")],
            x_axis="month",
        )

        with Row(gap=4):
            with Card():
                with CardContent():
                    Text("Total", css_class="text-sm text-muted-foreground")
                    Heading("$156,000")
            with Card():
                with CardContent():
                    Text("Growth", css_class="text-sm text-muted-foreground")
                    Badge("+18%", variant="success")

The model writes real Python — loops, f-strings, computation, helper functions. Prefab gives it charts, tables, forms, cards, badges, and layout primitives to compose.

The component search tool

Before writing code, the LLM can call search_prefab_components to discover what's available:

search_prefab_components("Chart")
→ 7 components matching 'Chart':
  AreaChart — from prefab_ui.components.charts import AreaChart
  BarChart — from prefab_ui.components.charts import BarChart
  ...

Passing detail=True returns full field descriptions and docstrings. The search tool introspects Prefab classes at runtime, so it's always up to date with the installed version.

Passing data

The generate_prefab_ui tool accepts a data parameter. Values become global variables in the sandbox:

python
# The LLM can reference 'sales_data' directly in its code
result = await generate_prefab_ui(
    code="...",
    data={"sales_data": [{"month": "Jan", "revenue": 42000}, ...]}
)

This lets the model use data from earlier in the conversation to build visualizations.

Configuration

GenerativeUI takes options for customizing tool names:

python
GenerativeUI(
    tool_name="generate_prefab_ui",           # default
    components_tool_name="search_prefab_components",  # default
    include_components_tool=True,              # default
)

Requirements

Generative UI needs fastmcp[apps], which pulls in prefab-ui. The server-side Pyodide sandbox (for final validation) requires Deno — it installs automatically on first use.

The streaming renderer loads Pyodide from CDN in the browser. The CSP is configured automatically by the provider — no manual setup.

Sandbox limitations

The Pyodide sandbox includes the Python standard library and Prefab. External packages (NumPy, pandas, requests, etc.) are not available — the LLM's code must work with only built-in Python and Prefab. If the LLM imports something unavailable, the sandbox raises ImportError.

Next steps