📦 Model Context Protocol UI SDK

mcp-ui brings interactive web components to the Model Context Protocol (MCP). Deliver rich, dynamic UI resources directly from your MCP server to be rendered by the client. Take AI interaction to the next level!

This project is an experimental community playground for MCP UI ideas. Expect rapid iteration and enhancements!

💡 What's mcp-ui?

mcp-ui is a playground for the open spec of UI over MCP. It offers a collection of community SDKs comprising:

• @mcp-ui/server (TypeScript): Utilities to generate UI resources (UIResource) on your MCP server.
• @mcp-ui/client (TypeScript): UI components (e.g., <AppRenderer />) to render the UI resources and handle their events.
• mcp_ui_server (Ruby): Utilities to generate UI resources on your MCP server in a Ruby environment.
• mcp-ui-server (Python): Utilities to generate UI resources on your MCP server in a Python environment.

Together, they let you define reusable UI snippets on the server side, seamlessly and securely render them in the client, and react to their actions in the MCP host environment.

✨ Core Concepts

In essence, by using mcp-ui SDKs, servers and hosts can agree on contracts that enable them to create and render interactive UI snippets (as a path to a standardized UI approach in MCP).

UI Resource

The primary payload returned from the server to the client is the UIResource:

interface UIResource {
  type: 'resource';
  resource: {
    uri: string;       // e.g., ui://component/id
    mimeType: 'text/html;profile=mcp-app';
    text?: string;      // HTML content
    blob?: string;      // Base64-encoded HTML content
  };
}

• uri: Unique identifier for caching and routing
  • ui://… — UI resources
• mimeType: text/html;profile=mcp-app — the MCP Apps standard MIME type
• text vs. blob: Choose text for simple strings; use blob for larger or encoded content.

AppRenderer

For MCP Apps hosts, use AppRenderer to render tool UIs:

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

Advanced Usage

You can manually wrap HTML with adapters or access adapter scripts directly:

import { wrapHtmlWithAdapters, getAppsSdkAdapterScript } from '@mcp-ui/server';

// Manually wrap HTML with adapters
const wrappedHtml = wrapHtmlWithAdapters(
  '<button>Click me</button>',
  {
    appsSdk: {
      enabled: true,
      config: { intentHandling: 'ignore' }
    }
  }
);

// Get a specific adapter script
const appsSdkScript = getAppsSdkAdapterScript({ timeout: 60000 });

🏗️ Installation

TypeScript

# using npm
npm install @mcp-ui/server @mcp-ui/client

# or pnpm
pnpm add @mcp-ui/server @mcp-ui/client

# or yarn
yarn add @mcp-ui/server @mcp-ui/client

Ruby

gem install mcp_ui_server

Python

# using pip
pip install mcp-ui-server

# or uv
uv add mcp-ui-server

🚀 Getting Started

You can use GitMCP to give your IDE access to mcp-ui's latest documentation!

TypeScript

1. Server-side: Build your UI resources

   import { createUIResource } from '@mcp-ui/server';
   import {
    createRemoteComponent,
    createRemoteDocument,
    createRemoteText,
   } from '@remote-dom/core';
   
   // Inline HTML
   const htmlResource = createUIResource({
     uri: 'ui://greeting/1',
     content: { type: 'rawHtml', htmlString: '<p>Hello, MCP UI!</p>' },
     encoding: 'text',
   });
   
   // External URL
   const externalUrlResource = createUIResource({
     uri: 'ui://greeting/1',
     content: { type: 'externalUrl', iframeUrl: 'https://example.com' },
     encoding: 'text',
   });
   
   // remote-dom
   const remoteDomResource = createUIResource({
     uri: 'ui://remote-component/action-button',
     content: {
       type: 'remoteDom',
       script: `
        const button = document.createElement('ui-button');
        button.setAttribute('label', 'Click me for a tool call!');
        button.addEventListener('press', () => {
          window.parent.postMessage({ type: 'tool', payload: { toolName: 'uiInteraction', params: { action: 'button-click', from: 'remote-dom' } } }, '*');
        });
        root.appendChild(button);
        `,
       framework: 'react', // or 'webcomponents'
     },
     encoding: 'text',
   });

2. Client-side: Render in your MCP host

   import React from 'react';
   import { UIResourceRenderer } from '@mcp-ui/client';
   
   function App({ mcpResource }) {
     if (
       mcpResource.type === 'resource' &&
       mcpResource.resource.uri?.startsWith('ui://')
     ) {
       return (
         <UIResourceRenderer
           resource={mcpResource.resource}
           onUIAction={(result) => {
             console.log('Action:', result);
           }}
         />
       );
     }
     return <p>Unsupported resource</p>;
   }

Python

Server-side: Build your UI resources

from mcp_ui_server import create_ui_resource

# Inline HTML
html_resource = create_ui_resource({
  "uri": "ui://greeting/1",
  "content": { "type": "rawHtml", "htmlString": "<p>Hello, from Python!</p>" },
  "encoding": "text",
})

