Mcp Ui
Mcp Ui — UI over MCP. Create next-gen UI experiences with the protocol and SDK!
Last verified:
What is Mcp Ui?
Mcp Ui is an SDK for building interactive UI components over the Model Context Protocol (MCP). It enables MCP servers to deliver rich, dynamic HTML interfaces directly to clients, transforming how AI tools present information. The package implements the MCP Apps standard for interactive UI and serves as a community playground for future enhancements. The tool provides multi-language SDKs including TypeScript (@mcp-ui/server and @mcp-ui/client), Ruby (mcp_ui_server gem), and Python (mcp-ui-server). Key features include the UIResource contract that defines how interactive UI is structured and delivered, sandboxed iframe execution for security, two-way communication between resources and host applications via postMessage, and support for HTML content, external URLs, and Remote DOM Javascript resources. The React component <UIResourceRenderer /> and Web Component <ui-resource-renderer> handle automatic rendering of all resource types. MCP-UI is designed for developers building MCP-enabled applications who want to create next-gen UI experiences. It targets server developers who need to return UI from MCP tools, client developers who need to render UI resources in their frontend applications, and AI agent builders looking to enhance user interaction beyond plain text responses. Supported hosts include Nanobot, ChatGPT, Postman, Goose, LibreChat, and others. The project is experimental with rapid iteration expected, licensed under Apache 2.0, and has gained 2.9k stars on GitHub. All remote code executes in sandboxed iframes ensuring host and user security while maintaining rich interactivity.
Mcp Ui pricing
Pricing model: Freemium
Free and open source under Apache 2.0 license. All SDKs (@mcp-ui/server, @mcp-ui/client, mcp_ui_server, mcp-ui-server) are available at no cost via npm, gem, and pip. No paid tiers or enterprise plans mentioned on the website.
Mcp Ui pros
- Standardized UI resource protocol across MCP applications
- Secure sandboxed iframe execution prevents malicious code
- Interactive two-way communication between UI and host
- Multi-language SDK support (TypeScript, Ruby, Python)
- React component <UIResourceRenderer /> for easy integration
- Web Component <ui-resource-renderer> for framework-agnostic use
- Supports HTML content, external URLs, and Remote DOM
- Automatic resource type detection and rendering
- UIActions callback for handling tool calls, prompts, intents
- Base64 blob encoding option for larger content
- Error handling with InvalidURIError exceptions
- Compatible with MCP Apps hosts and legacy MCP-UI hosts
- Platform adapters for Apps SDK environments like ChatGPT
- FastMCP framework integration support
- 2.9k GitHub stars showing community adoption
Mcp Ui cons
- Experimental project with rapid iteration and breaking changes
- No official online playground available yet
- Partial UI action support in some hosts like ChatGPT
- No UI action support in Smithery, MCPJam, fast-agent
- Remote DOM support still in progress
- Web Components support still in progress
- Component libraries still under development
- VS Code support marked as TBA (not confirmed)
- Requires Node.js v22.x and pnpm v9 for TypeScript SDK
- No declared declarative UI content type yet
- Generative UI support not implemented
Frequently asked questions about Mcp Ui
What is MCP-UI?
MCP-UI is a playground for the open spec of UI over MCP that offers community SDKs including @mcp-ui/server (TypeScript), @mcp-ui/client (TypeScript), mcp_ui_server (Ruby), and mcp-ui-server (Python). It brings interactive web components to the Model Context Protocol, allowing servers to deliver rich, dynamic UI resources directly to clients.
What is a UIResource?
UIResource is the primary payload returned from server to client with structure: type='resource', resource.uri (ui:// scheme), resource.mimeType (text/html, text/uri-list, or application/vnd.mcp-ui.remote-dom), and resource.text or resource.blob for content. The uri uniquely identifies the resource and mimeType determines rendering method.
How do I install MCP-UI?
For TypeScript: npm install @mcp-ui/server @mcp-ui/client. For Ruby: gem install mcp_ui_server. For Python: pip install mcp-ui-server or uv add mcp-ui-server. The project is a monorepo that can be cloned with git clone https://github.com/idosal/mcp-ui.git and dependencies installed with pnpm install.
How does the server-side SDK work?
Server-side SDKs use createUIResource to create UI resource objects. In TypeScript: import { createUIResource } from '@mcp-ui/server' and call it with uri, content (rawHtml or externalUrl), and encoding (text or blob). The returned resource is included in the MCP tool response content array.
How does the client-side rendering work?
Client-side uses <UIResourceRenderer /> React component or <ui-resource-renderer> Web Component. Pass the resource object from MCP response as the resource prop. The component automatically detects resource type (HTML, external URL, or Remote DOM) and renders appropriately. Use onUIAction prop to handle actions from the UI.
What resource types are supported?
MCP-UI supports HTML Resources (text/html) for direct HTML content rendered via iframe srcDoc, External URLs (text/uri-list) for embedding external apps via iframe src, and Remote DOM Resources (application/vnd.mcp-ui.remote-dom) for Javascript-defined UI using Shopify's remote-dom that renders with host-native components.
Is MCP-UI secure?
Yes, host and user security is a primary concern. All content types execute remote code in sandboxed iframes, preventing malicious code from affecting the host application while maintaining rich interactivity. This applies to HTML content, external URLs, and Remote DOM resources.
What hosts support MCP-UI?
Supported hosts include Nanobot (full rendering and UI actions), ChatGPT (full rendering, partial UI actions), Postman (full rendering, partial UI actions), Goose (full rendering, partial UI actions), LibreChat (full rendering, partial UI actions), Smithery (rendering only, no UI actions), MCPJam (rendering only), and fast-agent (rendering only).
How do UI Actions work?
UI snippets interact with the agent via events sent from the UI and handled by the host. The onUIAction callback receives actions with types: 'tool' (toolName and params), 'intent' (intent and params), 'prompt' (prompt string), 'notify' (message), or 'link' (url). When actions include messageId, the iframe automatically receives response messages for async handling.
What is the license and who maintains MCP-UI?
MCP-UI is licensed under Apache License 2.0. It is maintained by Ido Salomon in collaboration with Liad Yosef. The project is provided 'as is' without warranty, and authors/contributors are not liable for damages. Contributions, ideas, and bug reports are welcome via the contribution guidelines.