ceos/fastmcp
1
0
Fork 0
mirror of https://github.com/PrefectHQ/fastmcp.git synced 2026-08-09 15:19:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add pie chart next to table in quickstart example

Browse source
This commit is contained in:
Jeremiah Lowin 2026-03-29 14:09:54 -04:00
commit 0eac4d7ce8
No known key found for this signature in database
1 changed files with 26 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

36
docs/apps/quickstart.mdx
View file

@ -29,8 +29,11 @@ When your tool has something to *show* (a table of results, a chart, a status da
Create `server.py`:
```python
from collections import Counter
from prefab_ui.app import PrefabApp
from prefab_ui.components import Column, Heading, DataTable, DataTableColumn
from prefab_ui.components import Column, Grid, Heading, DataTable, DataTableColumn
from prefab_ui.components.charts import PieChart
from fastmcp import FastMCP
mcp = FastMCP("My First App")
@ -45,20 +48,33 @@ def team_directory() -> PrefabApp:
{"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"},
]
office_counts = [
{"office": office, "count": count}
for office, count in Counter(m["office"] for m in members).items()
]
with PrefabApp() as app:
with Column(gap=4, css_class="p-6"):
Heading("Team Directory")
DataTable(
columns=[
DataTableColumn(key="name", header="Name", sortable=True),
DataTableColumn(key="role", header="Role", sortable=True),
DataTableColumn(key="office", header="Office", sortable=True),
],
rows=members,
search=True,
)
with Grid(columns=2, gap=4):
PieChart(
data=office_counts,
data_key="count",
name_key="office",
)
DataTable(
columns=[
DataTableColumn(key="name", header="Name", sortable=True),
DataTableColumn(key="role", header="Role", sortable=True),
DataTableColumn(key="office", header="Office", sortable=True),
],
rows=members,
search=True,
)
return app
```