Name: Transparent Background Sample
Availability: InStock
Author: localden

What it does

This is a reference implementation of an MCP App widget designed to blend directly into the chat interface. Unlike standard widgets that sit in opaque boxes, this app removes the background and adopts the host's theme tokens (colors, fonts, and radii) in real-time.

Key features

Seamless Integration: Uses transparent backgrounds to eliminate the "boxed-in" look of standard widgets.
Dynamic Theming: Automatically adapts to light and dark modes using host-provided theme tokens.
Theme Awareness: Implements the ui/notifications/host-context-changed event to update styles instantly when the user switches themes.
Borderless Design: Explicitly requests a borderless frame via prefersBorder: false for a native-feeling experience.

Installation

Claude Desktop

Add the following to your claude_desktop_config.json:

{
  "mcpServers": {
    "transparent-widget-sample": {
      "command": "npm",
      "args": ["start", "--prefix", "/absolute/path/to/mcp-app-transparent-bg", "--", "--stdio"]
    }
  }
}