The connected App instance, or null during initialization
OptionalinitialContext: McpUiHostContext | nullInitial host context from the connection (optional).
Pass app?.getHostContext() to apply styles immediately on mount.
function MyApp() {
const { app } = useApp({
appInfo: { name: "MyApp", version: "1.0.0" },
capabilities: {},
});
// Apply all host styles - pass initial context to apply styles from connect() immediately
useHostStyles(app, app?.getHostContext());
return (
<div style={{ background: "var(--color-background-primary)" }}>
Hello!
</div>
);
}
useHostStyleVariables for style variables and theme onlyuseHostFonts for fonts only
Applies all host styling (CSS variables, theme, and fonts) to match the host application.
This is a convenience hook that combines
useHostStyleVariablesanduseHostFonts. Use the individual hooks if you need more control.