fastmcp/docs/apps/generative.mdx

---
title: Generative UI
sidebarTitle: Generative UI
description: Let the LLM build custom Prefab UIs on the fly.
icon: wand-magic-sparkles
tag: NEW
---

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

<VersionBadge version="3.2.0" />

Generative UI means the LLM writes the UI code at runtime. Instead of calling a pre-built tool with a fixed interface, the model writes Prefab Python code tailored to the current data and request. The user watches the UI build up in real time as the model generates code.

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

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

That's it. The `GenerativeUI` provider registers everything:

- **`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 that lets the LLM search the Prefab component library to discover what's available
- **The generative renderer** — a `ui://` resource with browser-side Pyodide for streaming progressive rendering

## How It Works

When the LLM decides to call `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 when 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 replaces the streaming preview with the final server-validated result.

## What the LLM Writes

The tool description includes code examples that teach the LLM 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's component library gives it charts, tables, forms, cards, badges, and layout primitives to work with.

## 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 the actual 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 passed here 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 real data from earlier in the conversation to build visualizations.

## Configuration

`GenerativeUI` accepts 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 requires `fastmcp[apps]` which installs `prefab-ui`. The Pyodide sandbox (for server-side 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 needed.

## 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 components. If the LLM tries to import an unavailable package, the sandbox will raise an `ImportError`.

## Next Steps

- **[GenerativeUI Provider Reference](/apps/providers/generative)** — Configuration options and quick setup
- **[Prefab UI](/apps/prefab)** — The component library and state system the LLM writes code against
- **[Prefab Component Reference](https://prefab.prefect.io/docs/components)** — Full component library documentation
- **[Development](/apps/development)** — Preview generative UI tools locally with `fastmcp dev apps`