Skip to content

Commit 3c40362

Browse files
authored
fix: followup app -> view terminology (#339)
1 parent fc0689b commit 3c40362

1 file changed

Lines changed: 46 additions & 46 deletions

File tree

specification/draft/apps.mdx

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -532,7 +532,7 @@ When the View sends an `ui/initialize` request to the Host, the Host SHOULD incl
532532

533533
```typescript
534534
interface HostContext {
535-
/** Metadata of the tool call that instantiated the App */
535+
/** Metadata of the tool call that instantiated the View */
536536
toolInfo?: {
537537
/** JSON-RPC id of the tools/call request */
538538
id?: RequestId,
@@ -545,23 +545,23 @@ interface HostContext {
545545
styles?: {
546546
/** CSS variables for theming */
547547
variables?: Record<McpUiStyleVariableKey, string | undefined>;
548-
/** CSS blocks that apps can inject */
548+
/** CSS blocks that Views can inject */
549549
css?: {
550550
/** CSS for font loading (@font-face rules or @import statements) */
551551
fonts?: string;
552552
};
553553
};
554-
/** How the UI is currently displayed */
554+
/** How the View is currently displayed */
555555
displayMode?: "inline" | "fullscreen" | "pip";
556556
/** Display modes the host supports */
557557
availableDisplayModes?: string[];
558558
/** Container dimensions for the iframe. Specify either width or maxWidth, and either height or maxHeight. */
559559
containerDimensions?: (
560560
| { height: number } // If specified, container is fixed at this height
561-
| { maxHeight?: number } // Otherwise, container height is determined by the UI height, up to this maximum height (if defined)
561+
| { maxHeight?: number } // Otherwise, container height is determined by the View's height, up to this maximum height (if defined)
562562
) & (
563563
| { width: number } // If specified, container is fixed at this width
564-
| { maxWidth?: number } // Otherwise, container width is determined by the UI width, up to this maximum width (if defined)
564+
| { maxWidth?: number } // Otherwise, container width is determined by the View's width, up to this maximum width (if defined)
565565
);
566566
/** User's language/region preference (BCP 47, e.g., "en-US") */
567567
locale?: string;
@@ -668,24 +668,24 @@ interface HostCapabilities {
668668

669669
The `HostContext` provides sizing information via `containerDimensions`:
670670

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**.
672672

673673
#### Dimension Modes
674674

675675
| Mode | Dimensions Field | Meaning |
676676
|------|-----------------|---------|
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. |
680680

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.
682682

683-
#### App Behavior
683+
#### View Behavior
684684

685-
Apps should check the containerDimensions configuration and apply appropriate CSS:
685+
Views should check the containerDimensions configuration and apply appropriate CSS:
686686

687687
```typescript
688-
// In the app's initialization
688+
// In the View's initialization
689689
const containerDimensions = hostContext.containerDimensions;
690690

691691
if (containerDimensions) {
@@ -713,12 +713,12 @@ if (containerDimensions) {
713713

714714
#### Host Behavior
715715

716-
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:
717717

718718
```typescript
719-
// Host listens for size changes from the app
719+
// Host listens for size changes from the View
720720
bridge.onsizechange = ({ width, height }) => {
721-
// Update iframe to match app's content size
721+
// Update iframe to match View's content size
722722
if (width != null) {
723723
iframe.style.width = `${width}px`;
724724
}
@@ -728,7 +728,7 @@ bridge.onsizechange = ({ width, height }) => {
728728
};
729729
```
730730

731-
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.
732732

733733
### Display Modes
734734

@@ -793,7 +793,7 @@ Hosts can optionally pass CSS custom properties via `HostContext.styles.variable
793793
#### Current Standardized Variables
794794

795795
```typescript
796-
/** CSS variable keys available to MCP apps for theming. */
796+
/** CSS variable keys available to Views for theming. */
797797
type McpUiStyleVariableKey =
798798
// Background colors
799799
| "--color-background-primary"
@@ -889,21 +889,21 @@ type McpUiStyleVariableKey =
889889
#### Host Behavior
890890

891891
- 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
893893
- Hosts should use the CSS `light-dark()` function for theme-aware values (i.e. light mode and dark mode colors)
894894

895-
#### App Behavior
895+
#### View Behavior
896896

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:
898898
```
899899
:root {
900900
--color-text-primary: light-dark(#171717, #000000);
901901
--border-radius-small: 8px;
902902
...
903903
}
904904
```
905-
- 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
907907

908908
Example usage of standardized CSS variables:
909909

@@ -946,7 +946,7 @@ hostContext.styles.css.fonts = `
946946
`;
947947
```
948948

949-
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:
950950

951951
```typescript
952952
if (hostContext.styles?.css?.fonts) {
@@ -958,7 +958,7 @@ if (hostContext.styles?.css?.fonts) {
958958

959959
MCP Apps introduces additional JSON-RPC methods for UI-specific functionality:
960960

961-
#### Requests (UI → Host)
961+
#### Requests (View → Host)
962962

963963
`ui/open-link` - Request host to open external URL
964964

@@ -1099,7 +1099,7 @@ Host behavior:
10991099
- If multiple updates are received before the next user message, Host SHOULD only send the last update to the model
11001100
- MAY display context updates to the user
11011101

1102-
#### Notifications (Host → UI)
1102+
#### Notifications (Host → View)
11031103

11041104
`ui/notifications/tool-input` - Host MUST send this notification with the complete tool arguments after the View's initialize request completes.
11051105

@@ -1150,7 +1150,7 @@ View behavior (optional):
11501150
}
11511151
```
11521152

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).
11541154

11551155
`ui/notifications/tool-cancelled` - Tool execution was cancelled
11561156

@@ -1166,7 +1166,7 @@ Host MUST send this notification when tool execution completes (if UI is display
11661166

11671167
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.
11681168

1169-
`ui/resource-teardown` - Host notifies UI before teardown
1169+
`ui/resource-teardown` - Host notifies View before teardown
11701170

11711171
```typescript
11721172
{
@@ -1199,7 +1199,7 @@ Host MUST send this notification if the tool execution was cancelled, for any re
11991199
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.
12001200
Host SHOULD wait for a response before tearing down the resource (to prevent data loss).
12011201

1202-
`ui/notifications/size-changed` - UI’s size changed
1202+
`ui/notifications/size-changed` - View's size changed
12031203

12041204
```typescript
12051205
{
@@ -1357,7 +1357,7 @@ sequenceDiagram
13571357
S --> H: resources/read response
13581358
H --> UI: resources/read response
13591359
end
1360-
opt UI notifications
1360+
opt View notifications
13611361
UI ->> H: notifications (e.g., ui/notifications/size-changed)
13621362
end
13631363
opt Host notifications
@@ -1378,7 +1378,7 @@ sequenceDiagram
13781378
H -x H: Tear down iframe and listeners
13791379
```
13801380

1381-
Note: Cleanup may be triggered at any point in the lifecycle following UI initialization.
1381+
Note: Cleanup may be triggered at any point in the lifecycle following View initialization.
13821382

13831383
#### Key Differences from Pre-SEP MCP-UI:
13841384

@@ -1388,7 +1388,7 @@ Note: Cleanup may be triggered at any point in the lifecycle following UI initia
13881388

13891389
### Data Passing
13901390

1391-
Tool execution results are passed to the UI through two mechanisms:
1391+
Tool execution results are passed to the View through two mechanisms:
13921392

13931393
#### 1. Tool Input (via `ui/notifications/tool-input` notification)
13941394

@@ -1408,7 +1408,7 @@ The original tool call arguments:
14081408
}
14091409
}
14101410

1411-
// UI receives (JSON-RPC notification from Host to UI):
1411+
// View receives (JSON-RPC notification from Host to View):
14121412
{
14131413
jsonrpc: "2.0",
14141414
method: "ui/notifications/tool-input",
@@ -1445,7 +1445,7 @@ The tool's execution result:
14451445
}
14461446
}
14471447

1448-
// UI receives (JSON-RPC notification):
1448+
// View receives (JSON-RPC notification):
14491449
{
14501450
jsonrpc: "2.0",
14511451
method: "ui/notifications/tool-result",
@@ -1474,10 +1474,10 @@ The tool's execution result:
14741474

14751475
#### 3. Interactive Updates
14761476

1477-
UI can request fresh data by calling tools:
1477+
Views can request fresh data by calling tools:
14781478

14791479
```typescript
1480-
// UI requests updated data
1480+
// View requests updated data
14811481
await client.callTool("get_weather", { location: "New York" });
14821482

14831483
// 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
16361636
**Rationale:**
16371637

16381638
- 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
16401640
- Limited variable set (colors, typography, borders) ensures hosts can realistically provide all values
16411641
- Spacing intentionally excluded—layouts break when spacing varies from original design
16421642
- 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
16841684
Attackers may use the embedded UI in different scenarios. For example:
16851685

16861686
- 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
16911691

16921692
### Mitigations
16931693

16941694
#### 1. Iframe Sandboxing
16951695

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.
16971697

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.
16991699

17001700
#### 2. Auditable Communication
17011701

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.
17031703

17041704
**Host behavior:**
17051705

17061706
- Validate all incoming messages from UI iframes
17071707
- Reject malformed message types
1708-
- Log UI-initiated RPC calls for security review
1708+
- Log View-initiated RPC calls for security review
17091709

17101710
#### 3. Predeclared Resource Review
17111711

@@ -1758,7 +1758,7 @@ const allowAttribute = allowList.join(' ');
17581758
### Other risks
17591759

17601760
- **Social engineering:** UI can still display misleading content. Hosts should clearly indicate sandboxed UI boundaries.
1761-
- **Resource consumption:** Malicious UI can consume CPU/memory. Hosts should implement resource limits.
1761+
- **Resource consumption:** Malicious View can consume CPU/memory. Hosts should implement resource limits.
17621762

17631763
## Reservations in MCP
17641764

0 commit comments

Comments
 (0)