@mcp-ui/client Overview | MCP-UI Skip to content MCP-UI Search K Main Navigation Home Guide Team Examples UI Inspector Server Examples TypeScript Ruby Python Client Examples Overview Packages @mcp-ui/client @mcp-ui/server mcp_ui_server Gem mcp-ui-server (PyPI) Appearance Menu Return to top Sidebar Navigation Getting Started Introduction Installation Core Concepts Embeddable UI Supported Hosts Protocol Integrations MCP Apps Apps SDK (ChatGPT) Server SDKs TypeScript Overview Walkthrough Usage & Examples Ruby Overview Walkthrough Usage & Examples Python Overview Walkthrough Usage & Examples Client SDK Overview Walkthrough AppRenderer On this page @mcp-ui/client Overview ​ The @mcp-ui/client package provides components for rendering MCP tool UIs in your host application using the MCP Apps standard. What's Included? ​ MCP Apps Components ​ * <AppRenderer /> : High-level component for MCP Apps hosts. Fetches resources, handles lifecycle, renders tool UIs. * <AppFrame /> : Lower-level component for when you have pre-fetched HTML and an AppBridge instance. * AppBridge : Handles JSON-RPC communication between host and guest UI. Utility Functions ​ * getResourceMetadata(resource) : Extracts the resource's _meta content (standard MCP metadata) * getUIResourceMetadata(resource) : Extracts only the MCP-UI specific metadata keys (prefixed with mcpui.dev/ui- ) from the resource's _meta content * isUIResource() : Utility function to check if content is a UI resource * UI_EXTENSION_CAPABILITIES : Declares UI extension support for your MCP client Purpose ​ * MCP Apps Compliance : Implements the MCP Apps standard for UI over MCP * Simplified Rendering : AppRenderer handles resource fetching, lifecycle, and rendering automatically * Security : All UIs render in sandboxed iframes * Interactivity : JSON-RPC communication between host and guest UI Quick Example: AppRenderer ​ tsx import { AppRenderer } from '@mcp-ui/client' ; function ToolUI ({ client , toolName , toolInput , toolResult }) { return ( < AppRenderer client = {client} toolName = {toolName} sandbox = {{ url: sandboxUrl }} toolInput = {toolInput} toolResult = {toolResult} onOpenLink = { async ({ url }) => { if (url. startsWith ( 'https://' ) || url. startsWith ( 'http://' )) { window. open (url); } }} onMessage = { async ( params ) => console. log ( 'Message:' , params)} /> ); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Building ​ This package uses Vite in library mode. It outputs ESM ( .mjs ) and UMD ( .js ) formats, plus TypeScript declarations ( .d.ts ). react is externalized. To build just this package from the monorepo root: bash pnpm build --filter @mcp-ui/client 1 Utility Functions Reference ​ getResourceMetadata(resource) ​ Extracts the standard MCP metadata from a resource's _meta property. typescript import { getResourceMetadata } from '@mcp-ui/client' ; const resource = { uri: 'ui://example/demo' , mimeType: 'text/html' , text: '<div>Hello</div>' , _meta: { title: 'Demo Component' , version: '1.0.0' , 'mcpui.dev/ui-preferred-frame-size' : [ '800px' , '600px' ], 'mcpui.dev/ui-initial-render-data' : { theme: 'dark' }, author: 'Development Team' } }; const metadata = getResourceMetadata (resource); console. log (metadata); // Output: { // title: 'Demo Component', // version: '1.0.0', // 'mcpui.dev/ui-preferred-frame-size': ['800px', '600px'], // 'mcpui.dev/ui-initial-render-data': { theme: 'dark' }, // author: 'Development Team' // } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 getUIResourceMetadata(resource) ​ Extracts only the MCP-UI specific metadata keys (those prefixed with mcpui.dev/ui- ) from a resource's _meta property, with the prefixes removed for easier access. typescript import { getUIResourceMetadata } from '@mcp-ui/client' ; const resource = { uri: 'ui://example/demo' , mimeType: 'text/html' , text: '<div>Hello</div>' , _meta: { title: 'Demo Component' , version: '1.0.0' , 'mcpui.dev/ui-preferred-frame-size' : [ '800px' , '600px' ], 'mcpui.dev/ui-initial-render-data' : { theme: 'dark' }, author: 'Development Team' } }; const uiMetadata = getUIResourceMetadata (resource); console. log (uiMetadata); // Output: { // 'preferred-frame-size': ['800px', '600px'], // 'initial-render-data': { theme: 'dark' }, // } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 See More ​ See the following pages for more details: * Client SDK Walkthrough - Step-by-step guide to building an MCP Apps client * AppRenderer Component - Full API reference for the MCP Apps renderer Edit this page on GitHub Last updated: Pager Previous page Usage & Examples Next page Walkthrough Released under the Apache 2.0 License . Copyright © 2025-present Ido Salomon