mcp-host-styling-integration

mcp-host-styling-integration

Integrate MCP App UIs with the host application's theming system so apps look native in Claude Desktop, ChatGPT, VS Code, Goose, Postman, and other MCP-enabled hosts.

Overview

MCP Apps render in sandboxed iframes inside host applications. Each host has its own visual theme (colors, fonts, border radii, spacing). The MCP Apps SDK provides:

• CSS variables (--color-, --font-, --border-radius-*) injected by the host
• SDK helpers (applyDocumentTheme, applyHostStyleVariables, applyHostFonts) to apply them
• React hooks (useHostStyles, useHostStyleVariables, useHostFonts) for React apps
• onhostcontextchanged event fired when theme changes (e.g., dark mode toggle)

The key principle is: always use CSS variable fallbacks so the app looks correct both as an MCP App (host provides variables) and standalone (fallback values apply).

Capabilities

Host CSS Variable Integration

• Apply all host CSS variables with sensible fallback values
• Support color variables: --color-background-primary, --color-background-secondary, --color-text-primary, --color-text-secondary, --color-border-primary
• Support font variables: --font-sans, --font-mono, --font-text-base-size, --font-text-sm-size
• Support layout variables: --border-radius-sm, --border-radius-md, --border-radius-lg

onhostcontextchanged Handler

• Listen for theme changes from the host
• Reapply styling when theme changes (e.g., light to dark mode)
• Access host context: theme, display mode, safe area insets

Safe Area Insets

• Apply safe area padding for mobile or embedded contexts
• Handle env(safe-area-inset-top), env(safe-area-inset-bottom), etc.

Display Mode Detection

• Detect embedded vs fullscreen mode
• Adapt layout based on available space
• Configure fullscreen mode via tool metadata

SDK Helper Functions

• applyDocumentTheme(theme) -- sets document-level theme class
• applyHostStyleVariables(context) -- applies all CSS variables from host
• applyHostFonts(context) -- loads and applies host fonts

React Hook Integration

• useHostStyles() -- combined hook applying theme, variables, and fonts
• useHostStyleVariables() -- CSS variables only
• useHostFonts() -- font loading only

Usage

Vanilla JS: Full Host Styling

import {
  App,
  PostMessageTransport,
  applyDocumentTheme,
  applyHostStyleVariables,
  applyHostFonts,
} from '@modelcontextprotocol/ext-apps';

const app = new App({ transport: new PostMessageTransport() });

// Register handler BEFORE connect()
app.onhostcontextchanged = (params) => {
  const ctx = params.context;

  // Apply theme (light/dark)
  if (ctx.theme) {
    applyDocumentTheme(ctx.theme);
  }

  // Apply CSS variables
  applyHostStyleVariables(ctx);

  // Load and apply fonts
  applyHostFonts(ctx);
};

// THEN connect
await app.connect();

React: useHostStyles Hook

import { useApp, useHostStyles } from '@modelcontextprotocol/ext-apps/react';

function MyApp() {
  const app = useApp();
  useHostStyles();  // Handles all theme/variable/font application

  return (
    <div className="app-container">
      <h1>My MCP App</h1>
    </div>
  );
}

CSS with Fallback Values

