# mcp-ui-org/mcp-ui

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/mcp-ui-org-mcp-ui).**

4,425 stars · 329 forks · TypeScript · apache-2.0

## Links

- GitHub: https://github.com/MCP-UI-Org/mcp-ui
- Homepage: https://mcpui.dev
- awesome-repositories: https://awesome-repositories.com/repository/mcp-ui-org-mcp-ui.md

## Topics

`ai` `frontend` `llm` `mcp` `ui` `web`

## Description

mcp-ui is a toolkit and framework for rendering interactive web components and managing communication between Model Context Protocol servers and host applications. It serves as a client interface library and a sandboxed web component renderer designed to move AI tool interactions beyond text-based outputs into visual interfaces.

The project is distinguished by its secure rendering system, which utilizes a double-iframe architecture and a proxy layer to isolate guest user interfaces from the host application. It employs a JSON-RPC bridge to synchronize state and route user intents, ensuring bidirectional messaging between the main application and embedded guest interfaces.

The framework covers server-driven UI workflows, including the generation of structured UI payloads and the delivery of interactive resources. It manages tool-to-UI linking via resource URI mapping and provides capabilities for web proxying to ensure external assets resolve correctly within sandboxed environments.

The SDK handles the full lifecycle of tool interfaces, from resource identifier generation and metadata analysis to the final rendering of sandboxed content within a compatible client interface.

## Tags

### User Interface & Experience

