mirror of
https://github.com/PrefectHQ/fastmcp.git
synced 2026-08-09 23:29:10 +02:00
1be9b4d39c* Comprehensive MCP Apps docs, string CallTool resolution, bump prefab-ui >=0.13.0
Rewrites the apps documentation as a learning journey: overview → Prefab apps
→ FastMCPApp → patterns → dev tools → custom HTML. Adds a new FastMCPApp page
covering composable apps with @app.tool()/@app.ui(), CallTool, forms, actions,
and composition. Teaches Rx() and set_initial_state() as the primary state API.
Adds string-based CallTool resolution so CallTool("save_contact") resolves to
the tool's global key, matching callable ref behavior. Requires prefab-ui 0.13.0
which passes strings through the tool resolver.
* Detect ambiguous string CallTool resolution across apps
* Simplify string name registry to plain dict (last-write-wins)
66 lines
3 KiB
Text
66 lines
3 KiB
Text
---
|
|
title: Development
|
|
sidebarTitle: Development
|
|
description: Preview and test your app tools locally without a full MCP host.
|
|
icon: flask
|
|
tag: NEW
|
|
---
|
|
|
|
import { VersionBadge } from '/snippets/version-badge.mdx'
|
|
|
|
<VersionBadge version="3.2.0" />
|
|
|
|
<Frame>
|
|
<img src="/apps/images/dev-app.png" alt="The dev UI showing a rendered Prefab app with the MCP inspector panel" />
|
|
</Frame>
|
|
|
|
`fastmcp dev apps` launches a browser-based preview for your app tools. It starts your MCP server and a local dev UI side by side — you pick a tool, fill in its arguments, and see the rendered result in a new tab. No MCP host client needed.
|
|
|
|
This works with both [Prefab apps](/apps/prefab) and [custom HTML apps](/apps/low-level).
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
fastmcp dev apps server.py
|
|
```
|
|
|
|
The dev UI opens at `http://localhost:8080`. Your MCP server runs on port 8000 with auto-reload enabled by default — save a file and the server restarts automatically.
|
|
|
|
## How It Works
|
|
|
|
The dev server does three things:
|
|
|
|
The **picker page** connects to your MCP server, finds all tools with UI metadata, and renders a form for each one. The forms are auto-generated from the tool's input schema — text fields, dropdowns, checkboxes, all wired up.
|
|
|
|
When you submit a form, the dev server **calls your tool** via the MCP protocol and opens the result in a new tab. The result page loads the tool's UI resource (the Prefab renderer or your custom HTML) inside an AppBridge — the same protocol that real MCP hosts use.
|
|
|
|
A **reverse proxy** on `/mcp` forwards requests from the browser to your MCP server, avoiding CORS issues that would otherwise block the iframe-based renderer from talking to a different port.
|
|
|
|
## MCP Inspector
|
|
|
|
The dev UI includes an inspector panel on the left side that captures MCP traffic in real time. It shows JSON-RPC messages flowing between the browser and your server — requests, responses, and AppBridge `postMessage` traffic.
|
|
|
|
Each entry shows direction, method, timing, and a smart summary. Click any entry to expand the full JSON-RPC body. The panel auto-scrolls to new messages unless you've scrolled up to inspect older ones.
|
|
|
|
The inspector is useful for debugging: you can see exactly what arguments your tool received, what it returned, and how the AppBridge communicated with the renderer.
|
|
|
|
## Options
|
|
|
|
```bash
|
|
fastmcp dev apps server.py:mcp --mcp-port 9000 --dev-port 9090 --no-reload
|
|
```
|
|
|
|
| Option | Flag | Default | Description |
|
|
| ------ | ---- | ------- | ----------- |
|
|
| MCP Port | `--mcp-port` | `8000` | Port for your MCP server |
|
|
| Dev Port | `--dev-port` | `8080` | Port for the dev UI |
|
|
| Auto-Reload | `--reload` / `--no-reload` | On | Watch files and restart the server on changes |
|
|
|
|
## Multiple Tools
|
|
|
|
If your server has multiple app tools, the picker shows a dropdown. Each tool gets its own form and launch button. The tool's `title` is displayed when available, falling back to the tool name.
|
|
|
|
```bash
|
|
# Server with multiple app tools
|
|
fastmcp dev apps examples/apps/contacts/contacts_server.py
|
|
```
|