Repolode
Submit
MCP-UI-Org

MCP-UI-Org/mcp-ui

TypeScript, Ruby and Python SDKs for building interactive UI resources that MCP tools can return and hosts can render.

View on GitHubWebsite
Stars
5,224
Forks
434
Open issues
64
Last commit
last month

What is it?

mcp-ui is an SDK for attaching interactive user interfaces to tools exposed through the Model Context Protocol (MCP). A server creates a UI resource, typically HTML served under a ui:// URI, and an MCP host fetches and renders it next to the tool result, so the AI assistant can show widgets rather than only text.

The project implements the MCP Apps pattern, where a tool links to its UI via _meta.ui.resourceUri, and also supports a legacy approach that embeds UI resources directly in tool responses. The client packages provide AppRenderer and UIResourceRenderer components, plus a Web Component. UI content runs in a sandboxed iframe, and widgets can call tools or send messages back to the host through onUIAction and related handlers.

Server-side helpers are available for TypeScript (@mcp-ui/server), Ruby (mcp_ui_server) and Python (mcp-ui-server). The project also includes an Apps SDK adapter for translating its postMessage protocol to ChatGPT's window.openai API.

Key features

  • 01Creates UI resources with ui:// URIs and text/html MIME type for MCP hosts
  • 02Links tools to UI via _meta.ui.resourceUri using the MCP Apps pattern
  • 03Provides React AppRenderer and UIResourceRenderer components, plus a Web Component
  • 04Renders UI content in sandboxed iframes
  • 05Supports server SDKs in TypeScript, Ruby and Python
  • 06Includes an adapter that bridges to the ChatGPT Apps SDK

Use cases

  • Adding a form or dashboard widget to an MCP server so an AI assistant can display it
  • Building an MCP host that renders tool UIs from third-party servers
  • Returning interactive controls that call tools when a user clicks them
  • Integrating MCP-driven widgets into a Ruby or Python backend

Quick start

  1. 1

    Install the TypeScript server and client packages with npm

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

    Or install the Python server SDK with pip

    pip install mcp-ui-server
  3. 3

    Create a UI resource and link a tool to it using _meta.ui.resourceUri, following the Getting Started example

Things to know

  • Rendering requires a host that supports MCP Apps or the legacy MCP-UI renderer.
  • AppRenderer needs a configured sandbox proxy URL before it can display UIs.
  • Some host-specific adapters are provided as a bridge and may become unnecessary as hosts adopt the open spec.

Topics

#mcp#ai-agent#llm#ui-components#typescript#sdk#iframe#web-components#ai#frontend

FAQ

What is mcp-ui?
TypeScript, Ruby and Python SDKs for building interactive UI resources that MCP tools can return and hosts can render. mcp-ui is an SDK for attaching interactive user interfaces to tools exposed through the Model Context Protocol (MCP). A server creates a UI resource, typically HTML served under a ui:// URI, and an MCP host fetches and renders it next to the tool result, so the AI assistant can show widgets rather than only text.
Is mcp-ui free to use? What license does it have?
mcp-ui is open source under the Apache-2.0 license. Check the license terms before using it in commercial products.
Is mcp-ui still maintained?
Updated within 6 months. The last commit to mcp-ui was on Sep 16, 2026.
What can I use mcp-ui for?
Adding a form or dashboard widget to an MCP server so an AI assistant can display it Building an MCP host that renders tool UIs from third-party servers Returning interactive controls that call tools when a user clicks them Integrating MCP-driven widgets into a Ruby or Python backend
How do I install mcp-ui?
Install the TypeScript server and client packages with npm: npm install @mcp-ui/server @mcp-ui/client Or install the Python server SDK with pip: pip install mcp-ui-server Create a UI resource and link a tool to it using _meta.ui.resourceUri, following the Getting Started example
Where can I get mcp-ui?
The source code and installation instructions are on GitHub: https://github.com/MCP-UI-Org/mcp-ui

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects