mirror of
https://github.com/PrefectHQ/fastmcp.git
synced 2026-08-09 07:09:11 +02:00
Fix docs app demo iframe assets (#4194)
This commit is contained in:
Jeremiah Lowin
GitHub
parent
1222e8e47a
commit
2ac23a4de5
15 changed files with 81 additions and 2201 deletions
|
|
@ -1,76 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Prefab</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css">
|
||||
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style="max-width:64rem;margin:0 auto;padding:2rem"></div>
|
||||
<script id="prefab:initial-data" type="application/json">{
|
||||
"$prefab": {
|
||||
"version": "0.2"
|
||||
},
|
||||
"view": {
|
||||
"cssClass": "pf-app-root",
|
||||
"type": "Div",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "p-6",
|
||||
"type": "Column",
|
||||
"children": [
|
||||
{
|
||||
"type": "BarChart",
|
||||
"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
|
||||
}
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"dataKey": "revenue",
|
||||
"label": "Revenue"
|
||||
},
|
||||
{
|
||||
"dataKey": "costs",
|
||||
"label": "Costs"
|
||||
}
|
||||
],
|
||||
"xAxis": "quarter",
|
||||
"height": 250,
|
||||
"stacked": false,
|
||||
"horizontal": false,
|
||||
"barRadius": 4,
|
||||
"showLegend": true,
|
||||
"showTooltip": true,
|
||||
"animate": true,
|
||||
"showGrid": true,
|
||||
"showYAxis": true,
|
||||
"yAxisFormat": "auto"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,172 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Prefab</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css">
|
||||
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style="max-width:64rem;margin:0 auto;padding:2rem"></div>
|
||||
<script id="prefab:initial-data" type="application/json">{
|
||||
"$prefab": {
|
||||
"version": "0.2"
|
||||
},
|
||||
"view": {
|
||||
"cssClass": "pf-app-root",
|
||||
"type": "Div",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-4 p-6",
|
||||
"type": "Column",
|
||||
"children": [
|
||||
{
|
||||
"type": "DataTable",
|
||||
"columns": [
|
||||
{
|
||||
"key": "name",
|
||||
"header": "Name",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "email",
|
||||
"header": "Email",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "category",
|
||||
"header": "Category",
|
||||
"sortable": false
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"name": "Arthur Dent",
|
||||
"email": "arthur@earth.com",
|
||||
"category": {
|
||||
"type": "Badge",
|
||||
"label": "Customer",
|
||||
"variant": "success"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Ford Prefect",
|
||||
"email": "ford@betelgeuse.org",
|
||||
"category": {
|
||||
"type": "Badge",
|
||||
"label": "Partner",
|
||||
"variant": "secondary"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Trillian Astra",
|
||||
"email": "trillian@heartofgold.com",
|
||||
"category": {
|
||||
"type": "Badge",
|
||||
"label": "Customer",
|
||||
"variant": "success"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Zaphod Beeblebrox",
|
||||
"email": "zaphod@galaxy.gov",
|
||||
"category": {
|
||||
"type": "Badge",
|
||||
"label": "Vendor",
|
||||
"variant": "outline"
|
||||
}
|
||||
}
|
||||
],
|
||||
"search": true,
|
||||
"paginated": false,
|
||||
"pageSize": 10
|
||||
},
|
||||
{
|
||||
"type": "Separator",
|
||||
"orientation": "horizontal"
|
||||
},
|
||||
{
|
||||
"content": "Add Contact",
|
||||
"type": "H3"
|
||||
},
|
||||
{
|
||||
"cssClass": "gap-4",
|
||||
"type": "Form",
|
||||
"onSubmit": {
|
||||
"action": "showToast",
|
||||
"message": "Contact saved! (preview demo \u2014 no backend wired)",
|
||||
"variant": "success"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-4",
|
||||
"type": "Row",
|
||||
"children": [
|
||||
{
|
||||
"name": "name",
|
||||
"type": "Input",
|
||||
"inputType": "text",
|
||||
"placeholder": "Full name",
|
||||
"disabled": false,
|
||||
"readOnly": false,
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "Input",
|
||||
"inputType": "text",
|
||||
"placeholder": "name@example.com",
|
||||
"disabled": false,
|
||||
"readOnly": false,
|
||||
"required": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "category",
|
||||
"type": "Select",
|
||||
"size": "default",
|
||||
"disabled": false,
|
||||
"required": false,
|
||||
"invalid": false,
|
||||
"children": [
|
||||
{
|
||||
"type": "SelectOption",
|
||||
"value": "Customer",
|
||||
"label": "Customer",
|
||||
"selected": false,
|
||||
"disabled": false
|
||||
},
|
||||
{
|
||||
"type": "SelectOption",
|
||||
"value": "Partner",
|
||||
"label": "Partner",
|
||||
"selected": false,
|
||||
"disabled": false
|
||||
},
|
||||
{
|
||||
"type": "SelectOption",
|
||||
"value": "Vendor",
|
||||
"label": "Vendor",
|
||||
"selected": false,
|
||||
"disabled": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "Button",
|
||||
"label": "Save Contact",
|
||||
"variant": "default",
|
||||
"size": "default",
|
||||
"disabled": false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,157 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Prefab</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css">
|
||||
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style="max-width:64rem;margin:0 auto;padding:2rem"></div>
|
||||
<script id="prefab:initial-data" type="application/json">{
|
||||
"$prefab": {
|
||||
"version": "0.2"
|
||||
},
|
||||
"view": {
|
||||
"cssClass": "pf-app-root",
|
||||
"type": "Div",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-4 p-6",
|
||||
"type": "Column",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-6",
|
||||
"type": "Row",
|
||||
"children": [
|
||||
{
|
||||
"type": "Metric",
|
||||
"label": "Revenue (Q1-Q4)",
|
||||
"value": "$220,500"
|
||||
},
|
||||
{
|
||||
"type": "Metric",
|
||||
"label": "Deals",
|
||||
"value": "4"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "BarChart",
|
||||
"data": [
|
||||
{
|
||||
"month": "Jan",
|
||||
"revenue": 48200,
|
||||
"costs": 31000
|
||||
},
|
||||
{
|
||||
"month": "Feb",
|
||||
"revenue": 52100,
|
||||
"costs": 32500
|
||||
},
|
||||
{
|
||||
"month": "Mar",
|
||||
"revenue": 61800,
|
||||
"costs": 34200
|
||||
},
|
||||
{
|
||||
"month": "Apr",
|
||||
"revenue": 58400,
|
||||
"costs": 33800
|
||||
}
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"dataKey": "revenue",
|
||||
"label": "Revenue"
|
||||
},
|
||||
{
|
||||
"dataKey": "costs",
|
||||
"label": "Costs"
|
||||
}
|
||||
],
|
||||
"xAxis": "month",
|
||||
"height": 200,
|
||||
"stacked": false,
|
||||
"horizontal": false,
|
||||
"barRadius": 4,
|
||||
"showLegend": true,
|
||||
"showTooltip": true,
|
||||
"animate": true,
|
||||
"showGrid": true,
|
||||
"showYAxis": true,
|
||||
"yAxisFormat": "auto"
|
||||
},
|
||||
{
|
||||
"type": "Separator",
|
||||
"orientation": "horizontal"
|
||||
},
|
||||
{
|
||||
"type": "DataTable",
|
||||
"columns": [
|
||||
{
|
||||
"key": "account",
|
||||
"header": "Account",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "value",
|
||||
"header": "Value",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "stage",
|
||||
"header": "Stage",
|
||||
"sortable": false
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"account": "Acme Corp",
|
||||
"value": "$84,000",
|
||||
"stage": {
|
||||
"type": "Badge",
|
||||
"label": "Won",
|
||||
"variant": "success"
|
||||
}
|
||||
},
|
||||
{
|
||||
"account": "Globex Inc",
|
||||
"value": "$52,000",
|
||||
"stage": {
|
||||
"type": "Badge",
|
||||
"label": "Negotiation",
|
||||
"variant": "secondary"
|
||||
}
|
||||
},
|
||||
{
|
||||
"account": "Initech",
|
||||
"value": "$31,500",
|
||||
"stage": {
|
||||
"type": "Badge",
|
||||
"label": "Proposal",
|
||||
"variant": "secondary"
|
||||
}
|
||||
},
|
||||
{
|
||||
"account": "Wayne Enterprises",
|
||||
"value": "$45,000",
|
||||
"stage": {
|
||||
"type": "Badge",
|
||||
"label": "Lost",
|
||||
"variant": "destructive"
|
||||
}
|
||||
}
|
||||
],
|
||||
"search": false,
|
||||
"paginated": false,
|
||||
"pageSize": 10
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Prefab</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css">
|
||||
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style="max-width:64rem;margin:0 auto;padding:2rem"></div>
|
||||
<script id="prefab:initial-data" type="application/json">{
|
||||
"$prefab": {
|
||||
"version": "0.2"
|
||||
},
|
||||
"view": {
|
||||
"cssClass": "pf-app-root",
|
||||
"type": "Div",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-4 p-6",
|
||||
"type": "Column",
|
||||
"children": [
|
||||
{
|
||||
"type": "DataTable",
|
||||
"columns": [
|
||||
{
|
||||
"key": "name",
|
||||
"header": "Name",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "role",
|
||||
"header": "Role",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "dept",
|
||||
"header": "Dept",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"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"
|
||||
}
|
||||
],
|
||||
"search": true,
|
||||
"paginated": false,
|
||||
"pageSize": 10
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,60 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Prefab</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css">
|
||||
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style="max-width:64rem;margin:0 auto;padding:2rem"></div>
|
||||
<script id="prefab:initial-data" type="application/json">{
|
||||
"$prefab": {
|
||||
"version": "0.2"
|
||||
},
|
||||
"view": {
|
||||
"cssClass": "pf-app-root",
|
||||
"type": "Div",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "p-6",
|
||||
"type": "Column",
|
||||
"children": [
|
||||
{
|
||||
"type": "PieChart",
|
||||
"data": [
|
||||
{
|
||||
"category": "Bug",
|
||||
"count": 42
|
||||
},
|
||||
{
|
||||
"category": "Feature",
|
||||
"count": 28
|
||||
},
|
||||
{
|
||||
"category": "Docs",
|
||||
"count": 15
|
||||
},
|
||||
{
|
||||
"category": "Infra",
|
||||
"count": 10
|
||||
}
|
||||
],
|
||||
"dataKey": "count",
|
||||
"nameKey": "category",
|
||||
"height": 240,
|
||||
"innerRadius": 50,
|
||||
"showLabel": false,
|
||||
"paddingAngle": 0,
|
||||
"showLegend": true,
|
||||
"showTooltip": true,
|
||||
"animate": true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,167 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Prefab</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css">
|
||||
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style="max-width:64rem;margin:0 auto;padding:2rem"></div>
|
||||
<script id="prefab:initial-data" type="application/json">{
|
||||
"$prefab": {
|
||||
"version": "0.2"
|
||||
},
|
||||
"view": {
|
||||
"cssClass": "pf-app-root",
|
||||
"type": "Div",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-4 p-6",
|
||||
"let": {
|
||||
"data": "{{ region == 'south' ? south : region == 'west' ? west : north }}"
|
||||
},
|
||||
"type": "Column",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-4 items-center",
|
||||
"type": "Row",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "w-40",
|
||||
"name": "region",
|
||||
"type": "Select",
|
||||
"size": "default",
|
||||
"disabled": false,
|
||||
"required": false,
|
||||
"invalid": false,
|
||||
"children": [
|
||||
{
|
||||
"type": "SelectOption",
|
||||
"value": "north",
|
||||
"label": "North",
|
||||
"selected": false,
|
||||
"disabled": false
|
||||
},
|
||||
{
|
||||
"type": "SelectOption",
|
||||
"value": "south",
|
||||
"label": "South",
|
||||
"selected": false,
|
||||
"disabled": false
|
||||
},
|
||||
{
|
||||
"type": "SelectOption",
|
||||
"value": "west",
|
||||
"label": "West",
|
||||
"selected": false,
|
||||
"disabled": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"cssClass": "ml-auto",
|
||||
"name": "show_target",
|
||||
"value": false,
|
||||
"type": "Switch",
|
||||
"size": "default",
|
||||
"disabled": false,
|
||||
"required": false
|
||||
},
|
||||
{
|
||||
"cssClass": "text-sm text-muted-foreground",
|
||||
"content": "Show target",
|
||||
"type": "Text"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "BarChart",
|
||||
"data": "{{ data }}",
|
||||
"series": [
|
||||
{
|
||||
"dataKey": "sales",
|
||||
"label": "Sales"
|
||||
}
|
||||
],
|
||||
"xAxis": "month",
|
||||
"height": 200,
|
||||
"stacked": false,
|
||||
"horizontal": false,
|
||||
"barRadius": 4,
|
||||
"showLegend": true,
|
||||
"showTooltip": true,
|
||||
"animate": true,
|
||||
"showGrid": true,
|
||||
"showYAxis": true,
|
||||
"yAxisFormat": "auto"
|
||||
},
|
||||
{
|
||||
"type": "Condition",
|
||||
"cases": [
|
||||
{
|
||||
"when": "{{ show_target }}",
|
||||
"children": [
|
||||
{
|
||||
"type": "Metric",
|
||||
"label": "Q1 Target",
|
||||
"value": "$75,000"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"state": {
|
||||
"region": "north",
|
||||
"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
|
||||
}
|
||||
],
|
||||
"show_target": true
|
||||
}
|
||||
}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,237 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Prefab</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css">
|
||||
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style="max-width:64rem;margin:0 auto;padding:2rem"></div>
|
||||
<script id="prefab:initial-data" type="application/json">{
|
||||
"$prefab": {
|
||||
"version": "0.2"
|
||||
},
|
||||
"view": {
|
||||
"cssClass": "pf-app-root",
|
||||
"type": "Div",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-4 p-6",
|
||||
"type": "Column",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-4",
|
||||
"type": "Grid",
|
||||
"columnTemplate": "1fr 2fr",
|
||||
"children": [
|
||||
{
|
||||
"type": "PieChart",
|
||||
"data": [
|
||||
{
|
||||
"office": "San Francisco",
|
||||
"count": 3
|
||||
},
|
||||
{
|
||||
"office": "New York",
|
||||
"count": 2
|
||||
},
|
||||
{
|
||||
"office": "London",
|
||||
"count": 1
|
||||
},
|
||||
{
|
||||
"office": "Berlin",
|
||||
"count": 1
|
||||
}
|
||||
],
|
||||
"dataKey": "count",
|
||||
"nameKey": "office",
|
||||
"height": 300,
|
||||
"innerRadius": 0,
|
||||
"showLabel": false,
|
||||
"paddingAngle": 0,
|
||||
"showLegend": true,
|
||||
"showTooltip": true,
|
||||
"animate": true
|
||||
},
|
||||
{
|
||||
"type": "DataTable",
|
||||
"columns": [
|
||||
{
|
||||
"key": "name",
|
||||
"header": "Name",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "role",
|
||||
"header": "Role",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "office",
|
||||
"header": "Office",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"name": "Alice Chen",
|
||||
"role": "Staff Engineer",
|
||||
"office": "San Francisco",
|
||||
"email": "alice@company.com",
|
||||
"projects": 3
|
||||
},
|
||||
{
|
||||
"name": "Bob Martinez",
|
||||
"role": "Lead Designer",
|
||||
"office": "New York",
|
||||
"email": "bob@company.com",
|
||||
"projects": 5
|
||||
},
|
||||
{
|
||||
"name": "Carol Johnson",
|
||||
"role": "Senior Engineer",
|
||||
"office": "London",
|
||||
"email": "carol@company.com",
|
||||
"projects": 2
|
||||
},
|
||||
{
|
||||
"name": "David Kim",
|
||||
"role": "Product Manager",
|
||||
"office": "San Francisco",
|
||||
"email": "david@company.com",
|
||||
"projects": 7
|
||||
},
|
||||
{
|
||||
"name": "Eva Mueller",
|
||||
"role": "Engineer",
|
||||
"office": "Berlin",
|
||||
"email": "eva@company.com",
|
||||
"projects": 1
|
||||
},
|
||||
{
|
||||
"name": "Frank Lee",
|
||||
"role": "Data Scientist",
|
||||
"office": "San Francisco",
|
||||
"email": "frank@company.com",
|
||||
"projects": 4
|
||||
},
|
||||
{
|
||||
"name": "Grace Park",
|
||||
"role": "Engineering Manager",
|
||||
"office": "New York",
|
||||
"email": "grace@company.com",
|
||||
"projects": 6
|
||||
}
|
||||
],
|
||||
"search": true,
|
||||
"paginated": false,
|
||||
"pageSize": 10,
|
||||
"onRowClick": {
|
||||
"action": "setState",
|
||||
"key": "selected",
|
||||
"value": "{{ $event }}"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "Condition",
|
||||
"cases": [
|
||||
{
|
||||
"when": "{{ selected }}",
|
||||
"children": [
|
||||
{
|
||||
"type": "Card",
|
||||
"children": [
|
||||
{
|
||||
"type": "CardHeader",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-2 items-center",
|
||||
"type": "Row",
|
||||
"children": [
|
||||
{
|
||||
"content": "{{ selected.name }}",
|
||||
"type": "H3"
|
||||
},
|
||||
{
|
||||
"type": "Badge",
|
||||
"label": "{{ selected.office }}",
|
||||
"variant": "default"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "CardContent",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-4 grid-cols-3",
|
||||
"type": "Grid",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-0",
|
||||
"type": "Column",
|
||||
"children": [
|
||||
{
|
||||
"content": "Role",
|
||||
"type": "Small"
|
||||
},
|
||||
{
|
||||
"content": "{{ selected.role }}",
|
||||
"type": "Text"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"cssClass": "gap-0",
|
||||
"type": "Column",
|
||||
"children": [
|
||||
{
|
||||
"content": "Email",
|
||||
"type": "Small"
|
||||
},
|
||||
{
|
||||
"content": "{{ selected.email }}",
|
||||
"type": "Text"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"cssClass": "gap-0",
|
||||
"type": "Column",
|
||||
"children": [
|
||||
{
|
||||
"content": "Active Projects",
|
||||
"type": "Small"
|
||||
},
|
||||
{
|
||||
"content": "{{ selected.projects }}",
|
||||
"type": "Text"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"state": {
|
||||
"selected": null
|
||||
}
|
||||
}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Prefab</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.css">
|
||||
<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@prefecthq/prefab-ui@0.19.0/dist/app/renderer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style="max-width:64rem;margin:0 auto;padding:2rem"></div>
|
||||
<script id="prefab:initial-data" type="application/json">{
|
||||
"$prefab": {
|
||||
"version": "0.2"
|
||||
},
|
||||
"view": {
|
||||
"cssClass": "pf-app-root",
|
||||
"type": "Div",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-4 p-6",
|
||||
"type": "Column",
|
||||
"children": [
|
||||
{
|
||||
"cssClass": "gap-4",
|
||||
"type": "Grid",
|
||||
"columnTemplate": "1fr 2fr",
|
||||
"children": [
|
||||
{
|
||||
"type": "PieChart",
|
||||
"data": [
|
||||
{
|
||||
"office": "San Francisco",
|
||||
"count": 3
|
||||
},
|
||||
{
|
||||
"office": "New York",
|
||||
"count": 2
|
||||
},
|
||||
{
|
||||
"office": "London",
|
||||
"count": 1
|
||||
},
|
||||
{
|
||||
"office": "Berlin",
|
||||
"count": 1
|
||||
}
|
||||
],
|
||||
"dataKey": "count",
|
||||
"nameKey": "office",
|
||||
"height": 300,
|
||||
"innerRadius": 0,
|
||||
"showLabel": false,
|
||||
"paddingAngle": 0,
|
||||
"showLegend": true,
|
||||
"showTooltip": true,
|
||||
"animate": true
|
||||
},
|
||||
{
|
||||
"type": "DataTable",
|
||||
"columns": [
|
||||
{
|
||||
"key": "name",
|
||||
"header": "Name",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "role",
|
||||
"header": "Role",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "office",
|
||||
"header": "Office",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"name": "Alice Chen",
|
||||
"role": "Staff Engineer",
|
||||
"office": "San Francisco"
|
||||
},
|
||||
{
|
||||
"name": "Bob Martinez",
|
||||
"role": "Lead Designer",
|
||||
"office": "New York"
|
||||
},
|
||||
{
|
||||
"name": "Carol Johnson",
|
||||
"role": "Senior Engineer",
|
||||
"office": "London"
|
||||
},
|
||||
{
|
||||
"name": "David Kim",
|
||||
"role": "Product Manager",
|
||||
"office": "San Francisco"
|
||||
},
|
||||
{
|
||||
"name": "Eva Mueller",
|
||||
"role": "Engineer",
|
||||
"office": "Berlin"
|
||||
},
|
||||
{
|
||||
"name": "Frank Lee",
|
||||
"role": "Data Scientist",
|
||||
"office": "San Francisco"
|
||||
},
|
||||
{
|
||||
"name": "Grace Park",
|
||||
"role": "Engineering Manager",
|
||||
"office": "New York"
|
||||
}
|
||||
],
|
||||
"search": true,
|
||||
"paginated": false,
|
||||
"pageSize": 10
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,12 +8,13 @@ tag: NEW
|
|||
|
||||
import { VersionBadge } from '/snippets/version-badge.mdx'
|
||||
import PrefabPinWarning from '/snippets/prefab-pin-warning.mdx'
|
||||
import { PrefabDemoFrame } from '/snippets/prefab-demo-frame.mdx'
|
||||
|
||||
<VersionBadge version="3.2.0" />
|
||||
|
||||
<PrefabPinWarning />
|
||||
|
||||
<iframe src="/apps/demos/contacts.html" style={{width:"100%", height:"650px", border:"none", overflow:"hidden", borderRadius:"8px"}} frameBorder="0" scrolling="no"></iframe>
|
||||
<PrefabDemoFrame demo="contacts" height="650px" title="Contacts app demo" />
|
||||
|
||||
Search a list, fill out a form, click save, the list updates. That pattern — UI that reads and writes data on the server — needs two things: backend tools that actually do the work, and a way to call them from the UI. `FastMCPApp` handles the wiring.
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ mode: center
|
|||
|
||||
import { VersionBadge } from '/snippets/version-badge.mdx'
|
||||
import PrefabPinWarning from '/snippets/prefab-pin-warning.mdx'
|
||||
import { PrefabDemoFrame } from '/snippets/prefab-demo-frame.mdx'
|
||||
|
||||
<VersionBadge version="3.0.0" />
|
||||
|
||||
|
|
@ -21,7 +22,7 @@ A FastMCP app is a tool that returns an interactive UI instead of text. When the
|
|||
maskImage: 'linear-gradient(to bottom, black 75%, transparent)',
|
||||
WebkitMaskImage: 'linear-gradient(to bottom, black 75%, transparent)',
|
||||
}}>
|
||||
<iframe src="/apps/demos/hitchhikers.html" style={{width:"100%", height:"2000px", border:"none", borderRadius:"8px", background:"transparent"}} frameBorder="0" scrolling="no" allowtransparency="true"></iframe>
|
||||
<PrefabDemoFrame demo="hitchhikers" height="2000px" title="Prefab showcase demo" />
|
||||
</div>
|
||||
|
||||
The dashboard above is a [Prefab](https://prefab.prefect.io) showcase — a taste of what you can deliver from a FastMCP tool. Every card, chart, slider, dialog, and carousel is a Python component. Build a composition like this, add `@mcp.tool(app=True)`, and the host renders it inside the conversation.
|
||||
|
|
|
|||
|
|
@ -8,12 +8,13 @@ tag: NEW
|
|||
|
||||
import { VersionBadge } from '/snippets/version-badge.mdx'
|
||||
import PrefabPinWarning from '/snippets/prefab-pin-warning.mdx'
|
||||
import { PrefabDemoFrame } from '/snippets/prefab-demo-frame.mdx'
|
||||
|
||||
<VersionBadge version="3.1.0" />
|
||||
|
||||
<PrefabPinWarning />
|
||||
|
||||
<iframe src="/apps/demos/dashboard.html" style={{width:"100%", height:"680px", border:"none", overflow:"hidden", borderRadius:"8px"}} frameBorder="0" scrolling="no"></iframe>
|
||||
<PrefabDemoFrame demo="dashboard" height="680px" title="Sales dashboard demo" />
|
||||
|
||||
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.
|
||||
|
||||
|
|
@ -23,7 +24,7 @@ The pattern behind every example on this page is the same: add `app=True` to you
|
|||
|
||||
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:
|
||||
|
||||
<iframe src="/apps/demos/data-table.html" style={{width:"100%", height:"530px", border:"none", overflow:"hidden", borderRadius:"8px"}} frameBorder="0" scrolling="no"></iframe>
|
||||
<PrefabDemoFrame demo="data-table" height="530px" title="Data table demo" />
|
||||
|
||||
```python
|
||||
from prefab_ui.components import DataTable, DataTableColumn
|
||||
|
|
@ -62,7 +63,7 @@ That's it. Add `app=True`, return a Prefab component instead of raw dicts. FastM
|
|||
|
||||
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.
|
||||
|
||||
<iframe src="/apps/demos/bar-chart.html" style={{width:"100%", height:"430px", border:"none", overflow:"hidden", borderRadius:"8px"}} frameBorder="0" scrolling="no"></iframe>
|
||||
<PrefabDemoFrame demo="bar-chart" height="430px" title="Bar chart demo" />
|
||||
|
||||
```python
|
||||
@mcp.tool(app=True)
|
||||
|
|
@ -88,7 +89,7 @@ def quarterly_revenue(year: int) -> BarChart:
|
|||
|
||||
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.
|
||||
|
||||
<iframe src="/apps/demos/pie-chart.html" style={{width:"100%", height:"410px", border:"none", overflow:"hidden", borderRadius:"8px"}} frameBorder="0" scrolling="no"></iframe>
|
||||
<PrefabDemoFrame demo="pie-chart" height="410px" title="Pie chart demo" />
|
||||
|
||||
```python
|
||||
@mcp.tool(app=True)
|
||||
|
|
@ -116,7 +117,7 @@ See the [Prefab chart docs](https://prefab.prefect.io/docs/components) for stack
|
|||
|
||||
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.
|
||||
|
||||
<iframe src="/apps/demos/dashboard.html" style={{width:"100%", height:"680px", border:"none", overflow:"hidden", borderRadius:"8px"}} frameBorder="0" scrolling="no"></iframe>
|
||||
<PrefabDemoFrame demo="dashboard" height="680px" title="Sales dashboard demo" />
|
||||
|
||||
```python expandable
|
||||
@mcp.tool(app=True)
|
||||
|
|
@ -184,7 +185,7 @@ Notice how `Badge` components can be placed inside table cells — any Prefab co
|
|||
|
||||
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.
|
||||
|
||||
<iframe src="/apps/demos/reactive.html" style={{width:"100%", height:"500px", border:"none", overflow:"hidden", borderRadius:"8px"}} frameBorder="0" scrolling="no"></iframe>
|
||||
<PrefabDemoFrame demo="reactive" height="500px" title="Reactive sales demo" />
|
||||
|
||||
Try switching regions in the dropdown, and toggling the switch on and off.
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,13 @@ tag: NEW
|
|||
---
|
||||
|
||||
import { VersionBadge } from '/snippets/version-badge.mdx'
|
||||
import { PrefabDemoFrame } from '/snippets/prefab-demo-frame.mdx'
|
||||
|
||||
<VersionBadge version="3.2.0" />
|
||||
|
||||
By the end of this page, you'll have a working tool that returns this:
|
||||
|
||||
<iframe src="/apps/demos/team-directory.html" style={{width:"100%", height:"545px", border:"none", overflow:"hidden", borderRadius:"8px"}} frameBorder="0" scrolling="no"></iframe>
|
||||
<PrefabDemoFrame demo="team-directory" height="545px" title="Team directory demo" />
|
||||
|
||||
A pie chart the user can hover, a table they can sort and search — and a single Python tool.
|
||||
|
||||
|
|
@ -103,7 +104,7 @@ The UI above renders once from your Python. Prefab apps can also respond to user
|
|||
|
||||
Click a row in the demo below to see a detail card appear:
|
||||
|
||||
<iframe src="/apps/demos/team-directory-reactive.html" style={{width:"100%", height:"675px", border:"none", overflow:"hidden", borderRadius:"8px"}} frameBorder="0" scrolling="no"></iframe>
|
||||
<PrefabDemoFrame demo="team-directory-reactive" height="675px" title="Reactive team directory demo" />
|
||||
|
||||
Add a few imports, give each member a couple more fields, wire up a click handler, and render a detail card when something's selected:
|
||||
|
||||
|
|
|
|||
1
docs/prefab-demo-payloads.js
Normal file
1
docs/prefab-demo-payloads.js
Normal file
File diff suppressed because one or more lines are too long
66
docs/snippets/prefab-demo-frame.mdx
Normal file
66
docs/snippets/prefab-demo-frame.mdx
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
export const PrefabDemoFrame = ({ demo, height, title }) => {
|
||||
const [blobUrl, setBlobUrl] = React.useState(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
let active = true;
|
||||
let objectUrl = null;
|
||||
let payloadsPromise = window.__FASTMCP_PREFAB_DEMOS_PROMISE__;
|
||||
|
||||
if (window.__FASTMCP_PREFAB_DEMOS__) {
|
||||
payloadsPromise = Promise.resolve(window.__FASTMCP_PREFAB_DEMOS__);
|
||||
} else if (!payloadsPromise) {
|
||||
payloadsPromise = new Promise((resolve, reject) => {
|
||||
const script = document.createElement("script");
|
||||
script.src = "/prefab-demo-payloads.js";
|
||||
script.onload = () => resolve(window.__FASTMCP_PREFAB_DEMOS__);
|
||||
script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
window.__FASTMCP_PREFAB_DEMOS_PROMISE__ = payloadsPromise;
|
||||
}
|
||||
|
||||
payloadsPromise
|
||||
.then((payloads) => {
|
||||
const html = payloads[demo];
|
||||
if (!html) {
|
||||
throw new Error(`Unknown Prefab demo: ${demo}`);
|
||||
}
|
||||
objectUrl = URL.createObjectURL(
|
||||
new Blob([html], { type: "text/html" }),
|
||||
);
|
||||
if (active) {
|
||||
setBlobUrl(objectUrl);
|
||||
} else {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
active = false;
|
||||
if (objectUrl) {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
}
|
||||
};
|
||||
}, [demo]);
|
||||
|
||||
if (!blobUrl) {
|
||||
return <div style={{ width: "100%", height, borderRadius: "8px" }} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<iframe
|
||||
src={blobUrl}
|
||||
title={title}
|
||||
style={{
|
||||
width: "100%",
|
||||
height,
|
||||
border: "none",
|
||||
overflow: "hidden",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
frameBorder="0"
|
||||
scrolling="no"
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
/>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue