fastmcp.utilities.ui

Shared UI utilities for FastMCP HTML pages.

This module provides reusable HTML/CSS components for OAuth callbacks, consent pages, and other user-facing interfaces.

Functions

create_page ^{<a href="https://github.com/PrefectHQ/fastmcp/blob/main/src/fastmcp/utilities/ui.py#L453" target="_blank"><Icon icon="github" style="width: 14px; height: 14px;" /></a>}

create_page(content: str, title: str = 'FastMCP', additional_styles: str = '', csp_policy: str = "default-src 'none'; style-src 'unsafe-inline'; img-src https: data:; base-uri 'none'") -> str

Create a complete HTML page with FastMCP styling.

Args:

• content: HTML content to place inside the page
• title: Page title
• additional_styles: Extra CSS to include
• csp_policy: Content Security Policy header value. If empty string "", the CSP meta tag is omitted entirely.

Returns:

• Complete HTML page as string

create_logo ^{<a href="https://github.com/PrefectHQ/fastmcp/blob/main/src/fastmcp/utilities/ui.py#L501" target="_blank"><Icon icon="github" style="width: 14px; height: 14px;" /></a>}

create_logo(icon_url: str | None = None, alt_text: str = 'FastMCP') -> str

Create logo HTML.

Args:

• icon_url: Optional custom icon URL. If not provided, uses the FastMCP logo.
• alt_text: Alt text for the logo image.

Returns:

• HTML for logo image tag.

create_status_message ^{<a href="https://github.com/PrefectHQ/fastmcp/blob/main/src/fastmcp/utilities/ui.py#L516" target="_blank"><Icon icon="github" style="width: 14px; height: 14px;" /></a>}

create_status_message(message: str, is_success: bool = True) -> str

Create a status message with icon.

Args:

• message: Status message text
• is_success: True for success (✓), False for error (✕)

Returns:

• HTML for status message

create_info_box ^{<a href="https://github.com/PrefectHQ/fastmcp/blob/main/src/fastmcp/utilities/ui.py#L539" target="_blank"><Icon icon="github" style="width: 14px; height: 14px;" /></a>}

create_info_box(content: str, is_error: bool = False, centered: bool = False, monospace: bool = False) -> str

Create an info box.

Args:

• content: HTML content for the info box
• is_error: True for error styling, False for normal
• centered: True to center the text, False for left-aligned
• monospace: True to use gray monospace font styling instead of blue

Returns:

• HTML for info box

create_detail_box ^{<a href="https://github.com/PrefectHQ/fastmcp/blob/main/src/fastmcp/utilities/ui.py#L568" target="_blank"><Icon icon="github" style="width: 14px; height: 14px;" /></a>}

create_detail_box(rows: list[tuple[str, str]]) -> str

Create a detail box with key-value pairs.

Args:

• rows: List of (label, value) tuples

Returns:

• HTML for detail box

create_button_group ^{<a href="https://github.com/PrefectHQ/fastmcp/blob/main/src/fastmcp/utilities/ui.py#L591" target="_blank"><Icon icon="github" style="width: 14px; height: 14px;" /></a>}

create_button_group(buttons: list[tuple[str, str, str]]) -> str

Create a group of buttons.

Args:

• buttons: List of (text, value, css_class) tuples

Returns:

• HTML for button group

create_secure_html_response ^{<a href="https://github.com/PrefectHQ/fastmcp/blob/main/src/fastmcp/utilities/ui.py#L609" target="_blank"><Icon icon="github" style="width: 14px; height: 14px;" /></a>}

create_secure_html_response(html: str, status_code: int = 200) -> HTMLResponse

Create an HTMLResponse with security headers.

Adds X-Frame-Options: DENY to prevent clickjacking attacks per MCP security best practices.

Args:

• html: HTML content to return
• status_code: HTTP status code

Returns:

• HTMLResponse with security headers