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 🎉 MCP-UI is now standardized into MCP Apps! Learn more → MCP-UI -> MCP Apps Interactive UI Components over MCP Build rich, dynamic interfaces for AI tools using the MCP Apps standard. Get Started GitHub About 🌐 MCP Apps Standard MCP Apps is the official standard for interactive UI in MCP. The MCP-UI packages implement the spec, and serve as a community playground for future enhancements. 🛠️ Client & Server SDKs The recommended MCP Apps Client SDK, with components for seamless integration. Includes server SDK with utilities. 🔒 Secure All remote code executes in sandboxed iframes, ensuring host and user security while maintaining rich interactivity. 🎨 Flexible Supports HTML content. Works with MCP Apps hosts and legacy MCP-UI hosts alike. See it in action Your browser does not support the video tag. Quick Example ​ Client Side - Render tool UIs with 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 }) => { // Validate URL scheme before opening 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 20 Server Side - Create a tool with an interactive UI using _meta.ui.resourceUri : typescript import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js' ; import { registerAppTool, registerAppResource } from '@modelcontextprotocol/ext-apps/server' ; import { createUIResource } from '@mcp-ui/server' ; import { z } from 'zod' ; const server = new McpServer ({ name: 'my-server' , version: '1.0.0' }); // Create the UI resource const widgetUI = createUIResource ({ uri: 'ui://my-server/widget' , content: { type: 'rawHtml' , htmlString: '<h1>Interactive Widget</h1>' }, encoding: 'text' , }); // Register the resource handler registerAppResource (server, 'widget_ui' , widgetUI.resource.uri, {}, async () => ({ contents: [widgetUI.resource] })); // Register the tool with _meta.ui.resourceUri registerAppTool (server, 'show_widget' , { description: 'Show interactive widget' , inputSchema: { query: z. string () }, _meta: { ui: { resourceUri: widgetUI.resource.uri } } // Links tool to UI }, async ({ query }) => { return { content: [{ type: 'text' , text: `Query: ${ query }` }] }; }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Legacy MCP-UI Support For existing MCP-UI apps or hosts that don't support MCP Apps yet, see the Legacy MCP-UI Adapter guide. Released under the Apache 2.0 License . Copyright © 2025-present Ido Salomon