MCP-UIInteractive UI Components for MCP

Build rich, dynamic user interfaces for your MCP applications with TypeScript SDKs that bring UI to AI interactions.

Get Started

View on GitHub

Live Demo

⚛️ Client SDK

React components and hooks for seamless frontend integration. Render interactive UI resources with the UIResourceRenderer component and handle UI actions effortlessly.

🛠️ Server SDK

Powerful utilities to construct interactive UI for MCP servers. Create HTML, React, Web Components, and external app UI with ergonomic API.

🔒 Secure

All remote code executes in sandboxed iframes, ensuring host and user security while maintaining rich interactivity.

🎨 Flexible

Support for multiple content types, including iframes and Remote DOM components that match your host's look-and-feel.

See it in action

Quick Example

Server Side - Create interactive resources to return in your MCP tool results:

typescript

import { createUIResource } from '@mcp-ui/server';

const interactiveForm = createUIResource({
  uri: 'ui://user-form/1',
  content: { 
    type: 'externalUrl', 
    iframeUrl: 'https://yourapp.com'
  },
  delivery: 'text',
});

Client Side - Render with one component:

tsx

import { UIResourceRenderer } from '@mcp-ui/client';

function MyApp({ mcpResource }) {
  return (
    <UIResourceRenderer
      resource={mcpResource.resource}
      onUIAction={(action) => {
        console.log('User action:', action);
        return { status: 'ok' };
      }}
    />
  );
}