MCP-UI SDK

What it does

MCP-UI lets MCP servers deliver rich interactive web interfaces alongside tool responses. Instead of returning plain text, your tools can render HTML dashboards, forms, data visualisations, and canvases that embed directly in the conversation UI of any compliant MCP host. It pioneered the concept of UI-over-MCP and its patterns directly influenced the official MCP Apps specification.

Key features

• @mcp-ui/server — Create UIResource payloads with raw HTML, external iframes, or Remote-DOM components using a single createUIResource() call
• @mcp-ui/client — Drop-in AppRenderer (MCP Apps standard) and UIResourceRenderer (legacy) React components that sandbox remote UI in iframes
• Multi-language support — TypeScript, Python (mcp-ui-server), and Ruby (mcp_ui_server) SDKs available
• Bidirectional communication — UI snippets can trigger tool calls, prompts, and notifications back to the host via postMessage
• MCP Apps compliant — Fully implements the text/html;profile=mcp-app MIME type and _meta.ui.resourceUri linking standard

Installation

Claude Desktop — add your MCP-UI-enabled server to claude_desktop_config.json:

{
  "mcpServers": {
    "my-server": {
      "command": "npx",
      "args": ["-y", "my-mcp-ui-server"]
    }
  }
}

VS Code Copilot — add to .vscode/mcp.json or user settings:

{
  "mcp": {
    "servers": {
      "my-server": {
        "command": "npx",
        "args": ["-y", "my-mcp-ui-server"]
      }
    }
  }
}

Supported hosts

Works with any MCP Apps-compliant host: Claude, VS Code Copilot, Goose, LibreChat, Postman, MCPJam, and Smithery. ChatGPT is supported via the included Apps SDK adapter.