> ## Documentation Index
> Fetch the complete documentation index at: https://sunpeak.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# MCP Apps Core Types - TypeScript Type Reference

> TypeScript type reference for MCP Apps: McpUiHostContext, McpUiTheme, McpUiDisplayMode, McpUiHostCapabilities, McpUiAppCapabilities, McpUiHostStyles, CSP, permissions, and metadata types.

<Badge color="green">MCP Apps SDK</Badge>

```ts theme={null}
import type {
  McpUiHostContext,
  McpUiHostCapabilities,
  McpUiAppCapabilities,
  McpUiClientCapabilities,
  McpUiTheme,
  McpUiDisplayMode,
  McpUiStyles,
  McpUiStyleVariableKey,
  McpUiHostStyles,
  McpUiHostCss,
  McpUiToolMeta,
  McpUiToolVisibility,
  McpUiResourceMeta,
  McpUiResourceCsp,
  McpUiResourcePermissions,
  McpUiSupportedContentBlockModalities,
} from "@modelcontextprotocol/ext-apps";
```

## McpUiHostContext

Rich context about the host environment, provided during initialization and updated via `onhostcontextchanged`.

```ts theme={null}
interface McpUiHostContext {
  toolInfo?: {
    id?: RequestId;
    tool: Tool;
  };
  theme?: McpUiTheme;
  styles?: McpUiHostStyles;
  displayMode?: McpUiDisplayMode;
  availableDisplayModes?: McpUiDisplayMode[];
  containerDimensions?: {
    width?: number;     // pixels
    maxWidth?: number;  // pixels
    height?: number;    // pixels
    maxHeight?: number; // pixels
  };
  locale?: string;           // BCP 47 format (e.g., "en-US")
  timeZone?: string;         // IANA format (e.g., "America/New_York")
  userAgent?: string;        // Host application identifier
  platform?: "web" | "desktop" | "mobile";
  deviceCapabilities?: {
    touch?: boolean;
    hover?: boolean;
  };
  safeAreaInsets?: {
    top: number;    // pixels
    right: number;  // pixels
    bottom: number; // pixels
    left: number;   // pixels
  };
}
```

## McpUiHostCapabilities

Capabilities supported by the host, received during initialization.

```ts theme={null}
interface McpUiHostCapabilities {
  experimental?: {};
  openLinks?: {};
  downloadFile?: {};
  serverTools?: { listChanged?: boolean };
  serverResources?: { listChanged?: boolean };
  logging?: {};
  sandbox?: {
    permissions?: McpUiResourcePermissions;
    csp?: McpUiResourceCsp;
  };
  updateModelContext?: McpUiSupportedContentBlockModalities;
  message?: McpUiSupportedContentBlockModalities;
  sampling?: { tools?: {} };
}
```

| Field                | Description                                                                                                                                                                |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `openLinks`          | Host supports [`openLink()`](/mcp-apps/app/requests/open-link)                                                                                                             |
| `downloadFile`       | Host supports [`downloadFile()`](/mcp-apps/app/requests/download-file)                                                                                                     |
| `serverTools`        | Host can proxy [`callServerTool()`](/mcp-apps/app/requests/call-server-tool) to the MCP server                                                                             |
| `serverResources`    | Host can proxy [`readServerResource()`](/mcp-apps/app/requests/read-server-resource) to the MCP server                                                                     |
| `logging`            | Host accepts [`sendLog()`](/mcp-apps/app/requests/send-log) messages                                                                                                       |
| `sandbox`            | Permissions and CSP applied by the host                                                                                                                                    |
| `updateModelContext` | Host accepts [`updateModelContext()`](/mcp-apps/app/requests/update-model-context)                                                                                         |
| `message`            | Host accepts [`sendMessage()`](/mcp-apps/app/requests/send-message)                                                                                                        |
| `sampling`           | Host supports [`createSamplingMessage()`](/mcp-apps/app/requests/create-sampling-message) for LLM completions. `sampling.tools` indicates tool-augmented sampling support. |

