You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The `HostContext` provides sizing information via `containerDimensions`:
670
670
671
-
-**`containerDimensions`**: The dimensions of the container that holds the app. This controls the actual space the app occupies within the host. Each dimension (height and width) operates independently and can be either **fixed** or **flexible**.
671
+
-**`containerDimensions`**: The dimensions of the container that holds the View. This controls the actual space the View occupies within the host. Each dimension (height and width) operates independently and can be either **fixed** or **flexible**.
672
672
673
673
#### Dimension Modes
674
674
675
675
| Mode | Dimensions Field | Meaning |
676
676
|------|-----------------|---------|
677
-
| Fixed |`height` or `width`| Host controls the size. App should fill the available space. |
678
-
| Flexible |`maxHeight` or `maxWidth`|App controls the size, up to the specified maximum. |
679
-
| Unbounded | Field omitted |App controls the size with no limit. |
677
+
| Fixed |`height` or `width`| Host controls the size. View should fill the available space. |
678
+
| Flexible |`maxHeight` or `maxWidth`|View controls the size, up to the specified maximum. |
679
+
| Unbounded | Field omitted |View controls the size with no limit. |
680
680
681
-
These modes can be combined independently. For example, a host might specify a fixed width but flexible height, allowing the app to grow vertically based on content.
681
+
These modes can be combined independently. For example, a host might specify a fixed width but flexible height, allowing the View to grow vertically based on content.
682
682
683
-
#### App Behavior
683
+
#### View Behavior
684
684
685
-
Apps should check the containerDimensions configuration and apply appropriate CSS:
685
+
Views should check the containerDimensions configuration and apply appropriate CSS:
When using flexible dimensions (no fixed `height` or `width`), hosts MUST listen for `ui/notifications/size-changed` notifications from the app and update the iframe dimensions accordingly:
716
+
When using flexible dimensions (no fixed `height` or `width`), hosts MUST listen for `ui/notifications/size-changed` notifications from the View and update the iframe dimensions accordingly:
Apps using the SDK automatically send size-changed notifications via ResizeObserver when `autoResize` is enabled (the default). The notifications are debounced and only sent when dimensions actually change.
731
+
Views using the SDK automatically send size-changed notifications via ResizeObserver when `autoResize` is enabled (the default). The notifications are debounced and only sent when dimensions actually change.
732
732
733
733
### Display Modes
734
734
@@ -793,7 +793,7 @@ Hosts can optionally pass CSS custom properties via `HostContext.styles.variable
793
793
#### Current Standardized Variables
794
794
795
795
```typescript
796
-
/** CSS variable keys available to MCP apps for theming. */
796
+
/** CSS variable keys available to Views for theming. */
797
797
typeMcpUiStyleVariableKey=
798
798
// Background colors
799
799
|"--color-background-primary"
@@ -889,21 +889,21 @@ type McpUiStyleVariableKey =
889
889
#### Host Behavior
890
890
891
891
- Hosts can provide any subset of standardized variables, or not pass `styles` at all
892
-
- However, unexpected clashes may occur if hosts pass some color variables but not others for example, since apps are instructed to fallback on their own default values for unspecified style variables
892
+
- However, unexpected clashes may occur if hosts pass some color variables but not others for example, since Views are instructed to fallback on their own default values for unspecified style variables
893
893
- Hosts should use the CSS `light-dark()` function for theme-aware values (i.e. light mode and dark mode colors)
894
894
895
-
#### App Behavior
895
+
#### View Behavior
896
896
897
-
-Apps should set default fallback values for the set of these variables that they use, to account for hosts who don't pass some or all style variables. This ensures graceful degradation when hosts omit `styles` or specific variables:
897
+
-Views should set default fallback values for the set of these variables that they use, to account for hosts who don't pass some or all style variables. This ensures graceful degradation when hosts omit `styles` or specific variables:
-Apps can use the `applyHostStyleVariables` utility (or `useHostStyleVariables` if they prefer a React hook) to easily populate the host-provided CSS variables into their style sheet
906
-
-Apps can use the `applyDocumentTheme` utility (or `useDocumentTheme` if they prefer a React hook) to easily respond to Host Context `theme` changes in a way that is compatible with the host's light/dark color variables
905
+
-Views can use the `applyHostStyleVariables` utility (or `useHostStyleVariables` if they prefer a React hook) to easily populate the host-provided CSS variables into their style sheet
906
+
-Views can use the `applyDocumentTheme` utility (or `useDocumentTheme` if they prefer a React hook) to easily respond to Host Context `theme` changes in a way that is compatible with the host's light/dark color variables
Apps can use the `applyHostFonts` utility to inject the font CSS into the document:
949
+
Views can use the `applyHostFonts` utility to inject the font CSS into the document:
950
950
951
951
```typescript
952
952
if (hostContext.styles?.css?.fonts) {
@@ -958,7 +958,7 @@ if (hostContext.styles?.css?.fonts) {
958
958
959
959
MCP Apps introduces additional JSON-RPC methods for UI-specific functionality:
960
960
961
-
#### Requests (UI → Host)
961
+
#### Requests (View → Host)
962
962
963
963
`ui/open-link` - Request host to open external URL
964
964
@@ -1099,7 +1099,7 @@ Host behavior:
1099
1099
- If multiple updates are received before the next user message, Host SHOULD only send the last update to the model
1100
1100
- MAY display context updates to the user
1101
1101
1102
-
#### Notifications (Host → UI)
1102
+
#### Notifications (Host → View)
1103
1103
1104
1104
`ui/notifications/tool-input` - Host MUST send this notification with the complete tool arguments after the View's initialize request completes.
1105
1105
@@ -1150,7 +1150,7 @@ View behavior (optional):
1150
1150
}
1151
1151
```
1152
1152
1153
-
Host MUST send this notification when tool execution completes (if UI is displayed during tool execution).
1153
+
Host MUST send this notification when tool execution completes (if the View is displayed during tool execution).
1154
1154
1155
1155
`ui/notifications/tool-cancelled` - Tool execution was cancelled
1156
1156
@@ -1166,7 +1166,7 @@ Host MUST send this notification when tool execution completes (if UI is display
1166
1166
1167
1167
Host MUST send this notification if the tool execution was cancelled, for any reason (which can optionally be specified), including user action, sampling error, classifier intervention, etc.
1168
1168
1169
-
`ui/resource-teardown` - Host notifies UI before teardown
1169
+
`ui/resource-teardown` - Host notifies View before teardown
1170
1170
1171
1171
```typescript
1172
1172
{
@@ -1199,7 +1199,7 @@ Host MUST send this notification if the tool execution was cancelled, for any re
1199
1199
Host MUST send this notification before tearing down the UI resource, for any reason, including user action, resource re-allocation, etc. The Host MAY specify the reason.
1200
1200
Host SHOULD wait for a response before tearing down the resource (to prevent data loss).
@@ -1408,7 +1408,7 @@ The original tool call arguments:
1408
1408
}
1409
1409
}
1410
1410
1411
-
//UI receives (JSON-RPC notification from Host to UI):
1411
+
//View receives (JSON-RPC notification from Host to View):
1412
1412
{
1413
1413
jsonrpc: "2.0",
1414
1414
method: "ui/notifications/tool-input",
@@ -1445,7 +1445,7 @@ The tool's execution result:
1445
1445
}
1446
1446
}
1447
1447
1448
-
//UI receives (JSON-RPC notification):
1448
+
//View receives (JSON-RPC notification):
1449
1449
{
1450
1450
jsonrpc: "2.0",
1451
1451
method: "ui/notifications/tool-result",
@@ -1474,10 +1474,10 @@ The tool's execution result:
1474
1474
1475
1475
#### 3. Interactive Updates
1476
1476
1477
-
UI can request fresh data by calling tools:
1477
+
Views can request fresh data by calling tools:
1478
1478
1479
1479
```typescript
1480
-
//UI requests updated data
1480
+
//View requests updated data
1481
1481
awaitclient.callTool("get_weather", { location: "New York" });
1482
1482
1483
1483
// Result returned via standard tools/call response
@@ -1636,7 +1636,7 @@ This proposal synthesizes feedback from the UI CWG and MCP-UI community, host im
1636
1636
**Rationale:**
1637
1637
1638
1638
- CSS variables are universal, framework-agnostic, and require no runtime
1639
-
-Apps apply styles via `var(--name)` with fallbacks for graceful degradation
1639
+
-Views apply styles via `var(--name)` with fallbacks for graceful degradation
1640
1640
- Limited variable set (colors, typography, borders) ensures hosts can realistically provide all values
1641
1641
- Spacing intentionally excluded—layouts break when spacing varies from original design
1642
1642
- No UI component library—no single library works across all host environments
@@ -1684,28 +1684,28 @@ Hosting interactive UI content from potentially untrusted MCP servers requires c
1684
1684
Attackers may use the embedded UI in different scenarios. For example:
1685
1685
1686
1686
- Malicious server delivers harmful HTML content
1687
-
- Compromised UI attempts to escape sandbox
1688
-
-UI attempts unauthorized tool execution
1689
-
-UI exfiltrates sensitive host data
1690
-
-UI performs phishing or social engineering
1687
+
- Compromised View attempts to escape sandbox
1688
+
-View attempts unauthorized tool execution
1689
+
-View exfiltrates sensitive host data
1690
+
-View performs phishing or social engineering
1691
1691
1692
1692
### Mitigations
1693
1693
1694
1694
#### 1. Iframe Sandboxing
1695
1695
1696
-
All UI content MUST be rendered in sandboxed iframes with restricted permissions.
1696
+
All View content MUST be rendered in sandboxed iframes with restricted permissions.
1697
1697
1698
-
The sandbox limits the UI from accessing the host or manipulating it. All communication with the host is done via `postMessage`, where the host is in control.
1698
+
The sandbox limits the View from accessing the host or manipulating it. All communication with the host is done via `postMessage`, where the host is in control.
1699
1699
1700
1700
#### 2. Auditable Communication
1701
1701
1702
-
All UI-to-host communication goes through auditable MCP JSON-RPC messages.
1702
+
All View-to-host communication goes through auditable MCP JSON-RPC messages.
1703
1703
1704
1704
**Host behavior:**
1705
1705
1706
1706
- Validate all incoming messages from UI iframes
1707
1707
- Reject malformed message types
1708
-
- Log UI-initiated RPC calls for security review
1708
+
- Log View-initiated RPC calls for security review
0 commit comments