Compare commits

...

1 commit

Author SHA1 Message Date
Jeremiah Lowin
3f37ce8381
Polish apps docs for 3.2 release
- Remove internal ___ routing reference from file-upload docs
- Fix missing Literal import in form example
- Flesh out generative provider page (was a stub, now real content)
- Add ext-apps SDK link to low-level page
- Reframe architecture page for debugging use cases
2026-03-29 10:45:31 -04:00
5 changed files with 33 additions and 4 deletions

View file

@ -10,7 +10,7 @@ import { VersionBadge } from '/snippets/version-badge.mdx'
<VersionBadge version="3.2.0" />
This page explains the internal architecture of Prefab apps — how your Python code becomes an interactive UI inside a host client's conversation. If you're building [custom HTML apps](/apps/low-level), the pipeline is simpler and covered on that page. You don't need to understand any of this to build Prefab apps, but the mental model is useful when you're debugging, extending, or contributing.
This page explains how Prefab apps work under the hood — how your Python code becomes an interactive UI inside a host client's conversation. You don't need any of this to build apps, but the mental model is useful when something isn't rendering the way you expect, when tool calls from the UI aren't reaching your server, or when you're building [custom HTML apps](/apps/low-level) and need to understand the protocol directly.
## The Pipeline

View file

@ -145,6 +145,8 @@ The `App` object provides:
- **`app.onhostcontextchanged`** — callback for host context changes (e.g., safe area insets)
- **`app.getHostContext()`** — get current host context
See the full [ext-apps SDK documentation](https://github.com/modelcontextprotocol/ext-apps) for the complete API reference.
<Note>
If your HTML loads external scripts, styles, or makes API calls, you need to declare those domains in the CSP configuration. See [Security](#security) below.
</Note>

View file

@ -33,7 +33,7 @@ This registers four tools:
| `list_files` | Model | Returns metadata for all uploaded files |
| `read_file` | Model | Returns a file's contents by name |
The LLM sees `file_manager`, `list_files`, and `read_file`. It calls `file_manager` to show the upload interface, then uses `list_files` and `read_file` to work with whatever the user uploaded. `store_files` is app-only — the UI calls it directly through the `___` routing mechanism and the LLM never needs to know about it.
The LLM sees `file_manager`, `list_files`, and `read_file`. It calls `file_manager` to show the upload interface, then uses `list_files` and `read_file` to work with whatever the user uploaded. `store_files` is app-only — the UI calls it directly and the LLM never needs to know about it.
## Configuration

View file

@ -17,6 +17,8 @@ import { VersionBadge } from '/snippets/version-badge.mdx'
</Frame>
```python
from typing import Literal
from pydantic import BaseModel, Field
from fastmcp import FastMCP
from fastmcp.apps.form import FormInput

View file

@ -40,10 +40,35 @@ GenerativeUI(
)
```
## What the LLM Sees
The tool description includes code examples that teach the LLM the Prefab patterns. The LLM calls `generate_prefab_ui` with a `code` argument containing Prefab Python, and optionally a `data` argument to pass in real data from the conversation:
```python
# The LLM generates something like:
generate_prefab_ui(
code="""
from prefab_ui.components import Column, Heading
from prefab_ui.components.charts import BarChart, ChartSeries
from prefab_ui.app import PrefabApp
with PrefabApp() as app:
with Column(gap=4):
Heading("Revenue")
BarChart(data=data, series=[ChartSeries(data_key="revenue")], x_axis="quarter")
""",
data={"data": [{"quarter": "Q1", "revenue": 42000}, ...]}
)
```
The component search tool lets the LLM discover what's available before writing code — `search_prefab_components("Chart")` returns matching components with import paths.
## Requirements
Requires `fastmcp[apps]` (installs `prefab-ui`). The Pyodide sandbox for server-side validation requires Deno, which installs automatically on first use. The streaming renderer loads Pyodide from CDN in the browser — CSP is configured automatically by the provider.
Requires `fastmcp[apps]` (installs `prefab-ui`). The Pyodide sandbox for server-side validation requires Deno, which installs automatically on first use. The streaming renderer loads Pyodide from CDN in the browser — CSP is configured automatically.
The sandbox includes the Python standard library and Prefab. External packages (NumPy, pandas, etc.) are not available.
## Learn More
See the full **[Generative UI guide](/apps/generative)** for details on how streaming works, what the LLM writes, how to pass data, and the component search tool.
The full **[Generative UI guide](/apps/generative)** covers the streaming mechanics in detail, how to pass data, the component search tool, and sandbox limitations.