## McpUiAppCapabilities

Capabilities provided by the View, sent during initialization.

```ts theme={null}
interface McpUiAppCapabilities {
  experimental?: {};
  tools?: { listChanged?: boolean };
  availableDisplayModes?: McpUiDisplayMode[];
}
```

| Field                   | Description                                               |
| ----------------------- | --------------------------------------------------------- |
| `tools`                 | App exposes tools that the host can call via `oncalltool` |
| `availableDisplayModes` | Display modes the app supports                            |

## McpUiClientCapabilities

Advertised by hosts to servers via the MCP `extensions` field. Used with `getUiCapability()`.

```ts theme={null}
interface McpUiClientCapabilities {
  mimeTypes?: string[];  // Must include "text/html;profile=mcp-app"
}
```

## McpUiTheme

```ts theme={null}
type McpUiTheme = "light" | "dark";
```

The [sunpeak framework](/quickstart) also exports a short alias: `Theme` (equivalent to `McpUiTheme`).

## McpUiDisplayMode

```ts theme={null}
type McpUiDisplayMode = "inline" | "fullscreen" | "pip";
```

The [sunpeak framework](/quickstart) also exports a short alias: `DisplayMode` (equivalent to `McpUiDisplayMode`).

## McpUiHostStyles

```ts theme={null}
interface McpUiHostStyles {
  variables?: McpUiStyles;
  css?: McpUiHostCss;
}
```

## McpUiHostCss

```ts theme={null}
interface McpUiHostCss {
  fonts?: string;  // @font-face rules or @import statements
}
```

## McpUiStyles

A record mapping CSS variable names to string values. All keys are optional.

```ts theme={null}
type McpUiStyles = Record<McpUiStyleVariableKey, string | undefined>;
```

See [CSS Variables](/mcp-apps/styling/css-variables) for the full list of variable keys.

## McpUiToolMeta

UI metadata for tools, set in `_meta.ui` of tool configuration.

```ts theme={null}
interface McpUiToolMeta {
  resourceUri?: string;
  visibility?: McpUiToolVisibility[];  // Default: ["model", "app"]
}
```

## McpUiToolVisibility

```ts theme={null}
type McpUiToolVisibility = "model" | "app";
```

## McpUiResourceMeta

UI metadata for resources, set in `_meta.ui` of resource content items.

```ts theme={null}
interface McpUiResourceMeta {
  csp?: McpUiResourceCsp;
  permissions?: McpUiResourcePermissions;
  domain?: string;
  prefersBorder?: boolean;
}
```

## McpUiResourceCsp

Content Security Policy configuration.

```ts theme={null}
interface McpUiResourceCsp {
  connectDomains?: string[];     // fetch/XHR/WebSocket origins
  resourceDomains?: string[];    // img/script/style/font/media origins
  frameDomains?: string[];       // Nested iframe origins
  baseUriDomains?: string[];     // Allowed base URIs
}
```

## McpUiResourcePermissions

Browser capabilities requested by the resource.

```ts theme={null}
interface McpUiResourcePermissions {
  camera?: {};
  microphone?: {};
  geolocation?: {};
  clipboardWrite?: {};
}
```

## McpUiSupportedContentBlockModalities

Content block types supported by the host for `sendMessage` and `updateModelContext`.

```ts theme={null}
interface McpUiSupportedContentBlockModalities {
  text?: {};
  image?: {};
  audio?: {};
  resource?: {};
  resourceLink?: {};
  structuredContent?: {};
}
```

<Tip>
  The [sunpeak framework](/quickstart) provides convenience hooks for accessing these types reactively: [`useHostContext`](/app-framework/hooks/use-host-context), [`useHostInfo`](/app-framework/hooks/use-host-info), and [`useTheme`](/app-framework/hooks/use-theme).
</Tip>