MCPAppFrame

Markdown

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.

MCPAppFrame preview

Loading example…

Installation

npm install @stackunseen/ui
import { MCPAppFrame } from '@stackunseen/ui/mcp-apps';
Styles: @stackunseen/ui/styles.css and @stackunseen/ui/mcp-apps.css

Usage and props

Import this component from @stackunseen/ui/mcp-apps. Load @stackunseen/ui/styles.css first, then @stackunseen/ui/mcp-apps.css.

Your app fetches the view, decides whether the server may show it, declares what it supports and answers every request. The frame grants no permissions and runs nothing outside its sandbox.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

server · resource · state · reason? · toolInput? · toolResult? · hostCapabilities? · hostContext? · grantedPermissions? · allowForms? · maxHeight? · onRequest? · onNotification? · onClose? · fallback?
How state and callbacks work
All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract
server · resource · state · reason? · toolInput? · toolResult? · hostCapabilities? · hostContext? · grantedPermissions? · allowForms? · maxHeight? · onRequest? · onNotification? · onClose? · fallback?
Keeps honest
Your app fetches the view, decides whether the server may show it, declares what it supports and answers every request. The frame grants no permissions and runs nothing outside its sandbox.
MCP
read_component "MCPAppFrame" on the docs endpoint
Open the Markdown file

Keyboard and customization

Keyboard

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

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio