mirror of
https://github.com/PrefectHQ/fastmcp.git
synced 2026-08-09 07:09:11 +02:00
c556f07a66* Archive v3 docs under /v3 and publish v4 as the primary version * Label primary docs version v4.0.0 (alpha 1) * Add What's New in v4 page; fix upgrade-guide phrasing; point banner at What's New * Rewrite What's New around v4's new capabilities, not the sampling deprecation * Lead What's New with the SDK v2 engine swap and the SEPs it brings * State ships now (link Session State); tasks arrive next alpha * Exclude docs/v3 frozen snapshots from doc-example import validation
73 lines
3.2 KiB
Text
73 lines
3.2 KiB
Text
---
|
|
title: Apps
|
|
sidebarTitle: Overview
|
|
description: Give your tools interactive UIs rendered directly in the conversation.
|
|
icon: grid-2
|
|
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" />
|
|
|
|
A FastMCP app is a tool that returns an interactive UI instead of text. When the host calls it, the user sees a chart, a table, a form, or a whole dashboard rendered right inside the conversation, with working sort, search, tooltips, and state.
|
|
|
|
<div style={{
|
|
margin: '0 clamp(-180px, calc(-18vw + 90px), 0px) 2rem',
|
|
maxHeight: '700px',
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
maskImage: 'linear-gradient(to bottom, black 75%, transparent)',
|
|
WebkitMaskImage: 'linear-gradient(to bottom, black 75%, transparent)',
|
|
}}>
|
|
<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.
|
|
|
|
Under the hood, FastMCP builds on the [MCP Apps extension](https://modelcontextprotocol.io/docs/extensions/apps) and uses Prefab to describe UIs in Python.
|
|
|
|
```bash
|
|
pip install "fastmcp[apps]"
|
|
```
|
|
|
|
<PrefabPinWarning />
|
|
|
|
## Pick your path
|
|
|
|
Four patterns cover almost everything you'd want to build. Most apps start with Interactive Tools; you only reach for the others when you've hit a specific limit.
|
|
|
|
### [Interactive Tools](/apps/prefab) — start here
|
|
|
|
Add `app=True` to a tool and return a Prefab component. Charts, tables, dashboards, and client-side interactivity (toggles, tabs, filtering) all work without any server round-trips.
|
|
|
|
```python
|
|
@mcp.tool(app=True)
|
|
def team_directory() -> DataTable:
|
|
return DataTable(columns=[...], rows=employees, search=True)
|
|
```
|
|
|
|
### [FastMCPApp](/apps/fastmcp-app) — when the UI calls back to the server
|
|
|
|
Forms that save data, buttons that trigger backend work, search that hits a database. `FastMCPApp` manages the wiring between UI actions and backend tools, with stable tool identifiers that survive server composition.
|
|
|
|
### [Generative UI](/apps/generative) — when the LLM writes the UI
|
|
|
|
Register one provider and the model can write Prefab code tailored to the current data and request. The user watches the UI build up as the model generates it.
|
|
|
|
```python
|
|
mcp.add_provider(GenerativeUI())
|
|
```
|
|
|
|
### [Custom HTML](/apps/low-level) — when you need full control
|
|
|
|
Write your own HTML, CSS, and JavaScript. Use a specific framework, drop in a map or 3D viewer, embed video. You're talking to the MCP Apps protocol directly.
|
|
|
|
## What's next
|
|
|
|
- **[Quickstart](/apps/quickstart)** — build a working app in a minute
|
|
- **[Examples](/apps/examples)** — complete working servers you can run today
|
|
- **[Providers](/apps/providers/approval)** — ready-made capabilities (approvals, choice pickers, file upload, forms) you add with one line
|
|
- **[Development](/apps/development)** — preview app tools locally with `fastmcp dev apps`
|