mcp-ui
starsforks
How to install mcp-ui?
mcp-ui-org/mcp-ui
$git clone https://github.com/MCP-UI-Org/mcp-ui----
README.md
| 1 | ## 📦 Model Context Protocol UI SDK |
| 2 | |
| 3 | <p align="center"> |
| 4 | <img width="250" alt="image" src="https://github.com/user-attachments/assets/65b9698f-990f-4846-9b2d-88de91d53d4d" /> |
| 5 | </p> |
| 6 | |
| 7 | <p align="center"> |
| 8 | <a href="https://www.npmjs.com/package/@mcp-ui/server"><img src="https://img.shields.io/npm/v/@mcp-ui/server?label=server&color=green" alt="Server Version"></a> |
| 9 | <a href="https://www.npmjs.com/package/@mcp-ui/client"><img src="https://img.shields.io/npm/v/@mcp-ui/client?label=client&color=blue" alt="Client Version"></a> |
| 10 | <a href="https://rubygems.org/gems/mcp_ui_server"><img src="https://img.shields.io/gem/v/mcp_ui_server" alt="Ruby Server SDK Version"></a> |
| 11 | <a href="https://pypi.org/project/mcp-ui-server/"><img src="https://img.shields.io/pypi/v/mcp-ui-server?label=python&color=yellow" alt="Python Server SDK Version"></a> |
| 12 | <a href="https://discord.gg/CEAG4KW7ZH"><img src="https://img.shields.io/discord/1401195140436983879?logo=discord&label=discord" alt="Discord"></a> |
| 13 | <a href="https://gitmcp.io/idosal/mcp-ui"><img src="https://img.shields.io/endpoint?url=https://gitmcp.io/badge/idosal/mcp-ui" alt="MCP Documentation"></a> |
| 14 | </p> |
| 15 | |
| 16 | <p align="center"> |
| 17 | <a href="#-whats-mcp-ui">What's mcp-ui?</a> • |
| 18 | <a href="#-core-concepts">Core Concepts</a> • |
| 19 | <a href="#-installation">Installation</a> • |
| 20 | <a href="#-getting-started">Getting Started</a> • |
| 21 | <a href="#-walkthrough">Walkthrough</a> • |
| 22 | <a href="#-examples">Examples</a> • |
| 23 | <a href="#-supported-hosts">Supported Hosts</a> • |
| 24 | <a href="#-security">Security</a> • |
| 25 | <a href="#-roadmap">Roadmap</a> • |
| 26 | <a href="#-contributing">Contributing</a> • |
| 27 | <a href="#-license">License</a> |
| 28 | </p> |
| 29 | |
| 30 | ---- |
| 31 | |
| 32 | **`mcp-ui`** pioneered the concept of interactive UI over [MCP](https://modelcontextprotocol.io/introduction), enabling rich web interfaces for AI tools. Alongside Apps SDK, the patterns developed here directly influenced the [MCP Apps](https://github.com/modelcontextprotocol/ext-apps) specification, which standardized UI delivery over the protocol. |
| 33 | |
| 34 | The `@mcp-ui/*` packages implement the MCP Apps standard. `@mcp-ui/client` is the recommended SDK for MCP Apps Hosts. |
| 35 | |
| 36 | > *The @mcp-ui/* packages are fully compliant with the MCP Apps specification and ready for production use.* |
| 37 | |
| 38 | <p align="center"> |
| 39 | <video src="https://github.com/user-attachments/assets/7180c822-2dd9-4f38-9d3e-b67679509483"></video> |
| 40 | </p> |
| 41 | |
| 42 | ## 💡 What's `mcp-ui`? |
| 43 | |
| 44 | `mcp-ui` is an SDK implementing the [MCP Apps](https://github.com/modelcontextprotocol/ext-apps) standard for UI over MCP. It provides: |
| 45 | |
| 46 | * **`@mcp-ui/server` (TypeScript)**: Create UI resources with `createUIResource`. Works with `registerAppTool` and `registerAppResource` from `@modelcontextprotocol/ext-apps/server`. |
| 47 | * **`@mcp-ui/client` (TypeScript)**: Render tool UIs with `AppRenderer` (MCP Apps) or `UIResourceRenderer` (legacy MCP-UI hosts). |
| 48 | * **`mcp_ui_server` (Ruby)**: Create UI resources in Ruby. |
| 49 | * **`mcp-ui-server` (Python)**: Create UI resources in Python. |
| 50 | |
| 51 | The MCP Apps pattern links tools to their UIs via `_meta.ui.resourceUri`. Hosts fetch and render the UI alongside tool results. |
| 52 | |
| 53 | ## ✨ Core Concepts |
| 54 | |
| 55 | ### MCP Apps Pattern (Recommended) |
| 56 | |
| 57 | The MCP Apps standard links tools to their UIs via `_meta.ui.resourceUri`: |
| 58 | |
| 59 | ```ts |
| 60 | import { registerAppTool, registerAppResource } from '@modelcontextprotocol/ext-apps/server'; |
| 61 | import { createUIResource } from '@mcp-ui/server'; |
| 62 | |
| 63 | // 1. Create UI resource |
| 64 | const widgetUI = await createUIResource({ |
| 65 | uri: 'ui://my-server/widget', |
| 66 | content: { type: 'rawHtml', htmlString: '<h1>Widget</h1>' }, |
| 67 | encoding: 'text', |
| 68 | }); |
| 69 | |
| 70 | // 2. Register resource handler |
| 71 | registerAppResource(server, 'widget_ui', widgetUI.resource.uri, {}, async () => ({ |
| 72 | contents: [widgetUI.resource] |
| 73 | })); |
| 74 | |
| 75 | // 3. Register tool with _meta linking |
| 76 | registerAppTool(server, 'show_widget', { |
| 77 | description: 'Show widget', |
| 78 | inputSchema: { query: z.string() }, |
| 79 | _meta: { ui: { resourceUri: widgetUI.resource.uri } } // Links tool → UI |
| 80 | }, async ({ query }) => { |
| 81 | return { content: [{ ty |
People who liked this also viewed
6 picksType
- fastmcp🚀 The fast, Pythonic way to build MCP servers and clients.MCP ServersJul 2026
- playwright-mcpPlaywright MCP serverMCP ServersJul 2026
- ext-appsOfficial repo for spec & SDK of MCP Apps protocol - standard for UIs embedded AI chatbots, served by MCP serversMCP ServersJul 2026
- langchain-mcp-adaptersLangChain 🔌 MCPMCP ServersJul 2026
- mcporterCall MCPs via TypeScript, masquerading as simple TypeScript API. Or package them as cli.MCP ServersJul 2026
- mcp-proxyA bridge between Streamable HTTP and stdio MCP transportsMCP ServersJul 2026
