MCP Apps useHostStyleVariables - CSS Variables Hook

MCP Apps SDK

import { useHostStyleVariables } from "@modelcontextprotocol/ext-apps/react";

Overview

useHostStyleVariables applies host-provided CSS custom properties and the document theme to the page. It listens for onhostcontextchanged notifications and updates styles automatically when the host’s theme or style variables change. This hook handles two responsibilities:

CSS variables — Applies styles.variables from the host context as CSS custom properties via applyHostStyleVariables()
Document theme — Sets the data-theme attribute and color-scheme property via applyDocumentTheme()

For font handling, use useHostFonts separately, or use useHostStyles to apply everything at once.

Signature

function useHostStyleVariables(
  app: App | null,
  initialContext?: McpUiHostContext | null,
): void

App | null

required

The connected App instance from useApp, or null during initialization.

McpUiHostContext | null

Initial host context from app?.getHostContext(). Pass this to apply styles immediately on mount without waiting for the first context change notification.

Usage

import { useApp, useHostStyleVariables } from "@modelcontextprotocol/ext-apps/react";

function MyApp() {
  const { app } = useApp({
    appInfo: { name: "MyApp", version: "1.0.0" },
    capabilities: {},
  });

  useHostStyleVariables(app, app?.getHostContext());

  return (
    <div style={{
      background: "var(--color-background-primary)",
      color: "var(--color-text-primary)",
    }}>
      Styled with host variables
    </div>
  );
}

What It Applies

The host sends style variables as part of McpUiHostContext.styles.variables. These are CSS custom properties that match the host’s design system. See CSS Variables for the full list of available variable keys. The hook also applies the theme from McpUiHostContext.theme, setting:

document.documentElement.dataset.theme to "light" or "dark"
document.documentElement.style.colorScheme to match

When to Use

Hook	Applies	Use when
`useHostStyles`	CSS variables + theme + fonts	You want everything (recommended)
`useHostStyleVariables`	CSS variables + theme only	You handle fonts separately or don’t need them
`useHostFonts`	Fonts only	You only need host fonts

useHostStyles — All-in-one styling hook (combines this hook with useHostFonts)
useHostFonts — Host font injection hook
useDocumentTheme — Reactive theme detection hook
CSS Variables — Full list of host style variable keys

The sunpeak framework provides useHostContext which auto-applies host styles in React components.

Overview

App

MCP

React

Server

Styling

Types

MCP Apps useHostStyleVariables - CSS Variables Hook

Overview

Signature

Usage

What It Applies

When to Use

​Overview

​Signature

​Usage

​What It Applies

​When to Use

​Related

Overview

Signature

Usage

What It Applies

When to Use

Related