MCP App View

Agentic

Security

New

A sandboxed container for rendering MCP server UIs with security indicators, permission management, and JSON-RPC message logging. Designed for agentic applications that need to safely display third-party MCP app content.

Interactive Preview

Toggle connection status and app type to explore different states

Status

App Type

ui://mcp.data-explorer/main

Connected

Sandboxed

Permissions restricted

Connected

Dashboard

MCP v2024-11-05

Dashboard View

Connection States

The component adapts its UI based on the MCP server connection status

Connected

ui://mcp.analytics-server/overview

Connected

Sandboxed

Permissions restricted

Connected

Dashboard

MCP v2024-11-05

Dashboard View

Disconnected

ui://mcp.form-builder/edit

Disconnected

Sandboxed

Permissions restricted

Disconnected

Form

MCP v2024-11-05

MCP Server Disconnected

Unable to render app content

Error

ui://mcp.config-manager/settings

Error

Sandboxed

Permissions restricted

Error

Settings

MCP v2024-11-05

Connection Error

Failed to establish secure channel with MCP server

App Types

Four built-in app type simulations with distinct visual layouts

form

ui://mcp.example/form

Connected

Sandboxed

Permissions restricted

Connected

Form

MCP v2024-11-05

Form View

dashboard

ui://mcp.example/dashboard

Connected

Sandboxed

Permissions restricted

Connected

Dashboard

MCP v2024-11-05

Dashboard View

data-viz

ui://mcp.example/data-viz

Connected

Sandboxed

Permissions restricted

Connected

Data Visualization

MCP v2024-11-05

Data Visualization View

75%

settings

ui://mcp.example/settings

Connected

Sandboxed

Permissions restricted

Connected

Settings

MCP v2024-11-05

Settings View

Auto-sync data

Enable notifications

Dark mode

Compact view

Props

MCPAppView component API reference

Prop	Type	Default	Description
`uri`	`string`	`'ui://mcp.data-explorer/main'`	The ui:// URI displayed in the address bar
`appName`	`string`	`'Data Explorer'`	Display name of the MCP application
`status`	`ConnectionStatus`	`'connected'`	Current connection status of the MCP server
`appType`	`AppType`	`'dashboard'`	Type of application being rendered in the sandbox
`permissions`	`MCPPermission[]`	`(6 default permissions)`	List of permissions with granted/denied status
`messages`	`JSONRPCMessage[]`	`(6 default messages)`	JSON-RPC message log for postMessage communication
`sandboxLabel`	`string`	`'Sandboxed'`	Label shown in the security bar
`onReload`	`() => void`	—	Callback when the reload button is clicked
`onInspect`	`() => void`	—	Callback when the inspect button is clicked
`onRevokePermission`	`(name: string) => void`	—	Callback when a specific permission is revoked
`onRevokeAll`	`() => void`	—	Callback when all permissions are revoked
`showMessageLog`	`boolean`	`true`	Whether to show the JSON-RPC message log panel
`showPermissions`	`boolean`	`true`	Whether to show the permissions panel
`className`	`string`	—	Additional CSS classes for the container

ConnectionStatus

type ConnectionStatus = 'connected' | 'disconnected' | 'error'

AppType

type AppType = 'form' | 'dashboard' | 'data-viz' | 'settings'

MCPPermission

interface MCPPermission {
  name: string          // e.g. 'read:files'
  granted: boolean      // whether permission is active
  description?: string  // human-readable description
}

JSONRPCMessage

interface JSONRPCMessage {
  id: number
  direction: 'inbound' | 'outbound'
  method: string                          // e.g. 'tools/call'
  timestamp: string                       // e.g. '14:23:01.203'
  params?: Record<string, unknown>
  result?: unknown
  error?: string
}

Usage

Import and implementation examples

import { MCPAppView } from '@/blocks/agentic/mcp-app-view'
import type { MCPPermission, JSONRPCMessage } from '@/blocks/agentic/mcp-app-view'
import { Button } from '@/components/ui/button'

export default function AgentWorkspace() {
  const permissions: MCPPermission[] = [
    { name: 'read:files', granted: true, description: 'Read local files' },
    { name: 'write:files', granted: false, description: 'Modify files' },
    { name: 'network:outbound', granted: true, description: 'HTTP requests' },
  ]

  return (
    <MCPAppView
      uri="ui://mcp.data-explorer/main"
      appName="Data Explorer"
      status="connected"
      appType="dashboard"
      permissions={permissions}
      onReload={() => console.log('Reloading...')}
      onInspect={() => console.log('Opening inspector...')}
      onRevokePermission={(name) => console.log('Revoked:', name)}
      onRevokeAll={() => console.log('All permissions revoked')}
    />
  )
}

Minimal usage

{/* Uses all defaults - just drop it in */}
<MCPAppView />

{/* Specific app type */}
<MCPAppView appType="form" uri="ui://mcp.form-server/edit" />

{/* Error state without panels */}
<MCPAppView
  status="error"
  showMessageLog={false}
  showPermissions={false}
/>

Built With

3 components

This block uses the following UI components from the design system:

Button Badge Collapsible

Features

Built-in functionality

Sandboxed container: Simulates a sandboxed iframe with security indicators and visual boundaries
URI address bar: Displays ui:// URI scheme with shield icon, mimicking browser chrome
Connection states: Connected (green pulse), disconnected (gray), error (rose) with adaptive UI
Four app types: Form, dashboard, data-viz, and settings layouts with realistic skeleton content
Permissions panel: Collapsible list showing granted/denied permissions with per-permission revocation
JSON-RPC message log: Terminal-style log showing inbound/outbound MCP protocol messages with copy support
Sandbox controls: Toolbar with reload, inspect, and revoke-all actions
Security indicators: Visual cues showing sandbox status, lock state, and permission restrictions
Dark mode: Full dark mode support with appropriate color adjustments throughout
forwardRef support: Properly forwards refs for integration with form libraries and external control

Accessibility

Accessibility considerations

ARIA Attributes

Collapsible panels use native button elements for keyboard accessConnection status communicated through both color and text labelPermission states indicated by icon and granted/denied badge counts

Keyboard Navigation

Key	Action
`Tab`	Navigate between toolbar buttons and collapsible panel headers
`Enter / Space`	Toggle permissions or message log panels, activate toolbar buttons

Notes

Terminal-style message log uses monospace font for readability
Copy button in message log appears on hover with descriptive title attribute
Status changes are reflected in both security bar badge and address bar indicator
Consider adding aria-expanded to collapsible panel toggles
Consider adding role="log" to the JSON-RPC message container
Traffic light dots are decorative and do not require alt text

Related Components

AI Tool Call Card AI Permission Request AI Connectors AI Status Indicator