mcp-ui: Build Interactive Interfaces for MCP Tools

Overview

mcp-ui is a set of SDKs for building and displaying web interfaces associated with Model Context Protocol tools. It implements the MCP Apps standard, linking a tool to a UI resource so compatible hosts can fetch and render the interface alongside the tool result.

The project includes TypeScript server and client packages, plus Ruby and Python server SDKs. It is intended for developers building MCP servers or hosts that need interactive tool experiences, rather than applications looking for a general-purpose frontend framework.

Key Features

• Create UI resources from server-side code and connect them to tools through _meta.ui.resourceUri.
• Render MCP Apps interfaces in clients with the AppRenderer component.
• Render legacy MCP-UI resources with UIResourceRenderer or its Web Component.
• Provide server SDKs for TypeScript, Ruby, and Python, with a TypeScript client SDK.
• Support HTML UI resources and describe adapters for host-specific integrations, including the Apps SDK.
• Run remote UI content in a sandboxed iframe, according to the project documentation.

Use Cases

• MCP server developers can attach an interactive widget to a tool so a compatible host can show a visual result alongside its text response.
• Teams building MCP hosts can use the client components to fetch and render tool interfaces, with handlers for UI messages and link requests.
• Developers maintaining existing MCP-UI integrations can render embedded resources through the legacy renderer while adopting MCP Apps support.
• Python or Ruby teams can create MCP UI resources without implementing the resource format themselves.

Getting Started

Install the TypeScript packages:

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

See the README and documentation site for setup walkthroughs and language-specific installation instructions.

Considerations

Rendering requires an MCP host that supports MCP Apps or the legacy MCP-UI resource format. The README recommends AppRenderer for MCP Apps hosts; legacy integrations use a separate renderer. Host capabilities vary, and the README lists ChatGPT as requiring an Apps SDK adapter. UI resources execute remote code, so review the host's sandbox and security behavior before deployment.