MCP-UI

🌐 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.

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)}
    />
  );
}

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}` }] };
});

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.