# MCPAppFrame

A sandboxed frame for an MCP App view, talking to your app only through a bridge you control.

- **Use it for**: Showing an MCP App view in a sandbox, connected to your app through a bridge.
- **Not for**: Plain tool output. Try [ToolResult](https://unseenui.com/components/tool-result/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { MCPAppFrame } from '@stackunseen/ui/mcp-apps';
import '@stackunseen/ui/styles.css';
import '@stackunseen/ui/mcp-apps.css';

<MCPAppFrame variant="card" server={server} resource={resource} state="ready" onRequest={decide} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `allowForms` | `boolean` | Let the view submit forms inside the sandbox. |
| `fallback` | `ReactNode` |  |
| `grantedPermissions` | `AppPermissions` | Permissions the host grants to the iframe; nothing is granted by default. |
| `hostCapabilities` | `AppHostCapabilities` | What the host will honour. |
| `hostContext` | `Omit<AppHostContext, "containerDimensions">` |  |
| `hostInfo` | `{ name: string; version: string; }` |  |
| `label` | `string` |  |
| `maxHeight` | `number` | Tallest the frame may grow when the view reports its size. |
| `onClose` | `(() => void)` |  |
| `onNotification` | `((method: string, params: unknown) => void)` |  |
| `onRequest` | `((request: MCPAppRequest, reply: MCPAppReply) => void)` | Every request from the view that passes the capability check. |
| `reason` | `string` | Why the view is blocked or failed, from the host. |
| `resource` (required) | `MCPAppResource \| null` | The fetched resource, or null while the host is still fetching it. |
| `server` (required) | `{ id: string; name: string; }` |  |
| `state` (required) | `MCPAppFrameState` |  |
| `toolInput` | `Record<string, unknown>` | Tool arguments, sent once as ui/notifications/tool-input after the view says it is initialized. |
| `toolResult` | `unknown` | The tool's CallToolResult, sent as ui/notifications/tool-result when it arrives. |
| `variant` | `"card" \| "plain"` |  |

## Keyboard

Tab moves into the view and back out; the Close button is a normal button.

## Works with

[MCPServerCard](https://unseenui.com/components/mcp-server-card/), [MCPToolList](https://unseenui.com/components/mcp-tool-list/)

Page: https://unseenui.com/components/mcp-app-frame/