The connected App instance, or null during initialization
OptionalinitialContext: McpUiHostContext | nullInitial host context from the connection (optional). If provided, styles and theme will be applied immediately on mount.
function MyApp() {
const { app } = useApp({
appInfo: { name: "MyApp", version: "1.0.0" },
capabilities: {},
});
// Apply host styles - pass initial context to apply styles from connect() immediately
useHostStyleVariables(app, app?.getHostContext());
return (
<div style={{ background: "var(--color-background-primary)" }}>
Hello!
</div>
);
}
applyHostStyleVariables for the underlying styles functionapplyDocumentTheme for the underlying theme functionuseHostFonts for applying host fontsMcpUiStyles for available CSS variables
React hook that applies host style variables and theme as CSS custom properties.
This hook listens to host context changes and automatically applies:
styles.variablesCSS variables todocument.documentElement(e.g.,--color-background-primary)themeviacolor-schemeCSS property, enablinglight-dark()CSS function supportThe hook also applies styles and theme from the initial host context when the app first connects.
Note: If the host provides style values using CSS
light-dark()function, this hook ensures they work correctly by setting thecolor-schemeproperty based on the host's theme preference.