/* Always use fallbacks so app works standalone too */
.app-container {
  background-color: var(--color-background-primary, #ffffff);
  color: var(--color-text-primary, #1a1a1a);
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  font-size: var(--font-text-base-size, 14px);
  border-radius: var(--border-radius-md, 8px);
}

.card {
  background-color: var(--color-background-secondary, #f5f5f5);
  border: 1px solid var(--color-border-primary, #e0e0e0);
  border-radius: var(--border-radius-sm, 4px);
  padding: 16px;
}

.label {
  color: var(--color-text-secondary, #666666);
  font-size: var(--font-text-sm-size, 12px);
}

.code {
  font-family: var(--font-mono, 'Courier New', monospace);
}

/* Safe area insets for mobile/embedded contexts */
.app-root {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

Available Host CSS Variables

| Variable | Category | Description |

|----------|----------|-------------|

| --color-background-primary | Color | Main background |

| --color-background-secondary | Color | Card/section background |

| --color-background-tertiary | Color | Nested/subtle background |

| --color-text-primary | Color | Main text |

| --color-text-secondary | Color | Secondary/muted text |

| --color-text-tertiary | Color | Subtle/hint text |

| --color-border-primary | Color | Main borders |

| --color-border-secondary | Color | Subtle borders |

| --color-accent | Color | Interactive elements |

| --color-error | Color | Error states |

| --color-success | Color | Success states |

| --color-warning | Color | Warning states |

| --font-sans | Font | Sans-serif font family |

| --font-mono | Font | Monospace font family |

| --font-text-xs-size | Font | Extra small text size |

| --font-text-sm-size | Font | Small text size |

| --font-text-base-size | Font | Base text size |

| --font-text-lg-size | Font | Large text size |

| --font-text-xl-size | Font | Extra large text size |

| --border-radius-sm | Layout | Small border radius |

| --border-radius-md | Layout | Medium border radius |

| --border-radius-lg | Layout | Large border radius |

| --border-radius-full | Layout | Full/pill border radius |

Hybrid App Styling (MCP + Standalone)

/* Works in BOTH modes because of fallback values */
body {
  margin: 0;
  padding: 0;
  background-color: var(--color-background-primary, #ffffff);
  color: var(--color-text-primary, #1a1a1a);
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
}

/* When host provides variables, they override fallbacks automatically */
/* When running standalone, fallback values apply */

Fullscreen Mode

// Configure fullscreen in the tool registration
registerAppTool(server, {
  name: 'show_dashboard',
  resourceUri: 'app:///dashboard',
  // Request fullscreen display
  displayMode: 'fullscreen',
  async handler(args) { /* ... */ },
});

Common Pitfalls

1. Hardcoding colors/fonts: Always use CSS variables with fallbacks. Never hardcode #ffffff or Arial without a variable.
2. Forgetting fallbacks: Without fallback values, standalone mode will have no styling.
3. Not handling theme changes: The host can switch themes at any time. Always implement onhostcontextchanged.
4. Ignoring safe area insets: On mobile or certain embedded contexts, content can be obscured without safe area padding.
5. Applying styles after connect(): Register onhostcontextchanged BEFORE app.connect().

Verification Checklist

• [ ] All colors use var(--color-*, fallback) pattern
• [ ] All fonts use var(--font-*, fallback) pattern
• [ ] onhostcontextchanged handler registered BEFORE app.connect()
• [ ] applyDocumentTheme / applyHostStyleVariables / applyHostFonts called in handler
• [ ] CSS fallback values are sensible defaults (not broken/empty)
• [ ] Safe area insets applied to root container
• [ ] App looks correct in both MCP mode (host variables) and standalone (fallbacks)
• [ ] Theme switch (light/dark) handled dynamically

Task Definition

const mcpHostStylingTask = defineTask({
  name: 'mcp-host-styling-integration',
  description: 'Integrate MCP App UI with host theming system',

  inputs: {
    framework: { type: 'string', required: true },
    hybrid: { type: 'boolean', default: false },
    fullscreen: { type: 'boolean', default: false }
  },

  outputs: {
    cssFileCreated: { type: 'boolean' },
    handlerRegistered: { type: 'boolean' },
    artifacts: { type: 'array' }
  },

  async run(inputs, taskCtx) {
    return {
      kind: 'skill',
      title: `Integrate host styling (${inputs.framework})`,
      skill: {
        name: 'mcp-host-styling-integration',
        context: {
          framework: inputs.framework,
          hybrid: inputs.hybrid,
          fullscreen: inputs.fullscreen,
          instructions: [
            'Create CSS with host variable fallbacks',
            'Implement onhostcontextchanged handler',
            'Apply theme, style variables, and fonts via SDK helpers',
            'Add safe area inset padding',
            'Verify styling in both MCP and standalone modes'
          ]
        }
      },
      io: {
        inputJsonPath: `tasks/${taskCtx.effectId}/input.json`,
        outputJsonPath: `tasks/${taskCtx.effectId}/result.json`
      }
    };
  }
});

Applicable Processes

• create-mcp-app.js
• add-app-to-mcp-server.js
• convert-web-app-to-mcp.js

External Dependencies

• @modelcontextprotocol/ext-apps (applyDocumentTheme, applyHostStyleVariables, applyHostFonts)
• @modelcontextprotocol/ext-apps/react (useHostStyles, useHostStyleVariables, useHostFonts) -- React only

References

• MCP Apps SDK - Styles
• MCP Apps SDK - React Hooks
• MCP Apps Patterns

Related Skills

• mcp-app-scaffolding
• mcp-tool-resource-pattern
• mcp-app-verification
• single-file-bundling

Related Agents

• mcp-ui-developer
• mcp-app-architect