URL: https://gofastmcp.com/apps/prefab
Title: Interactive Tools - FastMCP

Documentation Index
Fetch the complete documentation index at:
/llms.txt
Use this file to discover all available pages before exploring further.
Skip to main content
Meet
Prefect Horizon
, the enterprise MCP gateway built by the team behind FastMCP
FastMCP
home page
v3
Prefect Horizon
PrefectHQ/fastmcp
25,596
PrefectHQ/fastmcp
25,596
Search...
Navigation
Apps
Interactive Tools
Search the docs...
Ctrl
K
Documentation
Get Started
Welcome!
Installation
Quickstart
Servers
Overview
Core Components
Working with Tools
MCP Providers
Interactivity
Extensibility
Auth
Deployment
Apps
Overview
Quickstart
NEW
FastMCPApp
NEW
Interactive Tools
NEW
Generative UI
NEW
Custom HTML
Reference
Clients
Overview
Client-Only Package
Transports
fastmcp-remote
Operations
UPDATED
Authentication
UPDATED
Integrations
Auth
Web Frameworks
AI Assistants
AI SDKs
MCP.json
More
Settings
CLI
Upgrading
Development
What's New
FAQ
On this page
Start with a table
Add charts
Compose a dashboard
Make it reactive
Content Security Policy
Giving the LLM context
Next steps
Apps
Interactive Tools
Copy page
Turn your tools into interactive UIs with charts, tables, and dashboards.
Copy page
New in version
3.1.0
Prefab
is under active development with frequent breaking changes. FastMCP sets a minimum
prefab-ui
version but does not pin an upper bound —
pin
prefab-ui
to a specific version in your own dependencies
before deploying.
Believe it or not, that dashboard is a FastMCP tool. The chart has tooltips. The table is sortable. The badges are styled by deal stage. The whole thing is about 40 lines of Python, and the user sees it right inside their conversation instead of a wall of JSON.
The pattern behind every example on this page is the same: add
app=True
to your tool, build a UI with
Prefab
components, and return it as a
PrefabApp
. Prefab has
100+ components
, from data tables and charts to forms and progress bars. You compose them in Python; the host renders them as a live, interactive application.
​
Start with a table
Most tools return data the user wants to explore. A
DataTable
is often the smallest useful upgrade — your data goes from a JSON blob to a searchable, sortable table:
from
prefab_ui
.
components
import
DataTable
,
DataTableColumn
from
fastmcp
import
FastMCP
mcp
=
FastMCP
(
"
Directory
"
)
@
mcp
.
tool
(
app
=
True
)
def
team_directory
()
->
DataTable
:
"""
Browse the team directory.
"""
employees
=
[
{
"
name
"
:
"
Alice Chen
"
,
"
role
"
:
"
Staff Engineer
"
,
"
dept
"
:
"
Platform
"
},
{
"
name
"
:
"
Bob Martinez
"
,
"
role
"
:
"
Lead Designer
"
,
"
dept
"
:
"
Design
"
},
{
"
name
"
:
"
Carol Johnson
"
,
"
role
"
:
"
Senior Engineer
"
,
"
dept
"
:
"
Platform
"
},
{
"
name
"
:
"
David Kim
"
,
"
role
"
:
"
Product Manager
"
,
"
dept
"
:
"
Product
"
},
{
"
name
"
:
"
Eva Mueller
"
,
"
role
"
:
"
Engineer
"
,
"
dept
"
:
"
Platform
"
},
{
"
name
"
:
"
Frank Lee
"
,
"
role
"
:
"
Data Scientist
"
,
"
dept
"
:
"
ML
"
},
{
"
name
"
:
"
Grace Park
"
,
"
role
"
:
"
Eng Manager
"
,
"
dept
"
:
"
Platform
"
},
]
return
DataTable
(
columns
=[
DataTableColumn
(
key
=
"
name
"
,
header
=
"
Name
"
,
sortable
=
True
),
DataTableColumn
(
key
=
"
role
"
,
header
=
"
Role
"
,
sortable
=
True
),
DataTableColumn
(
key
=
"
dept
"
,
header
=
"
Dept
"
,
sortable
=
True
),
],
rows
=
employees
,
search
=
True
,
)
That’s it. Add
app=True
, return a Prefab component instead of raw dicts. FastMCP handles the rendering, sandboxing, and security. No wrapper class needed for simple cases like this.
​
Add charts
When numbers tell a better story as a visual, swap in a chart. The API is the same: pass your data as a list of dicts, tell the chart which keys to plot.
@
mcp
.
tool
(
app
=
True
)
def
quarterly_revenue
(
year
:
int
)
->
BarChart
:
"""
Show quarterly revenue as a bar chart.
"""
data
=
[
{
"
quarter
"
:
"
Q1
"
,
"
revenue
"
:
42000
,
"
costs
"
:
28000
},
{
"
quarter
"
:
"
Q2
"
,
"
revenue
"
:
51000
,
"
costs
"
:
31000
},
{
"
quarter
"
:
"
Q3
"
,
"
revenue
"
:
47000
,
"
costs
"
:
29000
},
{
"
quarter
"
:
"
Q4
"
,
"
revenue
"
:
63000
,
"
costs
"
:
35000
},
]
return
BarChart
(
data
=
data
,
series
=[
ChartSeries
(
data_key
=
"
revenue
"
,
label
=
"
Revenue
"
),
ChartSeries
(
data_key
=
"
costs
"
,
label
=
"
Costs
"
),
],
x_axis
=
"
quarter
"
,
show_legend
=
True
,
)
Each
ChartSeries
plots a different key from the data.
BarChart
,
LineChart
,
AreaChart
,
PieChart
,
RadarChart
, and
RadialChart
all follow the same pattern. Hover over the bars to see tooltips.
@
mcp
.
tool
(
app
=
True
)
def
ticket_breakdown
()
->
PieChart
:
"""
Show open tickets by category.
"""
data
=
[
{
"
category
"
:
"
Bug
"
,
"
count
"
:
42
},
{
"
category
"
:
"
Feature
"
,
"
count
"
:
28
},
{
"
category
"
:
"
Docs
"
,
"
count
"
:
15
},
{
"
category
"
:
"
Infra
"
,
"
count
"
:
10
},
]
return
PieChart
(
data
=
data
,
data_key
=
"
count
"
,
name_key
=
"
category
"
,
inner_radius
=
50
,
show_legend
=
True
,
)
See the
Prefab chart docs
for stacking, curves, custom colors, and more.
​
Compose a dashboard
Tables and charts are useful on their own, but the real power comes from composing them.
Column
stacks children vertically,
Row
lays them out side by side, and
with
blocks establish nesting — the indentation is the layout.
@
mcp
.
tool
(
app
=
True
)
def
sales_dashboard
()
->
PrefabApp
:
"""
Show sales KPIs, trends, and deals.
"""
monthly
=
[
{
"
month
"
:
"
Jan
"
,
"
revenue
"
:
48200
,
"
costs
"
:
31000
},
{
"
month
"
:
"
Feb
"
,
"
revenue
"
:
52100
,
"
costs
"
:
32500
},
{
"
month
"
:
"
Mar
"
,
"
revenue
"
:
61800
,
"
costs
"
:
34200
},
{
"
month
"
:
"
Apr
"
,
"
revenue
"
:
58400
,
"
costs
"
:
33800
},
]
deals
=
[
{
"
account
"
:
"
Acme Corp
"
,
"
value
"
:
"
$84,000
"
,
"
stage
"
:
"
Won
"
},
{
"
account
"
:
"
Globex Inc
"
,
"
value
"
:
"
$52,000
"
,
"
stage
"
:
"
Negotiation
"
},
{
"
account
"
:
"
Initech
"
,
"
value
"
:
"
$31,500
"
,
"
stage
"
:
"
Proposal
"
},
{
"
account
"
:
"
Wayne Enterprises
"
,
"
value
"
:
"
$45,000
"
,
"
stage
"
:
"
Lost
"
},
]
rows
=
[
{
"
account
"
:
d
[
"
account
"
],
"
value
"
:
d
[
"
value
"
],
"
stage
"
:
Badge
(
d
[
"
stage
"
],
variant
=
"
success
"
if
d
[
"
stage
"
]
==
"
Won
"
else
"
destructive
"
if
d
[
"
stage
"
]
==
"
Lost
"
else
"
secondary
"
,
),
}
for
d
in
deals
]
total
=
sum
(
m
[
"
revenue
"
]
for
m
in
monthly
)
with
PrefabApp
()
as
app
:
with
Column
(
gap
=
4
,
css_class
=
"
p-6
"
):
with
Row
(
gap
=
6
):
Metric
(
label
=
"
Revenue (Q1-Q4)
"
,
value
=
f
"$
{
total
:,
}
"
)
Metric
(
label
=
"
Deals
"
,
value
=
f
"
{
len
(
deals
)
}
"
)
BarChart
(
data
=
monthly
,
series
=[
ChartSeries
(
data_key
=
"
revenue
"
,
label
=
"
Revenue
"
),
ChartSeries
(
data_key
=
"
costs
"
,
label
=
"
Costs
"
),
],
x_axis
=
"
month
"
,
show_legend
=
True
,
)
Separator
()
DataTable
(
columns
=[
DataTableColumn
(
key
=
"
account
"
,
header
=
"
Account
"
,
sortable
=
True
),
DataTableColumn
(
key
=
"
value
"
,
header
=
"
Value
"
,
sortable
=
True
),
DataTableColumn
(
key
=
"
stage
"
,
header
=
"
Stage
"
),
],
rows
=
rows
,
)
return
app
See all 57 lines
Notice how
Badge
components can be placed inside table cells — any Prefab component works as a cell value, so you can put progress bars, icons, or buttons in your tables too.
​
Make it reactive
Everything above renders once from the data your Python provides. But interactive tools can also respond to user input in real time, without any server round-trips. Prefab’s state system lets components read and write client-side values, so the UI updates instantly as the user interacts with it.
Try switching regions in the dropdown, and toggling the switch on and off.
from
prefab_ui
.
rx
import
Rx
@
mcp
.
tool
(
app
=
True
)
def
regional_sales
()
->
PrefabApp
:
"""
Sales by region with a live filter.
"""
north
=
[
{
"
month
"
:
"
Jan
"
,
"
sales
"
:
22000
},
{
"
month
"
:
"
Feb
"
,
"
sales
"
:
25500
},
{
"
month
"
:
"
Mar
"
,
"
sales
"
:
24200
},
]
south
=
[
{
"
month
"
:
"
Jan
"
,
"
sales
"
:
5800
},
{
"
month
"
:
"
Feb
"
,
"
sales
"
:
6400
},
{
"
month
"
:
"
Mar
"
,
"
sales
"
:
5600
},
]
west
=
[
{
"
month
"
:
"
Jan
"
,
"
sales
"
:
6000
},
{
"
month
"
:
"
Feb
"
,
"
sales
"
:
6000
},
{
"
month
"
:
"
Mar
"
,
"
sales
"
:
5600
},
]
with
PrefabApp
(
state
={
"
region
"
:
"
north
"
,
"
north
"
:
north
,
"
south
"
:
south
,
"
west
"
:
west
,
"
show_target
"
:
True
,
},
)
as
app
:
with
Column
(
gap
=
4
,
css_class
=
"
p-6
"
,
let
={
"
data
"
:
"
{{
region == 'south' ? south
"
"
: region == 'west' ? west
"
"
: north
}}
"
},
):
with
Row
(
gap
=
4
,
align
=
"
center
"
):
with
Select
(
name
=
"
region
"
,
css_class
=
"
w-40
"
):
SelectOption
(
value
=
"
north
"
,
label
=
"
North
"
)
SelectOption
(
value
=
"
south
"
,
label
=
"
South
"
)
SelectOption
(
value
=
"
west
"
,
label
=
"
West
"
)
Switch
(
name
=
"
show_target
"
,
css_class
=
"
ml-auto
"
)
Text
(
"
Show target
"
,
css_class
=
"
text-sm text-muted-foreground
"
)
BarChart
(
data
=
Rx
(
"
data
"
),
series
=[
ChartSeries
(
data_key
=
"
sales
"
,
label
=
"
Sales
"
)],
x_axis
=
"
month
"
,
)
with
If
(
Rx
(
"
show_target
"
)):
Metric
(
label
=
"
Q1 Target
"
,
value
=
"
$75,000
"
)
return
app
See all 51 lines
The
state
dict on
PrefabApp
declares initial values. The
Select
writes to the
region
key on every change. A
let
binding picks the matching dataset, and the chart re-renders. The
Switch
toggles a
Metric
on and off through
If(Rx("show_target"))
. All of this happens in the browser — no calls back to your server.
Rx
is a reactive reference:
Rx("region")
compiles to an expression the renderer evaluates live. It supports arithmetic, comparisons, formatting pipes (
.currency()
,
.percent()
), and ternary conditionals (
.then()
). For the full state system, see the
Prefab state docs
and
expression docs
.
​
Content Security Policy
Interactive tools render in a sandboxed iframe with a strict CSP. If your tool loads external resources — embedding iframes, fetching from APIs, loading scripts — add the required domains:
from
fastmcp
.
apps
import
PrefabAppConfig
,
ResourceCSP
@
mcp
.
tool
(
app
=
PrefabAppConfig
(
csp
=
ResourceCSP
(
frame_domains
=[
"
https://example.com
"
]),
))
def
dashboard_with_embed
()
->
PrefabApp
:
...
PrefabAppConfig()
with no arguments is equivalent to
app=True
.
​
Giving the LLM context
By default, the LLM sees
"[Rendered Prefab UI]"
as the tool result. If the model needs to reason about the data, return a
ToolResult
with a text summary alongside the UI:
from
fastmcp
.
tools
import
ToolResult
@
mcp
.
tool
(
app
=
True
)
def
sales_overview
(
year
:
int
)
->
ToolResult
:
"""
Show sales visually, summarize for the model.
"""
data
=
get_sales_data
(
year
)
total
=
sum
(
row
[
"
revenue
"
]
for
row
in
data
)
with
Column
(
gap
=
4
,
css_class
=
"
p-6
"
)
as
view
:
BarChart
(
data
=
data
,
series
=[
ChartSeries
(
data_key
=
"
revenue
"
)])
return
ToolResult
(
content
=
f
"Total revenue for
{
year
}
: $
{
total
:,
}
across
{
len
(
data
)
}
quarters"
,
structured_content
=
view
,
)
The user sees the chart. The model sees the summary.
​
Next steps
FastMCPApp
— when your UI needs to call backend tools (forms, search, CRUD)
Generative UI
— let the LLM design the UI at runtime
Custom HTML
— when Prefab isn’t enough (maps, 3D, your own framework)
Examples
— complete working servers you can run today
Development
— preview your tools locally with
fastmcp dev apps
Prefab UI
— full component reference with 100+ components, theming, and advanced patterns
FastMCPApp
Previous
Generative UI
Next
Ctrl
+I
discord
github
website
x
Powered by
This documentation is built and hosted on Mintlify, a developer documentation platform
Assistant
Responses are generated using AI and may contain mistakes.
\n\n
\n
\n \n
\n