# External URL
external_url_resource = create_ui_resource({
  "uri": "ui://greeting/2",
  "content": { "type": "externalUrl", "iframeUrl": "https://example.com" },
  "encoding": "text",
})

Ruby

Server-side: Build your UI resources

require 'mcp_ui_server'

# Inline HTML
html_resource = McpUiServer.create_ui_resource(
  uri: 'ui://greeting/1',
  content: { type: :raw_html, htmlString: '<p>Hello, from Ruby!</p>' },
  encoding: :text
)

# External URL
external_url_resource = McpUiServer.create_ui_resource(
  uri: 'ui://greeting/2',
  content: { type: :external_url, iframeUrl: 'https://example.com' },
  encoding: :text
)

# remote-dom
remote_dom_resource = McpUiServer.create_ui_resource(
  uri: 'ui://remote-component/action-button',
  content: {
    type: :remote_dom,
    script: "
     const button = document.createElement('ui-button');
     button.setAttribute('label', 'Click me from Ruby!');
     button.addEventListener('press', () => {
       window.parent.postMessage({ type: 'tool', payload: { toolName: 'uiInteraction', params: { action: 'button-click', from: 'ruby-remote-dom' } } }, '*');
     });
     root.appendChild(button);
     ",
    framework: :react,
  },
  encoding: :text
)

🚶 Walkthrough

For a detailed, simple, step-by-step guide on how to integrate mcp-ui into your own server, check out the full server walkthroughs on the mcp-ui documentation site:

• TypeScript Server Walkthrough
• Ruby Server Walkthrough
• Python Server Walkthrough

These guides will show you how to add a mcp-ui endpoint to an existing server, create tools that return UI resources, and test your setup with the ui-inspector!

🌍 Examples

Client Examples

• Goose - open source AI agent that supports mcp-ui.
• LibreChat - enhanced ChatGPT clone that supports mcp-ui.
• ui-inspector - inspect local mcp-ui-enabled servers.
• MCP-UI Chat - interactive chat built with the mcp-ui client. Check out the hosted version!
• MCP-UI RemoteDOM Playground (examples/remote-dom-demo) - local demo app to test RemoteDOM resources
• MCP-UI Web Component Demo (examples/wc-demo) - local demo app to test the Web Component integration in hosts

Server Examples

• TypeScript: A full-featured server that is deployed to a hosted environment for easy testing.
  • typescript-server-demo: A simple Typescript server that demonstrates how to generate UI resources.
  • server: A full-featured Typescript server that is deployed to a hosted Cloudflare environment for easy testing.
    • HTTP Streaming: https://remote-mcp-server-authless.idosalomon.workers.dev/mcp
    • SSE: https://remote-mcp-server-authless.idosalomon.workers.dev/sse
• Ruby: A barebones demo server that shows how to use mcp_ui_server and mcp gems together.
• Python: A simple demo server that shows how to use the mcp-ui-server Python package.
• XMCP - Typescript MCP framework with mcp-ui starter example.

Drop those URLs into any MCP-compatible host to see mcp-ui in action. For a supported local inspector, see the ui-inspector.

💻 Supported Hosts

mcp-ui is supported by a growing number of MCP-compatible clients. Feature support varies by host:

| Host | Rendering | UI Actions | Notes | :-------- | :-------: | :--------: | :--------: | | Nanobot | ✅ | ✅ | | ChatGPT | ✅ | ⚠️ | Guide | Postman | ✅ | ⚠️ | | Goose | ✅ | ⚠️ | | LibreChat | ✅ | ⚠️ | | Smithery | ✅ | ❌ | | MCPJam | ✅ | ❌ | | fast-agent | ✅ | ❌ | | VSCode (TBA) | ? | ? |

Legend:

• ✅: Supported
• ⚠️: Partial Support
• ❌: Not Supported (yet)

🔒 Security

Host and user security is one of mcp-ui's primary concerns. In all content types, the remote code is executed in a sandboxed iframe.

🛣️ Roadmap

• [X] Add online playground
• [X] Expand UI Action API (beyond tool calls)
• [X] Support Web Components
• [X] Support Remote-DOM
• [ ] Add component libraries (in progress)
• [ ] Add SDKs for additional programming languages (in progress; Ruby, Python available)
• [ ] Support additional frontend frameworks
• [ ] Add declarative UI content type
• [ ] Support generative UI?

Core Team

mcp-ui is a project by Ido Salomon, in collaboration with Liad Yosef.

🤝 Contributing

Contributions, ideas, and bug reports are welcome! See the contribution guidelines to get started.

📄 License

Apache License 2.0 © The MCP-UI Authors

Disclaimer

This project is provided "as is", without warranty of any kind. The mcp-ui authors and contributors shall not be held liable for any damages, losses, or issues arising from the use of this software. Use at your own risk.