MCP-UI

Appearance

MCP-UIInteractive UI Components for MCP

Open protocol to build rich, dynamic interfaces for your agentic apps with SDKs that bring UI to AI interactions.

Get Started
GitHub
Live Demo
About
MCP-UI LogoMCP-UI Logo

🌐 Open Protocol

MCP-UI is an open spec to standardize UI over MCP. Write once, run everywhere!

🛠️ Client & Server SDKs

Provides powerful utilities to create interactive UI resources in MCP servers (Typescript, Ruby, and Python), as well as robust components for simple host integration (React and Web Components).

🔒 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'
  },
  encoding: 'text',
});
python
from mcp_ui_server import create_ui_resource

interactive_form = create_ui_resource({
    "uri": "ui://user-form/1",
    "content": {
        "type": "externalUrl",
        "iframeUrl": "https://yourapp.com"
    },
    "encoding": "text"
})
ruby
require 'mcp_ui_server'

interactive_form = McpUiServer.create_ui_resource(
  uri: 'ui://user-form/1',
  content: {
    type: :external_url,
    iframeUrl: 'https://yourapp.com'
  },
  encoding: :text
)

Client Side - Render on the host with a single component:

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

// `mcpResource` would come from your MCP response
function MyApp({ mcpResource }) {
  return (
    <UIResourceRenderer
      resource={mcpResource.resource}
      onUIAction={(action) => {
        console.log('User action:', action);
      }}
    />
  );
}
html
<!-- index.html -->
<ui-resource-renderer id="resource-renderer"></ui-resource-renderer>

<!-- main.js -->
<script type="module">
  // 1. Import the script to register the component
  import '@mcp-ui/client/ui-resource-renderer.wc.js';

  // 2. This object would come from your MCP response
  const mcpResource = {
    resource: {
      uri: 'ui://user-form/1',
      mimeType: 'text/uri-list',
      text: 'https://example.com'
    }
  };

  // 3. Get the element and pass data
  const renderer = document.getElementById('resource-renderer');
  renderer.setAttribute('resource', JSON.stringify(mcpResource.resource));

  // 4. Listen for events
  renderer.addEventListener('onUIAction', (event) => {
    console.log('User action:', event.detail);
  });
</script>