mcp-ui: Building Interactive UIs for AI with Model Context Protocol

Introduction

mcp-ui pioneered the concept of interactive UI over the Model Context Protocol (MCP), enabling rich web interfaces for AI tools. This SDK implements the MCP Apps standard, which standardizes UI delivery over the protocol. It allows developers to create dynamic UI resources that can be rendered by MCP Apps Hosts, significantly enhancing user interaction with AI agents.

The project offers @mcp-ui/server and @mcp-ui/client for TypeScript, alongside server SDKs for Ruby (mcp_ui_server) and Python (mcp-ui-server). These tools empower developers to build next-generation UI experiences that seamlessly integrate with the MCP ecosystem.

Installation

Getting started with mcp-ui is straightforward, with SDKs available for multiple programming languages.

TypeScript

Install the client and server packages using your preferred package manager:

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

Install the Ruby server gem:

gem install mcp_ui_server

Python

Install the Python server package:

pip install mcp-ui-server

# or uv
uv add mcp-ui-server

Examples

mcp-ui provides a variety of examples to help you understand its capabilities and integrate it into your projects.

Client Examples

• Goose: An open-source AI agent that supports mcp-ui.
• LibreChat: An enhanced ChatGPT clone with mcp-ui support.
• ui-inspector: A tool to inspect local mcp-ui-enabled servers.
• MCP-UI Chat: An interactive chat application built with the mcp-ui client.

Server Examples

• TypeScript Server Demo: A simple TypeScript server demonstrating how to generate UI resources.
• Ruby Server Demo: A barebones demo server showcasing the use of mcp_ui_server and mcp gems.
• Python Server Demo: A simple demo server illustrating the use of the mcp-ui-server Python package.

Why Use mcp-ui?

mcp-ui offers compelling advantages for developers looking to enhance their AI applications with rich user interfaces:

• Interactive AI Experiences: Transform static AI responses into dynamic, interactive user interfaces, significantly enhancing user engagement and utility.
• Standardized UI Delivery: Leverage the MCP Apps specification for consistent UI integration across various AI hosts, ensuring broad compatibility.
• Multi-language Support: Develop UI resources using TypeScript, Ruby, or Python, catering to diverse development environments and preferences.
• Broad Host Compatibility: @mcp-ui supports both modern MCP Apps hosts and legacy MCP-UI hosts, with specialized adapters available for platforms like ChatGPT, ensuring your UIs work where they are needed.
• Robust Security: All remote code is executed within sandboxed iframes, prioritizing host and user security by isolating UI content.
• Extensible Architecture: The SDK supports various content types, including HTML and remote-DOM, and is designed for future expansion with component libraries and declarative UI, providing a future-proof solution.

Links

Explore mcp-ui further through its official channels:

• GitHub Repository: https://github.com/MCP-UI-Org/mcp-ui
• Official Documentation: https://mcpui.dev
• Discord Community: https://discord.gg/CEAG4KW7ZH