- [MCP Tool UIs](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components/mcp-tool-uis.md) — Provides a framework for building interactive web-based UIs for AI tools using the Model Context Protocol.
- [Sandboxed DOM Renderers](https://awesome-repositories.com/f/user-interface-experience/content-rendering-components/remote-content-renderers/sandboxed-dom-renderers.md) — Renders remote DOM content by executing server scripts in sandboxed iframes. ([source](https://cdn.jsdelivr.net/gh/mcp-ui-org/mcp-ui@main/README.md))
- [MCP Tool HTML Rendering](https://awesome-repositories.com/f/user-interface-experience/raw-html-rendering/mcp-tool-html-rendering.md) — Returns raw HTML from MCP tools for rich content display in clients. ([source](https://mcpui.dev/guide/server/python/walkthrough))
- [Sandboxed Rendering Components](https://awesome-repositories.com/f/user-interface-experience/sandboxed-rendering-components.md) — Renders untrusted UI content securely inside isolated iframes with a proxy layer to protect the host application.
- [Double-Iframe Renderers](https://awesome-repositories.com/f/user-interface-experience/sandboxed-rendering-components/double-iframe-renderers.md) — Implements a secure rendering system using double-iframe isolation and a proxy layer for embedding guest interfaces.
- [MCP Tool Frame Renderers](https://awesome-repositories.com/f/user-interface-experience/sandboxed-ui-components/mcp-tool-frame-renderers.md) — Fetches UI resources from MCP servers and renders them inside secure iframes with full lifecycle and message handling. ([source](https://mcpui.dev/guide/introduction))
- [UI Payload Definitions](https://awesome-repositories.com/f/user-interface-experience/ui-payload-definitions.md) — Builds structured UI payloads containing inline HTML or external URLs for server delivery. ([source](https://mcpui.dev/guide/introduction))
- [Iframe-Based Rendering](https://awesome-repositories.com/f/user-interface-experience/extensible-interfaces/plugin-renderers/iframe-based-rendering.md) — Adjusts iframe dimensions automatically to match content size, preventing scrollbars and ensuring visual fit. ([source](https://cdn.jsdelivr.net/gh/mcp-ui-org/mcp-ui@main/README.md))
- [Auto-Resizing Iframes](https://awesome-repositories.com/f/user-interface-experience/navigation-routing/iframe/auto-resizing-iframes.md) — Automatically resizes iframes to match content dimensions and prevent scrollbars.
- [Iframe Content Resizers](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/element-resizers/resizing-constraints/iframe-content-resizers.md) — Automatically resizes iframes to match content height, preventing scrollbars and overflow. ([source](https://cdn.jsdelivr.net/gh/mcp-ui-org/mcp-ui@main/README.md))

### Artificial Intelligence & ML

- [Streaming Transport Sessions](https://awesome-repositories.com/f/artificial-intelligence-ml/agent-session-management/session-initializers/mcp-session-handshakes/streaming-transport-sessions.md) — Manages stateful MCP sessions over streaming HTTP transports. ([source](https://mcpui.dev/guide/server/typescript/walkthrough))
- [Bidirectional Messaging](https://awesome-repositories.com/f/artificial-intelligence-ml/agentic-systems-frameworks/model-integration-serving/model-integration-interfaces/model-context-protocol/mcp-server-management/mcp-server-connections/bidirectional-messaging.md) — Manages bidirectional messaging between MCP servers and host applications via JSON-RPC bridges and streaming transports.
- [Interactive UI Rendering](https://awesome-repositories.com/f/artificial-intelligence-ml/mcp-servers/interactive-ui-rendering.md) — Renders reusable UI snippets from MCP servers securely in client applications. ([source](https://cdn.jsdelivr.net/gh/mcp-ui-org/mcp-ui@main/README.md))
- [UI Payload Linkers](https://awesome-repositories.com/f/artificial-intelligence-ml/mcp-tool-connectors/mcp-tool-retrievers/ui-payload-linkers.md) — Links tool definitions to UI payloads, generating resource identifiers and serving interactive content through standard MCP endpoints.
- [UI Resource Attachments](https://awesome-repositories.com/f/artificial-intelligence-ml/mcp-tool-connectors/ui-resource-attachments.md) — Attaches interactive UI resources to MCP tool definitions for client rendering. ([source](https://mcpui.dev/guide/introduction))
- [UI Resource Tool Creators](https://awesome-repositories.com/f/artificial-intelligence-ml/mcp-tool-connectors/ui-resource-tool-creators.md) — Creates MCP tools that return UIResource payloads with external URLs. ([source](https://mcpui.dev/guide/server/ruby/walkthrough))
- [UI Resource Tool Registrations](https://awesome-repositories.com/f/artificial-intelligence-ml/mcp-tool-connectors/ui-resource-tool-registrations.md) — Registers MCP tools that return UIResource objects for interactive components. ([source](https://mcpui.dev/guide/server/typescript/walkthrough))

### Development Tools & Productivity

- [MCP Client Interfaces](https://awesome-repositories.com/f/development-tools-productivity/client-libraries/mcp-client-interfaces.md) — Provides a client-side library managing MCP server communication, tool-to-UI linking, and bidirectional messaging.
- [MCP Resource Handlers](https://awesome-repositories.com/f/development-tools-productivity/identifier-generators/uri-resource-identifiers/resource-content-readers/ui-content-retrieval/mcp-resource-handlers.md) — Serves UI content through standard MCP resource handler endpoints. ([source](https://mcpui.dev/guide/introduction))
- [Tool-to-UI Resource Mappings](https://awesome-repositories.com/f/development-tools-productivity/identifier-generators/uri-resource-identifiers/tool-to-ui-resource-mappings.md) — Maps MCP tool definitions to UI resources via URI identifiers.
- [Visual Inspectors](https://awesome-repositories.com/f/development-tools-productivity/debugging-tools/server-capability-inspection/mcp-traffic-inspections/visual-inspectors.md) — Ships a browser-based inspector for calling MCP tools and previewing rendered UI resources. ([source](https://mcpui.dev/guide/server/python/walkthrough))

### DevOps & Infrastructure

- [Rendered Content Action Handlers](https://awesome-repositories.com/f/devops-infrastructure/linux-deployment-tools/linux-ui-rendering/rendered-content-action-handlers.md) — Routes tool calls and intents from rendered UI snippets to the host application. ([source](https://cdn.jsdelivr.net/gh/mcp-ui-org/mcp-ui@main/README.md))

### Graphics & Multimedia

- [UI Component Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/dom-web-rendering-strategies/ui-component-rendering.md) — Delivers interactive web-based UI components from MCP servers for secure rendering. ([source](https://mcpui.dev/))

### Networking & Communication

- [Interactive Intent Emissions](https://awesome-repositories.com/f/networking-communication/communication-protocols-architectures/communication-paradigms/server-to-client-event-emissions/interactive-intent-emissions.md) — Sends structured intents from rendered HTML to trigger server-side actions. ([source](https://mcpui.dev/guide/server/python/walkthrough))
- [SSE-Based](https://awesome-repositories.com/f/networking-communication/communication-protocols-architectures/communication-protocols-standards/transport-protocols/http-transports/sse-based.md) — Provides SSE-based HTTP and stdio transport for MCP client connections. ([source](https://mcpui.dev/guide/server/python/walkthrough))
- [MCP](https://awesome-repositories.com/f/networking-communication/http-clients/http-servers/mcp.md) — Serves MCP servers over HTTP with POST request handling and CORS support. ([source](https://mcpui.dev/guide/server/ruby/walkthrough))
- [Iframe Message Bridges](https://awesome-repositories.com/f/networking-communication/json-rpc-implementations/iframe-message-bridges.md) — Bridges host and guest iframes with JSON-RPC for state synchronization.
- [MCP UI Bridges](https://awesome-repositories.com/f/networking-communication/json-rpc-implementations/typed-rpc-bridges/mcp-ui-bridges.md) — Ships a JSON-RPC bridge that synchronizes state and routes user intents between embedded UI components and the host application.
- [Session Reusers](https://awesome-repositories.com/f/networking-communication/sse-session-management/session-reusers.md) — Manages stateful HTTP streaming sessions for persistent MCP client-server interactions over SSE transport.
- [Renderer Content-Type Filters](https://awesome-repositories.com/f/networking-communication/content-type-filtering/renderer-content-type-filters.md) — Restricts displayed content types to enforce client-side security policies.

### Security & Cryptography

- [Nested](https://awesome-repositories.com/f/security-cryptography/iframe-sandboxing/nested.md) — Isolates guest UI using nested iframes with a proxy layer for security.
- [Iframe Sandboxing](https://awesome-repositories.com/f/security-cryptography/third-party-script-security/iframe-sandboxing.md) — Displays inline HTML or external URLs inside sandboxed iframes to isolate content and prevent host access. ([source](https://cdn.jsdelivr.net/gh/mcp-ui-org/mcp-ui@main/README.md))
- [Auto-Resizing Isolators](https://awesome-repositories.com/f/security-cryptography/third-party-script-security/iframe-sandboxing/auto-resizing-isolators.md) — Embeds external websites or HTML in sandboxed iframes with automatic resizing and content type restrictions.

### Software Engineering & Architecture

- [MCP Payload Generators](https://awesome-repositories.com/f/software-engineering-architecture/reactive-component-models/server-side-reactive-components/server-defined-ui-components/mcp-payload-generators.md) — Generates and delivers structured UI payloads from MCP servers for client-side rendering as interactive components.

### Web Development

- [MCP Rendering Frameworks](https://awesome-repositories.com/f/web-development/ui-framework-architectures/mcp-rendering-frameworks.md) — Provides an interactive UI rendering framework for MCP servers to deliver sandboxed web components via secure iframe architecture.
- [Event-Dispatching Renderers](https://awesome-repositories.com/f/web-development/web-component-renderers/event-dispatching-renderers.md) — Renders UI resources inside framework-agnostic web components that dispatch user actions as standard DOM events. ([source](https://cdn.jsdelivr.net/gh/mcp-ui-org/mcp-ui@main/README.md))