📦 Model Context Protocol UI SDK

What's mcp-ui? •
Core Concepts •
Installation •
Getting Started •
Walkthrough •
Examples •
Supported Hosts •
Security •
Roadmap •
Contributing •
License

----

mcp-ui brings interactive web components to the Model Context Protocol (MCP). Deliver rich, dynamic UI resources directly from your MCP server to be rendered by the client. Take AI interaction to the next level!

> This project is an experimental community playground for MCP UI ideas. Expect rapid iteration and enhancements!

💡 What's `mcp-ui`?

mcp-ui is a playground for the open spec of UI over MCP. It offers a collection of community SDKs comprising:

* @mcp-ui/server (TypeScript): Utilities to generate UI resources (UIResource) on your MCP server.
* @mcp-ui/client (TypeScript): UI components (e.g., ) to render the UI resources and handle their events.
* mcp_ui_server (Ruby): Utilities to generate UI resources on your MCP server in a Ruby environment.
* mcp-ui-server (Python): Utilities to generate UI resources on your MCP server in a Python environment.

Together, they let you define reusable UI snippets on the server side, seamlessly and securely render them in the client, and react to their actions in the MCP host environment.

✨ Core Concepts

In essence, by using mcp-ui SDKs, servers and hosts can agree on contracts that enable them to create and render interactive UI snippets (as a path to a standardized UI approach in MCP).

$3

The primary payload returned from the server to the client is the UIResource:

``ts interface UIResource { type: 'resource'; resource: { uri: string; // e.g., ui://component/id mimeType: 'text/html' | 'text/uri-list' | 'application/vnd.mcp-ui.remote-dom'; // text/html for HTML content, text/uri-list for URL content, application/vnd.mcp-ui.remote-dom for remote-dom content (Javascript) text?: string; // Inline HTML, external URL, or remote-dom script blob?: string; // Base64-encoded HTML, URL, or remote-dom script }; }`

* uri: Unique identifier for caching and routing *ui://…— UI resources (rendering method determined by mimeType) *mimeType: text/html for HTML content (iframe srcDoc), text/uri-list for URL content (iframe src), application/vnd.mcp-ui.remote-domfor remote-dom content (Javascript) * MCP-UI requires a single URL: Whiletext/uri-list format supports multiple URLs, MCP-UI uses only the first valid http/sURL and warns if additional URLs are found *text vs. blob: Choose text for simple strings; use blob for larger or encoded content.

`$3`

The UI Resource is rendered in the component. It automatically detects the resource type and renders the appropriate component.

It is available as a React component and as a Web Component.

React Component

It accepts the following props: -resource: The resource object from an MCP Tool response. It must include uri, mimeType, and content (text, blob) -onUIAction: Optional callback for handling UI actions from the resource:`typescript { type: 'tool', payload: { toolName: string, params: Record }, messageId?: string } | { type: 'intent', payload: { intent: string, params: Record }, messageId?: string } | { type: 'prompt', payload: { prompt: string }, messageId?: string } | { type: 'notify', payload: { message: string }, messageId?: string } | { type: 'link', payload: { url: string }, messageId?: string }`When actions include amessageId, the iframe automatically receives response messages for asynchronous handling. -supportedContentTypes: Optional array to restrict which content types are allowed (['rawHtml', 'externalUrl', 'remoteDom']) -htmlProps: Optional props for the internal -style: Optional custom styles for the iframe -iframeProps: Optional props passed to the iframe element -iframeRenderData: Optional Recordto pass data to the iframe upon rendering. This enables advanced use cases where the parent application needs to provide initial state or configuration to the sandboxed iframe content. -autoResizeIframe: Optional boolean | { width?: boolean; height?: boolean }to automatically resize the iframe to the size of the content. -remoteDomProps: Optional props for the internal -library: Optional component library for Remote DOM resources (defaults to basicComponentLibrary) -remoteElements: remote element definitions for Remote DOM resources.

Web Component

The Web Component is available as . It accepts the same props as the React component, but they must be passed as strings.

Example:`html resource='{ "mimeType": "text/html", "text": "

`Hello from the Web Component!`

" }'
>

The onUIActionprop can be handled by attaching an event listener to the component:`javascript const renderer = document.querySelector('ui-resource-renderer'); renderer.addEventListener('onUIAction', (event) => { console.log('Action:', event.detail); });`

The Web Component is available in the @mcp-ui/client package at dist/ui-resource-renderer.wc.js.

`$3`

#### HTML (text/html and text/uri-list)

Rendered using the internal component, which displays content inside an <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This is suitable for self-contained HTML or embedding external apps.</p><p class="my-3">* <strong></code>mimeType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>:<br /> * </code>text/html<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Renders inline HTML content.<br /> * </code>text/uri-list<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Renders an external URL. MCP-UI uses the first valid </code>http/s<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> URL.</p><p class="my-3">#### Remote DOM (</code>application/vnd.mcp-ui.remote-dom<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</p><p class="my-3">Rendered using the internal </code><RemoteDOMResourceRenderer /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component, which utilizes Shopify's <a href="https://github.com/Shopify/remote-dom" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>remote-dom<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a>. The server responds with a script that describes the UI and events. On the host, the script is securely rendered in a sandboxed iframe, and the UI changes are communicated to the host in JSON, where they're rendered using the host's component library. This is more flexible than iframes and allows for UIs that match the host's look-and-feel.</p><p class="my-3">* <strong></code>mimeType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: </code>application/vnd.mcp-ui.remote-dom+javascript; framework={react | webcomponents}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">UI snippets must be able to interact with the agent. In </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, this is done by hooking into events sent from the UI snippet and reacting to them in the host (see </code>onUIAction<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop). For example, an HTML may trigger a tool call when a button is clicked by sending an event which will be caught handled by the client.</p><p class="my-3"><br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">MCP-UI SDKs includes adapter support for host-specific implementations, enabling your open MCP-UI widgets to work seamlessly regardless of host. Adapters automatically translate between MCP-UI's </code>postMessage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> protocol and host-specific APIs. Over time, as hosts become compatible with the open spec, these adapters wouldn't be needed.</p><p class="my-3">#### Available Adapters</p><p class="my-3">##### Apps SDK Adapter</p><p class="my-3">For Apps SDK environments (e.g., ChatGPT), this adapter translates MCP-UI protocol to Apps SDK API calls (e.g., </code>window.openai<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).</p><p class="my-3"><strong>How it Works:</strong><br />- Intercepts MCP-UI </code>postMessage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> calls from your widgets<br />- Translates them to appropriate Apps SDK API calls<br />- Handles bidirectional communication (tools, prompts, state management)<br />- Works transparently - your existing MCP-UI code continues to work without changes</p><p class="my-3"><strong>Usage:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />import { createUIResource } from '@mcp-ui/server';</p><p class="my-3">const htmlResource = createUIResource({<br /> uri: 'ui://greeting/1',<br /> content: { <br /> type: 'rawHtml', <br /> htmlString: </code><br /> <button onclick="window.parent.postMessage({ type: 'tool', payload: { toolName: 'myTool', params: {} } }, '*')"><br /> Call Tool<br /> </button><br /> <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> },<br /> encoding: 'text',<br /> // Enable adapters<br /> adapters: {<br /> appsSdk: {<br /> enabled: true,<br /> config: ...<br /> }<br /> // Future adapters can be enabled here<br /> }<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The adapter scripts are automatically injected into your HTML content and handle all protocol translation.</p><p class="my-3"><strong>Supported Actions:</strong><br />- ✅ <strong>Tool calls</strong> - </code>{ type: 'tool', payload: { toolName, params } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- ✅ <strong>Prompts</strong> - </code>{ type: 'prompt', payload: { prompt } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- ✅ <strong>Intents</strong> - </code>{ type: 'intent', payload: { intent, params } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (converted to prompts)<br />- ✅ <strong>Notifications</strong> - </code>{ type: 'notify', payload: { message } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- ✅ <strong>Render data</strong> - Access to </code>toolInput<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>toolOutput<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>widgetState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>theme<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>locale<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- ⚠️ <strong>Links</strong> - </code>{ type: 'link', payload: { url } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (may not be supported, returns error in some environments)</p><p class="my-3"><br />#### Advanced Usage</p><p class="my-3">You can manually wrap HTML with adapters, get MIME types, or access adapter scripts directly:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />import { wrapHtmlWithAdapters, getAdapterMimeType, getAppsSdkAdapterScript } from '@mcp-ui/server';</p><p class="my-3">const adaptersConfig = {<br /> appsSdk: {<br /> enabled: true,<br /> config: { intentHandling: 'ignore' }<br /> }<br />};</p><p class="my-3">// Manually wrap HTML with adapters (returns string)<br />const wrappedHtml = wrapHtmlWithAdapters(<br /> '<button>Click me</button>',<br /> adaptersConfig<br />);</p><p class="my-3">// Get the MIME type for the enabled adapters<br />const mimeType = getAdapterMimeType(adaptersConfig);<br />// Returns: 'text/html+skybridge'</p><p class="my-3">// Get a specific adapter script directly<br />const appsSdkScript = getAppsSdkAdapterScript({ timeout: 60000 });<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🏗️ Installation</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /><h1 class="text-2xl font-bold mt-6 mb-4">using npm</h1><br />npm install @mcp-ui/server @mcp-ui/client</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">or pnpm</h1><br />pnpm add @mcp-ui/server @mcp-ui/client</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">or yarn</h1><br />yarn add @mcp-ui/server @mcp-ui/client<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />gem install mcp_ui_server<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /><h1 class="text-2xl font-bold mt-6 mb-4">using pip</h1><br />pip install mcp-ui-server</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">or uv</h1><br />uv add mcp-ui-server<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🚀 Getting Started</h2></p><p class="my-3">You can use <a href="https://gitmcp.io/idosal/mcp-ui" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">GitMCP</a> to give your IDE access to </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">'s latest documentation! </p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">1. <strong>Server-side</strong>: Build your UI resources</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br /> import { createUIResource } from '@mcp-ui/server';<br /> import {<br /> createRemoteComponent,<br /> createRemoteDocument,<br /> createRemoteText,<br /> } from '@remote-dom/core';</p><p class="my-3"> // Inline HTML<br /> const htmlResource = createUIResource({<br /> uri: 'ui://greeting/1',<br /> content: { type: 'rawHtml', htmlString: '<p>Hello, MCP UI!</p>' },<br /> encoding: 'text',<br /> });</p><p class="my-3"> // External URL<br /> const externalUrlResource = createUIResource({<br /> uri: 'ui://greeting/1',<br /> content: { type: 'externalUrl', iframeUrl: 'https://example.com' },<br /> encoding: 'text',<br /> });</p><p class="my-3"> // remote-dom<br /> const remoteDomResource = createUIResource({<br /> uri: 'ui://remote-component/action-button',<br /> content: {<br /> type: 'remoteDom',<br /> script: </code><br /> const button = document.createElement('ui-button');<br /> button.setAttribute('label', 'Click me for a tool call!');<br /> button.addEventListener('press', () => {<br /> window.parent.postMessage({ type: 'tool', payload: { toolName: 'uiInteraction', params: { action: 'button-click', from: 'remote-dom' } } }, '*');<br /> });<br /> root.appendChild(button);<br /> <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">,<br /> framework: 'react', // or 'webcomponents'<br /> },<br /> encoding: 'text',<br /> });<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">2. <strong>Client-side</strong>: Render in your MCP host</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /> import React from 'react';<br /> import { UIResourceRenderer } from '@mcp-ui/client';</p><p class="my-3"> function App({ mcpResource }) {<br /> if (<br /> mcpResource.type === 'resource' &&<br /> mcpResource.resource.uri?.startsWith('ui://')<br /> ) {<br /> return (<br /> <UIResourceRenderer<br /> resource={mcpResource.resource}<br /> onUIAction={(result) => {<br /> console.log('Action:', result);<br /> }}<br /> /><br /> );<br /> }<br /> return <p>Unsupported resource</p>;<br /> }<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Server-side</strong>: Build your UI resources</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">python<br /> from mcp_ui_server import create_ui_resource</p><p class="my-3"> # Inline HTML<br /> html_resource = create_ui_resource({<br /> "uri": "ui://greeting/1",<br /> "content": { "type": "rawHtml", "htmlString": "<p>Hello, from Python!</p>" },<br /> "encoding": "text",<br /> })</p><p class="my-3"> # External URL<br /> external_url_resource = create_ui_resource({<br /> "uri": "ui://greeting/2",<br /> "content": { "type": "externalUrl", "iframeUrl": "https://example.com" },<br /> "encoding": "text",<br /> })<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Server-side</strong>: Build your UI resources</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ruby<br /> require 'mcp_ui_server'</p><p class="my-3"> # Inline HTML<br /> html_resource = McpUiServer.create_ui_resource(<br /> uri: 'ui://greeting/1',<br /> content: { type: :raw_html, htmlString: '<p>Hello, from Ruby!</p>' },<br /> encoding: :text<br /> )</p><p class="my-3"> # External URL<br /> external_url_resource = McpUiServer.create_ui_resource(<br /> uri: 'ui://greeting/2',<br /> content: { type: :external_url, iframeUrl: 'https://example.com' },<br /> encoding: :text<br /> )</p><p class="my-3"> # remote-dom<br /> remote_dom_resource = McpUiServer.create_ui_resource(<br /> uri: 'ui://remote-component/action-button',<br /> content: {<br /> type: :remote_dom,<br /> script: "<br /> const button = document.createElement('ui-button');<br /> button.setAttribute('label', 'Click me from Ruby!');<br /> button.addEventListener('press', () => {<br /> window.parent.postMessage({ type: 'tool', payload: { toolName: 'uiInteraction', params: { action: 'button-click', from: 'ruby-remote-dom' } } }, '*');<br /> });<br /> root.appendChild(button);<br /> ",<br /> framework: :react,<br /> },<br /> encoding: :text<br /> )<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🚶 Walkthrough</h2></p><p class="my-3">For a detailed, simple, step-by-step guide on how to integrate </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> into your own server, check out the full server walkthroughs on the <a href="https://mcpui.dev" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">mcp-ui documentation site</a>:</p><p class="my-3">- <strong><a href="https://mcpui.dev/guide/server/typescript/walkthrough" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">TypeScript Server Walkthrough</a></strong><br />- <strong><a href="https://mcpui.dev/guide/server/ruby/walkthrough" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Ruby Server Walkthrough</a></strong><br />- <strong><a href="https://mcpui.dev/guide/server/python/walkthrough" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Python Server Walkthrough</a></strong></p><p class="my-3">These guides will show you how to add a </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> endpoint to an existing server, create tools that return UI resources, and test your setup with the </code>ui-inspector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">!</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🌍 Examples</h2></p><p class="my-3"><strong>Client Examples</strong><br />* <a href="https://github.com/block/goose" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Goose</a> - open source AI agent that supports </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />* <a href="https://github.com/danny-avila/LibreChat" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">LibreChat</a> - enhanced ChatGPT clone that supports </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />* <a href="https://github.com/idosal/ui-inspector" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ui-inspector</a> - inspect local </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">-enabled servers.<br />* <a href="https://github.com/idosal/scira-mcp-ui-chat" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MCP-UI Chat</a> - interactive chat built with the </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> client. Check out the <a href="https://scira-mcp-chat-git-main-idosals-projects.vercel.app/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">hosted version</a>!<br />* MCP-UI RemoteDOM Playground (</code>examples/remote-dom-demo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) - local demo app to test RemoteDOM resources<br />* MCP-UI Web Component Demo (</code>examples/wc-demo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) - local demo app to test the Web Component integration in hosts</p><p class="my-3"><strong>Server Examples</strong><br />* <strong>TypeScript</strong>: A <a href="examples/server" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">full-featured server</a> that is deployed to a hosted environment for easy testing.<br /> * <strong><a href="./examples/typescript-server-demo" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>typescript-server-demo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a></strong>: A simple Typescript server that demonstrates how to generate UI resources.<br /> * <strong>server</strong>: A <a href="examples/server" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">full-featured Typescript server</a> that is deployed to a hosted Cloudflare environment for easy testing.<br /> * <strong>HTTP Streaming</strong>: </code>https://remote-mcp-server-authless.idosalomon.workers.dev/mcp<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * <strong>SSE</strong>: </code>https://remote-mcp-server-authless.idosalomon.workers.dev/sse<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />* <strong>Ruby</strong>: A barebones <a href="/examples/ruby-server-demo" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">demo server</a> that shows how to use </code>mcp_ui_server<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>mcp<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> gems together.<br />* <strong>Python</strong>: A simple <a href="/examples/python-server-demo" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">demo server</a> that shows how to use the </code>mcp-ui-server<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> Python package.<br />* <a href="https://github.com/basementstudio/xmcp/tree/main/examples/mcp-ui" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">XMCP</a> - Typescript MCP framework with </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> starter example.</p><p class="my-3">Drop those URLs into any MCP-compatible host to see </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in action. For a supported local inspector, see the <a href="https://github.com/idosal/ui-inspector" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ui-inspector</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">💻 Supported Hosts</h2></p><p class="my-3"></code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is supported by a growing number of MCP-compatible clients. Feature support varies by host:</p><p class="my-3">| Host | Rendering | UI Actions | Notes<br />| :-------- | :-------: | :--------: | :--------: |<br />| <a href="https://www.nanobot.ai/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Nanobot</a> | ✅ | ✅ |<br />| <a href="https://chatgpt.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ChatGPT</a> | ✅ | ⚠️ | <a href="https://mcpui.dev/guide/apps-sdk" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Guide</a><br />| <a href="https://www.postman.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Postman</a> | ✅ | ⚠️ |<br />| <a href="https://block.github.io/goose/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Goose</a> | ✅ | ⚠️ |<br />| <a href="https://www.librechat.ai/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">LibreChat</a> | ✅ | ⚠️ |<br />| <a href="https://smithery.ai/playground" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Smithery</a> | ✅ | ❌ |<br />| <a href="https://www.mcpjam.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MCPJam</a> | ✅ | ❌ |<br />| <a href="https://fast-agent.ai/mcp/mcp-ui/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">fast-agent</a> | ✅ | ❌ |<br />| <a href="https://github.com/microsoft/vscode/issues/260218" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">VSCode</a> (TBA) | ? | ? |</p><p class="my-3"><strong>Legend:</strong><br />- ✅: Supported<br />- ⚠️: Partial Support<br />- ❌: Not Supported (yet)</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🔒 Security</h2><br />Host and user security is one of </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">'s primary concerns. In all content types, the remote code is executed in a sandboxed iframe.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🛣️ Roadmap</h2></p><p class="my-3">- [X] Add online playground<br />- [X] Expand UI Action API (beyond tool calls)<br />- [X] Support Web Components<br />- [X] Support Remote-DOM<br />- [ ] Add component libraries (in progress)<br />- [ ] Add SDKs for additional programming languages (in progress; Ruby, Python available)<br />- [ ] Support additional frontend frameworks<br />- [ ] Add declarative UI content type<br />- [ ] Support generative UI?<br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Core Team</h2><br /></code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is a project by <a href="https://x.com/idosal1" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Ido Salomon</a>, in collaboration with <a href="https://x.com/liadyosef" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Liad Yosef</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🤝 Contributing</h2></p><p class="my-3">Contributions, ideas, and bug reports are welcome! See the <a href="https://github.com/idosal/mcp-ui/blob/main/.github/CONTRIBUTING.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">contribution guidelines</a> to get started.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">📄 License</h2></p><p class="my-3">Apache License 2.0 © <a href="LICENSE" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">The MCP-UI Authors</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Disclaimer</h2></p><p class="my-3">This project is provided "as is", without warranty of any kind. The </code>mcp-ui` authors and contributors shall not be held liable for any damages, losses, or issues arising from the use of this software. Use at your own risk.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-full max-w-xl"></div><div class="flex gap-2"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-16"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-20"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-14"></div></div></div><div class="w-full lg:w-80"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-32 w-full"></div></div></div><div class="space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-64 w-full"></div></div></div></main></div><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/9b9784636e791b20.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n4:I[49786,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Header\"]\n5:I[22016,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\nd:I[2355,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Analytics\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/media/68d403cf9f2c68c5-s.p.f9f15f61.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"x_DymHuNhDTJUp7Mmr_Ru\",\"c\":[\"\",\"package\",\"%40mcp-ui%2Fserver\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"package\",{\"children\":[[\"name\",\"%40mcp-ui/server\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto flex max-w-md flex-col items-center justify-center px-4 py-24 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mb-6 h-16 w-16 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"h1\",null,{\"className\":\"mb-2 text-3xl font-bold\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mb-4 text-xl text-muted-foreground\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Go home\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"/search\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-search mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"circle\",\"4ej97u\",{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"8\"}],[\"$\",\"path\",\"1qie3q\",{\"d\":\"m21 21-4.3-4.3\"}],\"$undefined\"]}],\"Search packages\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$L6\"]}]}]]}],{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,false]},[\"$La\",[],[]],false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$Ld\",null,{}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\na:null\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-6xl px-4 py-8\",\"children\":[\"$\",\"$10\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-full max-w-xl\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-16\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-20\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-14\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:w-80\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-32 w-full\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-64 w-full\"}]]}]]}],\"children\":\"$L16\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"@mcp-ui/server - npm explorer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"mcp-ui Server SDK\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon-light-32x32.png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/icon-dark-32x32.png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L17\",\"6\",{}]]\n"])</script><title>@mcp-ui/server - npm explorer</title><meta name="description" content="mcp-ui Server SDK"/><link rel="icon" href="/icon-light-32x32.png" media="(prefers-color-scheme: light)"/><link rel="icon" href="/icon-dark-32x32.png" media="(prefers-color-scheme: dark)"/><link rel="icon" href="/icon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div style="display:none" id="S:2"></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:2","S:2")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-start gap-3\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"font-mono text-2xl font-bold sm:text-3xl\",\"children\":\"@mcp-ui/server\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 font-mono\",\"children\":[\"v\",\"6.0.1\"]}],[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-blue-600 border-blue-200\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-file-code mr-1 h-3 w-3\",\"children\":[[\"$\",\"path\",\"1tg20x\",{\"d\":\"M10 12.5 8 15l2 2.5\"}],[\"$\",\"path\",\"yinavb\",{\"d\":\"m14 12.5 2 2.5-2 2.5\"}],[\"$\",\"path\",\"tnqrlb\",{\"d\":\"M14 2v4a2 2 0 0 0 2 2h4\"}],[\"$\",\"path\",\"1mlx9k\",{\"d\":\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z\"}],\"$undefined\"]}],\"TypeScript\"]}],\"$undefined\"]}]]}],\"$undefined\",[\"$\",\"p\",null,{\"className\":\"text-lg text-muted-foreground\",\"children\":\"mcp-ui Server SDK\"}],\"$undefined\",[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4 text-sm text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-download h-4 w-4\",\"children\":[[\"$\",\"path\",\"ih7n3h\",{\"d\":\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"}],[\"$\",\"polyline\",\"2ggqvy\",{\"points\":\"7 10 12 15 17 10\"}],[\"$\",\"line\",\"1vk2je\",{\"x1\":\"12\",\"x2\":\"12\",\"y1\":\"15\",\"y2\":\"3\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"41.6K\"}],\"/week\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-4 w-4\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],\"Updated \",\"2 days ago\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-scale h-4 w-4\",\"children\":[[\"$\",\"path\",\"7g6ntu\",{\"d\":\"m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"ijws7r\",{\"d\":\"m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"1b0cd5\",{\"d\":\"M7 21h10\"}],[\"$\",\"path\",\"108xh3\",{\"d\":\"M12 3v18\"}],[\"$\",\"path\",\"3gwbw2\",{\"d\":\"M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2\"}],\"$undefined\"]}],\"Apache-2.0\"]}],\"$L18\"]}],\"$L19\"]}],\"$L1a\"]}],\"$L1b\"]}]\n"])</script><script>self.__next_f.push([1,"1c:I[33485,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"InstallCommands\"]\n1d:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Tabs\"]\n1e:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsList\"]\n1f:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsTrigger\"]\n20:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsContent\"]\n21:I[77801,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ReadmeViewer\"]\n18:[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[\"Unpacked: \",\"3.0 MB\"]}]\n19:[\"$\",\"div\",null,{\"className\":\"text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"Published by \"}],[\"$\",\"$L5\",null,{\"href\":\"/~idosal\",\"className\":\"font-medium hover:underline\",\"children\":\"idosal\"}]]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"div\",null,{\"className\":\"w-full space-y-4 lg:w-80\",\"children\":[[\"$\",\"$L1c\",null,{\"packageName\":\"@mcp-ui/server\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2\",\"children\":[null,\"$undefined\",\"$undefined\",[\"$\",\"a\",null,{\"href\":\"https://npmjs.com/package/@mcp-ui/server\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-external-link mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"1q9fwt\",{\"d\":\"M15 3h6v6\"}],[\"$\",\"path\",\"gplh6r\",{\"d\":\"M10 14 21 3\"}],[\"$\",\"path\",\"a6xqqp\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"}],\"$undefined\"]}],\"npm\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}]]}],[\"$\",\"div\",null,{\"className\":\"rounded-lg border p-3\",\"children\":[[\"$\",\"h4\",null,{\"className\":\"mb-2 text-sm font-medium\",\"children\":\"Dist Tags\"}],[\"$\",\"div\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"div\",\"alpha\",{\"className\":\"flex justify-between text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"alpha\"}],[\"$\",\"$L5\",null,{\"href\":\"/package/@mcp-ui/server/v/5.17.0-alpha.2\",\"className\":\"font-mono text-xs hover:underline\",\"children\":\"5.17.0-alpha.2\"}]]}],[\"$\",\"div\",\"latest\",{\"className\":\"flex justify-between text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"latest\"}],[\"$\",\"$L5\",null,{\"href\":\"/package/@mcp-ui/server/v/6.0.1\",\"className\":\"font-mono text-xs hover:underline\",\"children\":\"6.0.1\"}]]}]]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"22:T4e2b,"])</script><script>self.__next_f.push([1,"## 📦 Model Context Protocol UI SDK\n\n\u003cp align=\"center\"\u003e\n \u003cimg width=\"250\" alt=\"image\" src=\"https://github.com/user-attachments/assets/65b9698f-990f-4846-9b2d-88de91d53d4d\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://www.npmjs.com/package/@mcp-ui/server\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@mcp-ui/server?label=server\u0026color=green\" alt=\"Server Version\"\u003e\u003c/a\u003e\n \u003ca href=\"https://www.npmjs.com/package/@mcp-ui/client\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@mcp-ui/client?label=client\u0026color=blue\" alt=\"Client Version\"\u003e\u003c/a\u003e\n \u003ca href=\"https://rubygems.org/gems/mcp_ui_server\"\u003e\u003cimg src=\"https://img.shields.io/gem/v/mcp_ui_server\" alt=\"Ruby Server SDK Version\"\u003e\u003c/a\u003e\n \u003ca href=\"https://pypi.org/project/mcp-ui-server/\"\u003e\u003cimg src=\"https://img.shields.io/pypi/v/mcp-ui-server?label=python\u0026color=yellow\" alt=\"Python Server SDK Version\"\u003e\u003c/a\u003e\n \u003ca href=\"https://discord.gg/CEAG4KW7ZH\"\u003e\u003cimg src=\"https://img.shields.io/discord/1401195140436983879?logo=discord\u0026label=discord\" alt=\"Discord\"\u003e\u003c/a\u003e\n \u003ca href=\"https://gitmcp.io/idosal/mcp-ui\"\u003e\u003cimg src=\"https://img.shields.io/endpoint?url=https://gitmcp.io/badge/idosal/mcp-ui\" alt=\"MCP Documentation\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"#-whats-mcp-ui\"\u003eWhat's mcp-ui?\u003c/a\u003e •\n \u003ca href=\"#-core-concepts\"\u003eCore Concepts\u003c/a\u003e •\n \u003ca href=\"#-installation\"\u003eInstallation\u003c/a\u003e •\n \u003ca href=\"#-getting-started\"\u003eGetting Started\u003c/a\u003e •\n \u003ca href=\"#-walkthrough\"\u003eWalkthrough\u003c/a\u003e •\n \u003ca href=\"#-examples\"\u003eExamples\u003c/a\u003e •\n \u003ca href=\"#-supported-hosts\"\u003eSupported Hosts\u003c/a\u003e •\n \u003ca href=\"#-security\"\u003eSecurity\u003c/a\u003e •\n \u003ca href=\"#-roadmap\"\u003eRoadmap\u003c/a\u003e •\n \u003ca href=\"#-contributing\"\u003eContributing\u003c/a\u003e •\n \u003ca href=\"#-license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n----\n\n**`mcp-ui`** brings interactive web components to the [Model Context Protocol](https://modelcontextprotocol.io/introduction) (MCP). Deliver rich, dynamic UI resources directly from your MCP server to be rendered by the client. Take AI interaction to the next level!\n\n\u003e *This project is an experimental community playground for MCP UI ideas. Expect rapid iteration and enhancements!*\n\n\u003cp align=\"center\"\u003e\n \u003cvideo src=\"https://github.com/user-attachments/assets/7180c822-2dd9-4f38-9d3e-b67679509483\"\u003e\u003c/video\u003e\n\u003c/p\u003e\n\n## 💡 What's `mcp-ui`?\n\n`mcp-ui` is a playground for the open spec of UI over MCP. It offers a collection of community SDKs comprising:\n\n* **`@mcp-ui/server` (TypeScript)**: Utilities to generate UI resources (`UIResource`) on your MCP server.\n* **`@mcp-ui/client` (TypeScript)**: UI components (e.g., `\u003cUIResourceRenderer /\u003e`) to render the UI resources and handle their events.\n* **`mcp_ui_server` (Ruby)**: Utilities to generate UI resources on your MCP server in a Ruby environment.\n* **`mcp-ui-server` (Python)**: Utilities to generate UI resources on your MCP server in a Python environment.\n\nTogether, they let you define reusable UI snippets on the server side, seamlessly and securely render them in the client, and react to their actions in the MCP host environment.\n\n## ✨ Core Concepts\n\nIn essence, by using `mcp-ui` SDKs, servers and hosts can agree on contracts that enable them to create and render interactive UI snippets (as a path to a standardized UI approach in MCP).\n\n### UI Resource\nThe primary payload returned from the server to the client is the `UIResource`:\n\n```ts\ninterface UIResource {\n type: 'resource';\n resource: {\n uri: string; // e.g., ui://component/id\n mimeType: 'text/html' | 'text/uri-list' | 'application/vnd.mcp-ui.remote-dom'; // text/html for HTML content, text/uri-list for URL content, application/vnd.mcp-ui.remote-dom for remote-dom content (Javascript)\n text?: string; // Inline HTML, external URL, or remote-dom script\n blob?: string; // Base64-encoded HTML, URL, or remote-dom script\n };\n}\n```\n\n* **`uri`**: Unique identifier for caching and routing\n * `ui://…` — UI resources (rendering method determined by mimeType)\n* **`mimeType`**: `text/html` for HTML content (iframe srcDoc), `text/uri-list` for URL content (iframe src), `application/vnd.mcp-ui.remote-dom` for remote-dom content (Javascript)\n * **MCP-UI requires a single URL**: While `text/uri-list` format supports multiple URLs, MCP-UI uses only the first valid `http/s` URL and warns if additional URLs are found\n* **`text` vs. `blob`**: Choose `text` for simple strings; use `blob` for larger or encoded content.\n\n### Resource Renderer\n\nThe UI Resource is rendered in the `\u003cUIResourceRenderer /\u003e` component. It automatically detects the resource type and renders the appropriate component.\n\nIt is available as a React component and as a Web Component.\n\n**React Component**\n\nIt accepts the following props:\n- **`resource`**: The resource object from an MCP Tool response. It must include `uri`, `mimeType`, and content (`text`, `blob`)\n- **`onUIAction`**: Optional callback for handling UI actions from the resource:\n ```typescript\n { type: 'tool', payload: { toolName: string, params: Record\u003cstring, unknown\u003e }, messageId?: string } |\n { type: 'intent', payload: { intent: string, params: Record\u003cstring, unknown\u003e }, messageId?: string } |\n { type: 'prompt', payload: { prompt: string }, messageId?: string } |\n { type: 'notify', payload: { message: string }, messageId?: string } |\n { type: 'link', payload: { url: string }, messageId?: string }\n ```\n When actions include a `messageId`, the iframe automatically receives response messages for asynchronous handling.\n- **`supportedContentTypes`**: Optional array to restrict which content types are allowed (`['rawHtml', 'externalUrl', 'remoteDom']`)\n- **`htmlProps`**: Optional props for the internal `\u003cHTMLResourceRenderer\u003e`\n - **`style`**: Optional custom styles for the iframe\n - **`iframeProps`**: Optional props passed to the iframe element\n - **`iframeRenderData`**: Optional `Record\u003cstring, unknown\u003e` to pass data to the iframe upon rendering. This enables advanced use cases where the parent application needs to provide initial state or configuration to the sandboxed iframe content.\n - **`autoResizeIframe`**: Optional `boolean | { width?: boolean; height?: boolean }` to automatically resize the iframe to the size of the content.\n- **`remoteDomProps`**: Optional props for the internal `\u003cRemoteDOMResourceRenderer\u003e`\n - **`library`**: Optional component library for Remote DOM resources (defaults to `basicComponentLibrary`)\n - **`remoteElements`**: remote element definitions for Remote DOM resources.\n\n**Web Component**\n\nThe Web Component is available as `\u003cui-resource-renderer\u003e`. It accepts the same props as the React component, but they must be passed as strings.\n\nExample:\n```html\n\u003cui-resource-renderer\n resource='{ \"mimeType\": \"text/html\", \"text\": \"\u003ch2\u003eHello from the Web Component!\u003c/h2\u003e\" }'\n\u003e\u003c/ui-resource-renderer\u003e\n```\n\nThe `onUIAction` prop can be handled by attaching an event listener to the component:\n```javascript\nconst renderer = document.querySelector('ui-resource-renderer');\nrenderer.addEventListener('onUIAction', (event) =\u003e {\n console.log('Action:', event.detail);\n});\n```\n\nThe Web Component is available in the `@mcp-ui/client` package at `dist/ui-resource-renderer.wc.js`.\n\n### Supported Resource Types\n\n#### HTML (`text/html` and `text/uri-list`)\n\nRendered using the internal `\u003cHTMLResourceRenderer /\u003e` component, which displays content inside an `\u003ciframe\u003e`. This is suitable for self-contained HTML or embedding external apps.\n\n* **`mimeType`**:\n * `text/html`: Renders inline HTML content.\n * `text/uri-list`: Renders an external URL. MCP-UI uses the first valid `http/s` URL.\n\n#### Remote DOM (`application/vnd.mcp-ui.remote-dom`)\n\nRendered using the internal `\u003cRemoteDOMResourceRenderer /\u003e` component, which utilizes Shopify's [`remote-dom`](https://github.com/Shopify/remote-dom). The server responds with a script that describes the UI and events. On the host, the script is securely rendered in a sandboxed iframe, and the UI changes are communicated to the host in JSON, where they're rendered using the host's component library. This is more flexible than iframes and allows for UIs that match the host's look-and-feel.\n\n* **`mimeType`**: `application/vnd.mcp-ui.remote-dom+javascript; framework={react | webcomponents}`\n\n### UI Action\n\nUI snippets must be able to interact with the agent. In `mcp-ui`, this is done by hooking into events sent from the UI snippet and reacting to them in the host (see `onUIAction` prop). For example, an HTML may trigger a tool call when a button is clicked by sending an event which will be caught handled by the client.\n\n\n### Platform Adapters\n\nMCP-UI SDKs includes adapter support for host-specific implementations, enabling your open MCP-UI widgets to work seamlessly regardless of host. Adapters automatically translate between MCP-UI's `postMessage` protocol and host-specific APIs. Over time, as hosts become compatible with the open spec, these adapters wouldn't be needed.\n\n#### Available Adapters\n\n##### Apps SDK Adapter\n\nFor Apps SDK environments (e.g., ChatGPT), this adapter translates MCP-UI protocol to Apps SDK API calls (e.g., `window.openai`).\n\n**How it Works:**\n- Intercepts MCP-UI `postMessage` calls from your widgets\n- Translates them to appropriate Apps SDK API calls\n- Handles bidirectional communication (tools, prompts, state management)\n- Works transparently - your existing MCP-UI code continues to work without changes\n\n**Usage:**\n\n```ts\nimport { createUIResource } from '@mcp-ui/server';\n\nconst htmlResource = createUIResource({\n uri: 'ui://greeting/1',\n content: { \n type: 'rawHtml', \n htmlString: `\n \u003cbutton onclick=\"window.parent.postMessage({ type: 'tool', payload: { toolName: 'myTool', params: {} } }, '*')\"\u003e\n Call Tool\n \u003c/button\u003e\n ` \n },\n encoding: 'text',\n // Enable adapters\n adapters: {\n appsSdk: {\n enabled: true,\n config: ...\n }\n // Future adapters can be enabled here\n }\n});\n```\n\nThe adapter scripts are automatically injected into your HTML content and handle all protocol translation.\n\n**Supported Actions:**\n- ✅ **Tool calls** - `{ type: 'tool', payload: { toolName, params } }`\n- ✅ **Prompts** - `{ type: 'prompt', payload: { prompt } }`\n- ✅ **Intents** - `{ type: 'intent', payload: { intent, params } }` (converted to prompts)\n- ✅ **Notifications** - `{ type: 'notify', payload: { message } }`\n- ✅ **Render data** - Access to `toolInput`, `toolOutput`, `widgetState`, `theme`, `locale`\n- ⚠️ **Links** - `{ type: 'link', payload: { url } }` (may not be supported, returns error in some environments)\n\n\n#### Advanced Usage\n\nYou can manually wrap HTML with adapters, get MIME types, or access adapter scripts directly:\n\n```ts\nimport { wrapHtmlWithAdapters, getAdapterMimeType, getAppsSdkAdapterScript } from '@mcp-ui/server';\n\nconst adaptersConfig = {\n appsSdk: {\n enabled: true,\n config: { intentHandling: 'ignore' }\n }\n};\n\n// Manually wrap HTML with adapters (returns string)\nconst wrappedHtml = wrapHtmlWithAdapters(\n '\u003cbutton\u003eClick me\u003c/button\u003e',\n adaptersConfig\n);\n\n// Get the MIME type for the enabled adapters\nconst mimeType = getAdapterMimeType(adaptersConfig);\n// Returns: 'text/html+skybridge'\n\n// Get a specific adapter script directly\nconst appsSdkScript = getAppsSdkAdapterScript({ timeout: 60000 });\n```\n\n## 🏗️ Installation\n\n### TypeScript\n\n```bash\n# using npm\nnpm install @mcp-ui/server @mcp-ui/client\n\n# or pnpm\npnpm add @mcp-ui/server @mcp-ui/client\n\n# or yarn\nyarn add @mcp-ui/server @mcp-ui/client\n```\n\n### Ruby\n\n```bash\ngem install mcp_ui_server\n```\n\n### Python\n\n```bash\n# using pip\npip install mcp-ui-server\n\n# or uv\nuv add mcp-ui-server\n```\n\n## 🚀 Getting Started\n\nYou can use [GitMCP](https://gitmcp.io/idosal/mcp-ui) to give your IDE access to `mcp-ui`'s latest documentation! \n\n### TypeScript\n\n1. **Server-side**: Build your UI resources\n\n ```ts\n import { createUIResource } from '@mcp-ui/server';\n import {\n createRemoteComponent,\n createRemoteDocument,\n createRemoteText,\n } from '@remote-dom/core';\n\n // Inline HTML\n const htmlResource = createUIResource({\n uri: 'ui://greeting/1',\n content: { type: 'rawHtml', htmlString: '\u003cp\u003eHello, MCP UI!\u003c/p\u003e' },\n encoding: 'text',\n });\n\n // External URL\n const externalUrlResource = createUIResource({\n uri: 'ui://greeting/1',\n content: { type: 'externalUrl', iframeUrl: 'https://example.com' },\n encoding: 'text',\n });\n\n // remote-dom\n const remoteDomResource = createUIResource({\n uri: 'ui://remote-component/action-button',\n content: {\n type: 'remoteDom',\n script: `\n const button = document.createElement('ui-button');\n button.setAttribute('label', 'Click me for a tool call!');\n button.addEventListener('press', () =\u003e {\n window.parent.postMessage({ type: 'tool', payload: { toolName: 'uiInteraction', params: { action: 'button-click', from: 'remote-dom' } } }, '*');\n });\n root.appendChild(button);\n `,\n framework: 'react', // or 'webcomponents'\n },\n encoding: 'text',\n });\n ```\n\n2. **Client-side**: Render in your MCP host\n\n ```tsx\n import React from 'react';\n import { UIResourceRenderer } from '@mcp-ui/client';\n\n function App({ mcpResource }) {\n if (\n mcpResource.type === 'resource' \u0026\u0026\n mcpResource.resource.uri?.startsWith('ui://')\n ) {\n return (\n \u003cUIResourceRenderer\n resource={mcpResource.resource}\n onUIAction={(result) =\u003e {\n console.log('Action:', result);\n }}\n /\u003e\n );\n }\n return \u003cp\u003eUnsupported resource\u003c/p\u003e;\n }\n ```\n\n### Python\n\n**Server-side**: Build your UI resources\n\n ```python\n from mcp_ui_server import create_ui_resource\n\n # Inline HTML\n html_resource = create_ui_resource({\n \"uri\": \"ui://greeting/1\",\n \"content\": { \"type\": \"rawHtml\", \"htmlString\": \"\u003cp\u003eHello, from Python!\u003c/p\u003e\" },\n \"encoding\": \"text\",\n })\n\n # External URL\n external_url_resource = create_ui_resource({\n \"uri\": \"ui://greeting/2\",\n \"content\": { \"type\": \"externalUrl\", \"iframeUrl\": \"https://example.com\" },\n \"encoding\": \"text\",\n })\n ```\n\n### Ruby\n\n**Server-side**: Build your UI resources\n\n ```ruby\n require 'mcp_ui_server'\n\n # Inline HTML\n html_resource = McpUiServer.create_ui_resource(\n uri: 'ui://greeting/1',\n content: { type: :raw_html, htmlString: '\u003cp\u003eHello, from Ruby!\u003c/p\u003e' },\n encoding: :text\n )\n\n # External URL\n external_url_resource = McpUiServer.create_ui_resource(\n uri: 'ui://greeting/2',\n content: { type: :external_url, iframeUrl: 'https://example.com' },\n encoding: :text\n )\n\n # remote-dom\n remote_dom_resource = McpUiServer.create_ui_resource(\n uri: 'ui://remote-component/action-button',\n content: {\n type: :remote_dom,\n script: \"\n const button = document.createElement('ui-button');\n button.setAttribute('label', 'Click me from Ruby!');\n button.addEventListener('press', () =\u003e {\n window.parent.postMessage({ type: 'tool', payload: { toolName: 'uiInteraction', params: { action: 'button-click', from: 'ruby-remote-dom' } } }, '*');\n });\n root.appendChild(button);\n \",\n framework: :react,\n },\n encoding: :text\n )\n ```\n\n## 🚶 Walkthrough\n\nFor a detailed, simple, step-by-step guide on how to integrate `mcp-ui` into your own server, check out the full server walkthroughs on the [mcp-ui documentation site](https://mcpui.dev):\n\n- **[TypeScript Server Walkthrough](https://mcpui.dev/guide/server/typescript/walkthrough)**\n- **[Ruby Server Walkthrough](https://mcpui.dev/guide/server/ruby/walkthrough)**\n- **[Python Server Walkthrough](https://mcpui.dev/guide/server/python/walkthrough)**\n\nThese guides will show you how to add a `mcp-ui` endpoint to an existing server, create tools that return UI resources, and test your setup with the `ui-inspector`!\n\n## 🌍 Examples\n\n**Client Examples**\n* [Goose](https://github.com/block/goose) - open source AI agent that supports `mcp-ui`.\n* [LibreChat](https://github.com/danny-avila/LibreChat) - enhanced ChatGPT clone that supports `mcp-ui`.\n* [ui-inspector](https://github.com/idosal/ui-inspector) - inspect local `mcp-ui`-enabled servers.\n* [MCP-UI Chat](https://github.com/idosal/scira-mcp-ui-chat) - interactive chat built with the `mcp-ui` client. Check out the [hosted version](https://scira-mcp-chat-git-main-idosals-projects.vercel.app/)!\n* MCP-UI RemoteDOM Playground (`examples/remote-dom-demo`) - local demo app to test RemoteDOM resources\n* MCP-UI Web Component Demo (`examples/wc-demo`) - local demo app to test the Web Component integration in hosts\n\n**Server Examples**\n* **TypeScript**: A [full-featured server](examples/server) that is deployed to a hosted environment for easy testing.\n * **[`typescript-server-demo`](./examples/typescript-server-demo)**: A simple Typescript server that demonstrates how to generate UI resources.\n * **server**: A [full-featured Typescript server](examples/server) that is deployed to a hosted Cloudflare environment for easy testing.\n * **HTTP Streaming**: `https://remote-mcp-server-authless.idosalomon.workers.dev/mcp`\n * **SSE**: `https://remote-mcp-server-authless.idosalomon.workers.dev/sse`\n* **Ruby**: A barebones [demo server](/examples/ruby-server-demo) that shows how to use `mcp_ui_server` and `mcp` gems together.\n* **Python**: A simple [demo server](/examples/python-server-demo) that shows how to use the `mcp-ui-server` Python package.\n* [XMCP](https://github.com/basementstudio/xmcp/tree/main/examples/mcp-ui) - Typescript MCP framework with `mcp-ui` starter example.\n\nDrop those URLs into any MCP-compatible host to see `mcp-ui` in action. For a supported local inspector, see the [ui-inspector](https://github.com/idosal/ui-inspector).\n\n## 💻 Supported Hosts\n\n`mcp-ui` is supported by a growing number of MCP-compatible clients. Feature support varies by host:\n\n| Host | Rendering | UI Actions | Notes\n| :-------- | :-------: | :--------: | :--------: |\n| [Nanobot](https://www.nanobot.ai/) | ✅ | ✅ |\n| [ChatGPT](https://chatgpt.com/) | ✅ | ⚠️ | [Guide](https://mcpui.dev/guide/apps-sdk)\n| [Postman](https://www.postman.com/) | ✅ | ⚠️ |\n| [Goose](https://block.github.io/goose/) | ✅ | ⚠️ |\n| [LibreChat](https://www.librechat.ai/) | ✅ | ⚠️ |\n| [Smithery](https://smithery.ai/playground) | ✅ | ❌ |\n| [MCPJam](https://www.mcpjam.com/) | ✅ | ❌ |\n| [fast-agent](https://fast-agent.ai/mcp/mcp-ui/) | ✅ | ❌ |\n| [VSCode](https://github.com/microsoft/vscode/issues/260218) (TBA) | ? | ? |\n\n**Legend:**\n- ✅: Supported\n- ⚠️: Partial Support\n- ❌: Not Supported (yet)\n\n## 🔒 Security\nHost and user security is one of `mcp-ui`'s primary concerns. In all content types, the remote code is executed in a sandboxed iframe.\n\n## 🛣️ Roadmap\n\n- [X] Add online playground\n- [X] Expand UI Action API (beyond tool calls)\n- [X] Support Web Components\n- [X] Support Remote-DOM\n- [ ] Add component libraries (in progress)\n- [ ] Add SDKs for additional programming languages (in progress; Ruby, Python available)\n- [ ] Support additional frontend frameworks\n- [ ] Add declarative UI content type\n- [ ] Support generative UI?\n \n## Core Team\n`mcp-ui` is a project by [Ido Salomon](https://x.com/idosal1), in collaboration with [Liad Yosef](https://x.com/liadyosef).\n\n## 🤝 Contributing\n\nContributions, ideas, and bug reports are welcome! See the [contribution guidelines](https://github.com/idosal/mcp-ui/blob/main/.github/CONTRIBUTING.md) to get started.\n\n## 📄 License\n\nApache License 2.0 © [The MCP-UI Authors](LICENSE)\n\n## Disclaimer\n\nThis project is provided \"as is\", without warranty of any kind. The `mcp-ui` authors and contributors shall not be held liable for any damages, losses, or issues arising from the use of this software. Use at your own risk.\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"$L1d\",null,{\"defaultValue\":\"readme\",\"className\":\"w-full\",\"children\":[[\"$\",\"$L1e\",null,{\"children\":[[\"$\",\"$L1f\",null,{\"value\":\"readme\",\"children\":\"Readme\"}],[\"$\",\"$L1f\",null,{\"value\":\"dependencies\",\"children\":[\"Dependencies\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",2,\")\"]}]]}],[\"$\",\"$L1f\",null,{\"value\":\"versions\",\"children\":[\"Versions\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",52,\")\"]}]]}]]}],[\"$\",\"$L20\",null,{\"value\":\"readme\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L21\",null,{\"readme\":\"$22\"}]}],\"$L23\",\"$L24\"]}]\n"])</script><script>self.__next_f.push([1,"27:I[7860,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"VersionList\"]\n"])</script><script>self.__next_f.push([1,"23:[\"$\",\"$L20\",null,{\"value\":\"dependencies\",\"className\":\"mt-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-6 lg:grid-cols-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package h-4 w-4\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],\"Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":2}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"@modelcontextprotocol/ext-apps\",{\"href\":\"/package/%40modelcontextprotocol%2Fext-apps\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@modelcontextprotocol/ext-apps\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.3.1\"}]]}],[\"$\",\"$L5\",\"@modelcontextprotocol/sdk\",{\"href\":\"/package/%40modelcontextprotocol%2Fsdk\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@modelcontextprotocol/sdk\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.25.1\"}]]}]]}]}]]}],false,[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":\"$L25\"}],\"$L26\"]}]]}]}]\n"])</script><script>self.__next_f.push([1,"24:[\"$\",\"$L20\",null,{\"value\":\"versions\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L27\",null,{\"packageName\":\"@mcp-ui/server\",\"versions\":[{\"version\":\"6.0.1\",\"date\":\"2026-02-06T16:33:23.861Z\",\"deprecated\":\"$undefined\"},{\"version\":\"6.0.0\",\"date\":\"2026-01-26T01:26:02.417Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.17.0-alpha.2\",\"date\":\"2025-12-20T17:36:36.549Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.17.0-alpha.1\",\"date\":\"2025-12-18T19:32:33.483Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.16.3\",\"date\":\"2025-12-18T17:12:37.746Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.16.2\",\"date\":\"2025-12-08T00:48:09.127Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.16.1\",\"date\":\"2025-12-01T00:10:57.730Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.16.0\",\"date\":\"2025-11-30T22:37:09.520Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.15.0\",\"date\":\"2025-11-29T14:24:49.112Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.14.0\",\"date\":\"2025-11-29T01:56:36.355Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.13.1\",\"date\":\"2025-10-25T10:13:14.740Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.13.0\",\"date\":\"2025-10-22T16:26:51.891Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.12.0\",\"date\":\"2025-10-13T22:48:15.083Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.12.0-alpha.6\",\"date\":\"2025-10-13T22:43:30.584Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.12.0-alpha.5\",\"date\":\"2025-10-12T00:05:26.703Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.12.0-alpha.4\",\"date\":\"2025-10-11T23:47:36.170Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.12.0-alpha.3\",\"date\":\"2025-10-11T23:40:07.320Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.12.0-alpha.2\",\"date\":\"2025-10-10T16:33:29.353Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.12.0-alpha.1\",\"date\":\"2025-10-10T08:47:24.601Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.0-alpha.1\",\"date\":\"2025-10-10T08:32:35.177Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.11.0\",\"date\":\"2025-09-16T15:29:25.159Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.10.0\",\"date\":\"2025-08-22T22:55:57.824Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.2.0\",\"date\":\"2025-07-18T21:36:20.107Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.1.2\",\"date\":\"2025-07-18T14:20:11.600Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.1.1\",\"date\":\"2025-07-18T04:23:55.894Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.1.0\",\"date\":\"2025-07-18T00:56:13.948Z\",\"deprecated\":\"$undefined\"},{\"version\":\"5.0.0\",\"date\":\"2025-07-17T21:00:19.905Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.1.4\",\"date\":\"2025-07-16T21:40:36.776Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.1.3\",\"date\":\"2025-07-15T00:02:44.427Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.1.2\",\"date\":\"2025-07-10T20:48:23.009Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.1.1\",\"date\":\"2025-07-06T23:58:15.951Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.1.0\",\"date\":\"2025-07-05T21:33:32.909Z\",\"deprecated\":\"$undefined\"},{\"version\":\"4.0.0\",\"date\":\"2025-07-05T14:34:35.040Z\",\"deprecated\":\"$undefined\"},{\"version\":\"3.0.0\",\"date\":\"2025-07-04T22:54:52.295Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.5.1\",\"date\":\"2025-06-28T15:23:13.976Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.5.0\",\"date\":\"2025-06-27T23:53:46.160Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.4.0\",\"date\":\"2025-06-20T21:32:14.778Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.3.3\",\"date\":\"2025-06-19T16:21:35.776Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.3.2\",\"date\":\"2025-06-14T16:53:43.778Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.3.1\",\"date\":\"2025-06-14T15:52:27.877Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.3.0\",\"date\":\"2025-06-13T20:43:32.771Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.2.0\",\"date\":\"2025-06-03T15:52:55.143Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.1.0\",\"date\":\"2025-05-31T00:13:56.385Z\",\"deprecated\":\"$undefined\"},{\"version\":\"2.0.0\",\"date\":\"2025-05-23T01:28:09.682Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.1.0\",\"date\":\"2025-05-16T23:04:18.238Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.7\",\"date\":\"2025-05-16T18:15:29.207Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.6\",\"date\":\"2025-05-16T15:10:28.035Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.5\",\"date\":\"2025-05-16T14:14:40.880Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.4\",\"date\":\"2025-05-16T12:31:08.231Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.3\",\"date\":\"2025-05-16T12:10:46.481Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.2\",\"date\":\"2025-05-16T12:01:02.091Z\",\"deprecated\":\"$undefined\"},{\"version\":\"1.0.1\",\"date\":\"2025-05-16T11:55:12.161Z\",\"deprecated\":\"$undefined\"}],\"currentVersion\":\"6.0.1\"}]}]\n"])</script><div style="display:none" id="S:1"><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div class="flex flex-wrap items-start gap-3"><h1 class="font-mono text-2xl font-bold sm:text-3xl">@mcp-ui/server</h1><div class="flex flex-wrap items-center gap-2"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 font-mono">v6.0.1</span><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-blue-600 border-blue-200"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-code mr-1 h-3 w-3"><path d="M10 12.5 8 15l2 2.5"></path><path d="m14 12.5 2 2.5-2 2.5"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"></path></svg>TypeScript</span></div></div><p class="text-lg text-muted-foreground">mcp-ui Server SDK</p><div class="flex flex-wrap gap-4 text-sm text-muted-foreground"><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg><span class="font-medium text-foreground">41.6K</span>/week</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-4 w-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Updated 2 days ago</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scale h-4 w-4"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="M7 21h10"></path><path d="M12 3v18"></path><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"></path></svg>Apache-2.0</span><span class="flex items-center gap-1.5">Unpacked: 3.0 MB</span></div><div class="text-sm"><span class="text-muted-foreground">Published by </span><a class="font-medium hover:underline" href="/~idosal">idosal</a></div></div><div class="w-full space-y-4 lg:w-80"><div class="rounded-lg border bg-card"><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="text-muted-foreground inline-flex h-9 items-center w-full justify-start rounded-none border-b bg-transparent p-0" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_36av5ubrb_-content-npm" data-state="active" id="radix-_R_36av5ubrb_-trigger-npm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">npm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-yarn" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-yarn" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">yarn</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-pnpm" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-pnpm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">pnpm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-bun" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-bun" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">bun</button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-npm" id="radix-_R_36av5ubrb_-content-npm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0" style="animation-duration:0s"><div class="flex items-center justify-between gap-2 p-3"><code class="flex-1 overflow-x-auto whitespace-nowrap font-mono text-sm">npm install @mcp-ui/server</code><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9 h-8 w-8 shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-yarn" hidden="" id="radix-_R_36av5ubrb_-content-yarn" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-pnpm" hidden="" id="radix-_R_36av5ubrb_-content-pnpm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-bun" hidden="" id="radix-_R_36av5ubrb_-content-bun" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div></div></div><div class="flex flex-wrap gap-2"><a href="https://npmjs.com/package/@mcp-ui/server" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link mr-1.5 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>npm</a></div><div class="rounded-lg border p-3"><h4 class="mb-2 text-sm font-medium">Dist Tags</h4><div class="space-y-1"><div class="flex justify-between text-sm"><span class="text-muted-foreground">alpha</span><a class="font-mono text-xs hover:underline" href="/package/@mcp-ui/server/v/5.17.0-alpha.2">5.17.0-alpha.2</a></div><div class="flex justify-between text-sm"><span class="text-muted-foreground">latest</span><a class="font-mono text-xs hover:underline" href="/package/@mcp-ui/server/v/6.0.1">6.0.1</a></div></div></div></div></div><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2 w-full"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_aav5ubrb_-content-readme" data-state="active" id="radix-_R_aav5ubrb_-trigger-readme" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Readme</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-dependencies" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-dependencies" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Dependencies<span class="ml-1.5 text-xs text-muted-foreground">(2)</span></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-versions" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-versions" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Versions<span class="ml-1.5 text-xs text-muted-foreground">(52)</span></button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-readme" id="radix-_R_aav5ubrb_-content-readme" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6" style="animation-duration:0s"><div class="relative"><div class="prose prose-sm dark:prose-invert max-w-none overflow-hidden rounded-lg border p-6" style="max-height:500px"><p><h2 class="text-xl font-semibold mt-5 mb-3">📦 Model Context Protocol UI SDK</h2></p><p class="my-3"><p align="center"><br /> <img width="250" alt="image" src="https://github.com/user-attachments/assets/65b9698f-990f-4846-9b2d-88de91d53d4d" /><br /></p></p><p class="my-3"><p align="center"><br /> <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><br /> <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><br /> <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><br /> <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><br /> <a href="https://discord.gg/CEAG4KW7ZH"><img src="https://img.shields.io/discord/1401195140436983879?logo=discord&label=discord" alt="Discord"></a><br /> <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><br /></p></p><p class="my-3"><p align="center"><br /> <a href="#-whats-mcp-ui">What's mcp-ui?</a> •<br /> <a href="#-core-concepts">Core Concepts</a> •<br /> <a href="#-installation">Installation</a> •<br /> <a href="#-getting-started">Getting Started</a> •<br /> <a href="#-walkthrough">Walkthrough</a> •<br /> <a href="#-examples">Examples</a> •<br /> <a href="#-supported-hosts">Supported Hosts</a> •<br /> <a href="#-security">Security</a> •<br /> <a href="#-roadmap">Roadmap</a> •<br /> <a href="#-contributing">Contributing</a> •<br /> <a href="#-license">License</a><br /></p></p><p class="my-3">----</p><p class="my-3"><strong><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">mcp-ui</code></strong> brings interactive web components to the <a href="https://modelcontextprotocol.io/introduction" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Model Context Protocol</a> (MCP). Deliver rich, dynamic UI resources directly from your MCP server to be rendered by the client. Take AI interaction to the next level!</p><p class="my-3">> <em>This project is an experimental community playground for MCP UI ideas. Expect rapid iteration and enhancements!</em></p><p class="my-3"><p align="center"><br /> <video src="https://github.com/user-attachments/assets/7180c822-2dd9-4f38-9d3e-b67679509483"></video><br /></p></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">💡 What's <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">mcp-ui</code>?</h2></p><p class="my-3"><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">mcp-ui</code> is a playground for the open spec of UI over MCP. It offers a collection of community SDKs comprising:</p><p class="my-3">* <strong><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">@mcp-ui/server</code> (TypeScript)</strong>: Utilities to generate UI resources (<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">UIResource</code>) on your MCP server.<br />* <strong><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">@mcp-ui/client</code> (TypeScript)</strong>: UI components (e.g., <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><UIResourceRenderer /></code>) to render the UI resources and handle their events.<br />* <strong><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">mcp_ui_server</code> (Ruby)</strong>: Utilities to generate UI resources on your MCP server in a Ruby environment.<br />* <strong><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">mcp-ui-server</code> (Python)</strong>: Utilities to generate UI resources on your MCP server in a Python environment.</p><p class="my-3">Together, they let you define reusable UI snippets on the server side, seamlessly and securely render them in the client, and react to their actions in the MCP host environment.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">✨ Core Concepts</h2></p><p class="my-3">In essence, by using <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">mcp-ui</code> SDKs, servers and hosts can agree on contracts that enable them to create and render interactive UI snippets (as a path to a standardized UI approach in MCP).</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />The primary payload returned from the server to the client is the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">UIResource</code>:</p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />interface UIResource {<br /> type: 'resource';<br /> resource: {<br /> uri: string; // e.g., ui://component/id<br /> mimeType: 'text/html' | 'text/uri-list' | 'application/vnd.mcp-ui.remote-dom'; // text/html for HTML content, text/uri-list for URL content, application/vnd.mcp-ui.remote-dom for remote-dom content (Javascript)<br /> text?: string; // Inline HTML, external URL, or remote-dom script<br /> blob?: string; // Base64-encoded HTML, URL, or remote-dom script<br /> };<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">* <strong></code>uri<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: Unique identifier for caching and routing<br /> * </code>ui://…<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> — UI resources (rendering method determined by mimeType)<br />* <strong></code>mimeType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: </code>text/html<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for HTML content (iframe srcDoc), </code>text/uri-list<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for URL content (iframe src), </code>application/vnd.mcp-ui.remote-dom<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for remote-dom content (Javascript)<br /> * <strong>MCP-UI requires a single URL</strong>: While </code>text/uri-list<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> format supports multiple URLs, MCP-UI uses only the first valid </code>http/s<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> URL and warns if additional URLs are found<br />* <strong></code>text<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> vs. </code>blob<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: Choose </code>text<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for simple strings; use </code>blob<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for larger or encoded content.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The UI Resource is rendered in the </code><UIResourceRenderer /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component. It automatically detects the resource type and renders the appropriate component.</p><p class="my-3">It is available as a React component and as a Web Component.</p><p class="my-3"><strong>React Component</strong></p><p class="my-3">It accepts the following props:<br />- <strong></code>resource<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: The resource object from an MCP Tool response. It must include </code>uri<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>mimeType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and content (</code>text<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>blob<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)<br />- <strong></code>onUIAction<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: Optional callback for handling UI actions from the resource:<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">typescript<br /> { type: 'tool', payload: { toolName: string, params: Record<string, unknown> }, messageId?: string } |<br /> { type: 'intent', payload: { intent: string, params: Record<string, unknown> }, messageId?: string } |<br /> { type: 'prompt', payload: { prompt: string }, messageId?: string } |<br /> { type: 'notify', payload: { message: string }, messageId?: string } |<br /> { type: 'link', payload: { url: string }, messageId?: string }<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> When actions include a </code>messageId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, the iframe automatically receives response messages for asynchronous handling.<br />- <strong></code>supportedContentTypes<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: Optional array to restrict which content types are allowed (</code>['rawHtml', 'externalUrl', 'remoteDom']<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)<br />- <strong></code>htmlProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: Optional props for the internal </code><HTMLResourceRenderer><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - <strong></code>style<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: Optional custom styles for the iframe<br /> - <strong></code>iframeProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: Optional props passed to the iframe element<br /> - <strong></code>iframeRenderData<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: Optional </code>Record<string, unknown><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to pass data to the iframe upon rendering. This enables advanced use cases where the parent application needs to provide initial state or configuration to the sandboxed iframe content.<br /> - <strong></code>autoResizeIframe<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: Optional </code>boolean | { width?: boolean; height?: boolean }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to automatically resize the iframe to the size of the content.<br />- <strong></code>remoteDomProps<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: Optional props for the internal </code><RemoteDOMResourceRenderer><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - <strong></code>library<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: Optional component library for Remote DOM resources (defaults to </code>basicComponentLibrary<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)<br /> - <strong></code>remoteElements<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: remote element definitions for Remote DOM resources.</p><p class="my-3"><strong>Web Component</strong></p><p class="my-3">The Web Component is available as </code><ui-resource-renderer><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. It accepts the same props as the React component, but they must be passed as strings.</p><p class="my-3">Example:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><ui-resource-renderer<br /> resource='{ "mimeType": "text/html", "text": "<h2>Hello from the Web Component!</h2>" }'<br />></ui-resource-renderer><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The </code>onUIAction<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop can be handled by attaching an event listener to the component:<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />const renderer = document.querySelector('ui-resource-renderer');<br />renderer.addEventListener('onUIAction', (event) => {<br /> console.log('Action:', event.detail);<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The Web Component is available in the </code>@mcp-ui/client<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> package at </code>dist/ui-resource-renderer.wc.js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### HTML (</code>text/html<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>text/uri-list<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</p><p class="my-3">Rendered using the internal </code><HTMLResourceRenderer /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component, which displays content inside an </code><iframe><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This is suitable for self-contained HTML or embedding external apps.</p><p class="my-3">* <strong></code>mimeType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>:<br /> * </code>text/html<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Renders inline HTML content.<br /> * </code>text/uri-list<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Renders an external URL. MCP-UI uses the first valid </code>http/s<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> URL.</p><p class="my-3">#### Remote DOM (</code>application/vnd.mcp-ui.remote-dom<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</p><p class="my-3">Rendered using the internal </code><RemoteDOMResourceRenderer /><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component, which utilizes Shopify's <a href="https://github.com/Shopify/remote-dom" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>remote-dom<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a>. The server responds with a script that describes the UI and events. On the host, the script is securely rendered in a sandboxed iframe, and the UI changes are communicated to the host in JSON, where they're rendered using the host's component library. This is more flexible than iframes and allows for UIs that match the host's look-and-feel.</p><p class="my-3">* <strong></code>mimeType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong>: </code>application/vnd.mcp-ui.remote-dom+javascript; framework={react | webcomponents}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">UI snippets must be able to interact with the agent. In </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, this is done by hooking into events sent from the UI snippet and reacting to them in the host (see </code>onUIAction<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop). For example, an HTML may trigger a tool call when a button is clicked by sending an event which will be caught handled by the client.</p><p class="my-3"><br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">MCP-UI SDKs includes adapter support for host-specific implementations, enabling your open MCP-UI widgets to work seamlessly regardless of host. Adapters automatically translate between MCP-UI's </code>postMessage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> protocol and host-specific APIs. Over time, as hosts become compatible with the open spec, these adapters wouldn't be needed.</p><p class="my-3">#### Available Adapters</p><p class="my-3">##### Apps SDK Adapter</p><p class="my-3">For Apps SDK environments (e.g., ChatGPT), this adapter translates MCP-UI protocol to Apps SDK API calls (e.g., </code>window.openai<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">).</p><p class="my-3"><strong>How it Works:</strong><br />- Intercepts MCP-UI </code>postMessage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> calls from your widgets<br />- Translates them to appropriate Apps SDK API calls<br />- Handles bidirectional communication (tools, prompts, state management)<br />- Works transparently - your existing MCP-UI code continues to work without changes</p><p class="my-3"><strong>Usage:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />import { createUIResource } from '@mcp-ui/server';</p><p class="my-3">const htmlResource = createUIResource({<br /> uri: 'ui://greeting/1',<br /> content: { <br /> type: 'rawHtml', <br /> htmlString: </code><br /> <button onclick="window.parent.postMessage({ type: 'tool', payload: { toolName: 'myTool', params: {} } }, '*')"><br /> Call Tool<br /> </button><br /> <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> <br /> },<br /> encoding: 'text',<br /> // Enable adapters<br /> adapters: {<br /> appsSdk: {<br /> enabled: true,<br /> config: ...<br /> }<br /> // Future adapters can be enabled here<br /> }<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The adapter scripts are automatically injected into your HTML content and handle all protocol translation.</p><p class="my-3"><strong>Supported Actions:</strong><br />- ✅ <strong>Tool calls</strong> - </code>{ type: 'tool', payload: { toolName, params } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- ✅ <strong>Prompts</strong> - </code>{ type: 'prompt', payload: { prompt } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- ✅ <strong>Intents</strong> - </code>{ type: 'intent', payload: { intent, params } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (converted to prompts)<br />- ✅ <strong>Notifications</strong> - </code>{ type: 'notify', payload: { message } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- ✅ <strong>Render data</strong> - Access to </code>toolInput<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>toolOutput<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>widgetState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>theme<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>locale<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- ⚠️ <strong>Links</strong> - </code>{ type: 'link', payload: { url } }<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (may not be supported, returns error in some environments)</p><p class="my-3"><br />#### Advanced Usage</p><p class="my-3">You can manually wrap HTML with adapters, get MIME types, or access adapter scripts directly:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br />import { wrapHtmlWithAdapters, getAdapterMimeType, getAppsSdkAdapterScript } from '@mcp-ui/server';</p><p class="my-3">const adaptersConfig = {<br /> appsSdk: {<br /> enabled: true,<br /> config: { intentHandling: 'ignore' }<br /> }<br />};</p><p class="my-3">// Manually wrap HTML with adapters (returns string)<br />const wrappedHtml = wrapHtmlWithAdapters(<br /> '<button>Click me</button>',<br /> adaptersConfig<br />);</p><p class="my-3">// Get the MIME type for the enabled adapters<br />const mimeType = getAdapterMimeType(adaptersConfig);<br />// Returns: 'text/html+skybridge'</p><p class="my-3">// Get a specific adapter script directly<br />const appsSdkScript = getAppsSdkAdapterScript({ timeout: 60000 });<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🏗️ Installation</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /><h1 class="text-2xl font-bold mt-6 mb-4">using npm</h1><br />npm install @mcp-ui/server @mcp-ui/client</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">or pnpm</h1><br />pnpm add @mcp-ui/server @mcp-ui/client</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">or yarn</h1><br />yarn add @mcp-ui/server @mcp-ui/client<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />gem install mcp_ui_server<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /><h1 class="text-2xl font-bold mt-6 mb-4">using pip</h1><br />pip install mcp-ui-server</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">or uv</h1><br />uv add mcp-ui-server<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🚀 Getting Started</h2></p><p class="my-3">You can use <a href="https://gitmcp.io/idosal/mcp-ui" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">GitMCP</a> to give your IDE access to </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">'s latest documentation! </p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">1. <strong>Server-side</strong>: Build your UI resources</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ts<br /> import { createUIResource } from '@mcp-ui/server';<br /> import {<br /> createRemoteComponent,<br /> createRemoteDocument,<br /> createRemoteText,<br /> } from '@remote-dom/core';</p><p class="my-3"> // Inline HTML<br /> const htmlResource = createUIResource({<br /> uri: 'ui://greeting/1',<br /> content: { type: 'rawHtml', htmlString: '<p>Hello, MCP UI!</p>' },<br /> encoding: 'text',<br /> });</p><p class="my-3"> // External URL<br /> const externalUrlResource = createUIResource({<br /> uri: 'ui://greeting/1',<br /> content: { type: 'externalUrl', iframeUrl: 'https://example.com' },<br /> encoding: 'text',<br /> });</p><p class="my-3"> // remote-dom<br /> const remoteDomResource = createUIResource({<br /> uri: 'ui://remote-component/action-button',<br /> content: {<br /> type: 'remoteDom',<br /> script: </code><br /> const button = document.createElement('ui-button');<br /> button.setAttribute('label', 'Click me for a tool call!');<br /> button.addEventListener('press', () => {<br /> window.parent.postMessage({ type: 'tool', payload: { toolName: 'uiInteraction', params: { action: 'button-click', from: 'remote-dom' } } }, '*');<br /> });<br /> root.appendChild(button);<br /> <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">,<br /> framework: 'react', // or 'webcomponents'<br /> },<br /> encoding: 'text',<br /> });<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">2. <strong>Client-side</strong>: Render in your MCP host</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /> import React from 'react';<br /> import { UIResourceRenderer } from '@mcp-ui/client';</p><p class="my-3"> function App({ mcpResource }) {<br /> if (<br /> mcpResource.type === 'resource' &&<br /> mcpResource.resource.uri?.startsWith('ui://')<br /> ) {<br /> return (<br /> <UIResourceRenderer<br /> resource={mcpResource.resource}<br /> onUIAction={(result) => {<br /> console.log('Action:', result);<br /> }}<br /> /><br /> );<br /> }<br /> return <p>Unsupported resource</p>;<br /> }<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Server-side</strong>: Build your UI resources</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">python<br /> from mcp_ui_server import create_ui_resource</p><p class="my-3"> # Inline HTML<br /> html_resource = create_ui_resource({<br /> "uri": "ui://greeting/1",<br /> "content": { "type": "rawHtml", "htmlString": "<p>Hello, from Python!</p>" },<br /> "encoding": "text",<br /> })</p><p class="my-3"> # External URL<br /> external_url_resource = create_ui_resource({<br /> "uri": "ui://greeting/2",<br /> "content": { "type": "externalUrl", "iframeUrl": "https://example.com" },<br /> "encoding": "text",<br /> })<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Server-side</strong>: Build your UI resources</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">ruby<br /> require 'mcp_ui_server'</p><p class="my-3"> # Inline HTML<br /> html_resource = McpUiServer.create_ui_resource(<br /> uri: 'ui://greeting/1',<br /> content: { type: :raw_html, htmlString: '<p>Hello, from Ruby!</p>' },<br /> encoding: :text<br /> )</p><p class="my-3"> # External URL<br /> external_url_resource = McpUiServer.create_ui_resource(<br /> uri: 'ui://greeting/2',<br /> content: { type: :external_url, iframeUrl: 'https://example.com' },<br /> encoding: :text<br /> )</p><p class="my-3"> # remote-dom<br /> remote_dom_resource = McpUiServer.create_ui_resource(<br /> uri: 'ui://remote-component/action-button',<br /> content: {<br /> type: :remote_dom,<br /> script: "<br /> const button = document.createElement('ui-button');<br /> button.setAttribute('label', 'Click me from Ruby!');<br /> button.addEventListener('press', () => {<br /> window.parent.postMessage({ type: 'tool', payload: { toolName: 'uiInteraction', params: { action: 'button-click', from: 'ruby-remote-dom' } } }, '*');<br /> });<br /> root.appendChild(button);<br /> ",<br /> framework: :react,<br /> },<br /> encoding: :text<br /> )<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🚶 Walkthrough</h2></p><p class="my-3">For a detailed, simple, step-by-step guide on how to integrate </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> into your own server, check out the full server walkthroughs on the <a href="https://mcpui.dev" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">mcp-ui documentation site</a>:</p><p class="my-3">- <strong><a href="https://mcpui.dev/guide/server/typescript/walkthrough" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">TypeScript Server Walkthrough</a></strong><br />- <strong><a href="https://mcpui.dev/guide/server/ruby/walkthrough" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Ruby Server Walkthrough</a></strong><br />- <strong><a href="https://mcpui.dev/guide/server/python/walkthrough" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Python Server Walkthrough</a></strong></p><p class="my-3">These guides will show you how to add a </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> endpoint to an existing server, create tools that return UI resources, and test your setup with the </code>ui-inspector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">!</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🌍 Examples</h2></p><p class="my-3"><strong>Client Examples</strong><br />* <a href="https://github.com/block/goose" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Goose</a> - open source AI agent that supports </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />* <a href="https://github.com/danny-avila/LibreChat" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">LibreChat</a> - enhanced ChatGPT clone that supports </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />* <a href="https://github.com/idosal/ui-inspector" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ui-inspector</a> - inspect local </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">-enabled servers.<br />* <a href="https://github.com/idosal/scira-mcp-ui-chat" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MCP-UI Chat</a> - interactive chat built with the </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> client. Check out the <a href="https://scira-mcp-chat-git-main-idosals-projects.vercel.app/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">hosted version</a>!<br />* MCP-UI RemoteDOM Playground (</code>examples/remote-dom-demo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) - local demo app to test RemoteDOM resources<br />* MCP-UI Web Component Demo (</code>examples/wc-demo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) - local demo app to test the Web Component integration in hosts</p><p class="my-3"><strong>Server Examples</strong><br />* <strong>TypeScript</strong>: A <a href="examples/server" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">full-featured server</a> that is deployed to a hosted environment for easy testing.<br /> * <strong><a href="./examples/typescript-server-demo" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>typescript-server-demo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a></strong>: A simple Typescript server that demonstrates how to generate UI resources.<br /> * <strong>server</strong>: A <a href="examples/server" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">full-featured Typescript server</a> that is deployed to a hosted Cloudflare environment for easy testing.<br /> * <strong>HTTP Streaming</strong>: </code>https://remote-mcp-server-authless.idosalomon.workers.dev/mcp<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> * <strong>SSE</strong>: </code>https://remote-mcp-server-authless.idosalomon.workers.dev/sse<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />* <strong>Ruby</strong>: A barebones <a href="/examples/ruby-server-demo" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">demo server</a> that shows how to use </code>mcp_ui_server<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>mcp<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> gems together.<br />* <strong>Python</strong>: A simple <a href="/examples/python-server-demo" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">demo server</a> that shows how to use the </code>mcp-ui-server<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> Python package.<br />* <a href="https://github.com/basementstudio/xmcp/tree/main/examples/mcp-ui" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">XMCP</a> - Typescript MCP framework with </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> starter example.</p><p class="my-3">Drop those URLs into any MCP-compatible host to see </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in action. For a supported local inspector, see the <a href="https://github.com/idosal/ui-inspector" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ui-inspector</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">💻 Supported Hosts</h2></p><p class="my-3"></code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is supported by a growing number of MCP-compatible clients. Feature support varies by host:</p><p class="my-3">| Host | Rendering | UI Actions | Notes<br />| :-------- | :-------: | :--------: | :--------: |<br />| <a href="https://www.nanobot.ai/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Nanobot</a> | ✅ | ✅ |<br />| <a href="https://chatgpt.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ChatGPT</a> | ✅ | ⚠️ | <a href="https://mcpui.dev/guide/apps-sdk" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Guide</a><br />| <a href="https://www.postman.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Postman</a> | ✅ | ⚠️ |<br />| <a href="https://block.github.io/goose/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Goose</a> | ✅ | ⚠️ |<br />| <a href="https://www.librechat.ai/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">LibreChat</a> | ✅ | ⚠️ |<br />| <a href="https://smithery.ai/playground" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Smithery</a> | ✅ | ❌ |<br />| <a href="https://www.mcpjam.com/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MCPJam</a> | ✅ | ❌ |<br />| <a href="https://fast-agent.ai/mcp/mcp-ui/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">fast-agent</a> | ✅ | ❌ |<br />| <a href="https://github.com/microsoft/vscode/issues/260218" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">VSCode</a> (TBA) | ? | ? |</p><p class="my-3"><strong>Legend:</strong><br />- ✅: Supported<br />- ⚠️: Partial Support<br />- ❌: Not Supported (yet)</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🔒 Security</h2><br />Host and user security is one of </code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">'s primary concerns. In all content types, the remote code is executed in a sandboxed iframe.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🛣️ Roadmap</h2></p><p class="my-3">- [X] Add online playground<br />- [X] Expand UI Action API (beyond tool calls)<br />- [X] Support Web Components<br />- [X] Support Remote-DOM<br />- [ ] Add component libraries (in progress)<br />- [ ] Add SDKs for additional programming languages (in progress; Ruby, Python available)<br />- [ ] Support additional frontend frameworks<br />- [ ] Add declarative UI content type<br />- [ ] Support generative UI?<br /> <br /><h2 class="text-xl font-semibold mt-5 mb-3">Core Team</h2><br /></code>mcp-ui<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is a project by <a href="https://x.com/idosal1" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Ido Salomon</a>, in collaboration with <a href="https://x.com/liadyosef" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Liad Yosef</a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">🤝 Contributing</h2></p><p class="my-3">Contributions, ideas, and bug reports are welcome! See the <a href="https://github.com/idosal/mcp-ui/blob/main/.github/CONTRIBUTING.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">contribution guidelines</a> to get started.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">📄 License</h2></p><p class="my-3">Apache License 2.0 © <a href="LICENSE" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">The MCP-UI Authors</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Disclaimer</h2></p><p class="my-3">This project is provided "as is", without warranty of any kind. The </code>mcp-ui` authors and contributors shall not be held liable for any damages, losses, or issues arising from the use of this software. Use at your own risk.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"25:[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":7}]]}]\n"])</script><script>self.__next_f.push([1,"26:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@types/node\",{\"href\":\"/package/%40types%2Fnode\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/node\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.19.100\"}]]}],[\"$\",\"$L5\",\"@vitest/coverage-v8\",{\"href\":\"/package/%40vitest%2Fcoverage-v8\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@vitest/coverage-v8\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0\"}]]}],[\"$\",\"$L5\",\"esbuild\",{\"href\":\"/package/esbuild\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"esbuild\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.19.0\"}]]}],[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.0.0\"}]]}],[\"$\",\"$L5\",\"vite\",{\"href\":\"/package/vite\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L28\",\"$undefined\"]}],\"vite\"]}],\"$L29\"]}],\"$L2a\",\"$L2b\"]}]}]\n"])</script><script>self.__next_f.push([1,"28:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n29:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.0.0\"}]\n2a:[\"$\",\"$L5\",\"vite-plugin-dts\",{\"href\":\"/package/vite-plugin-dts\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vite-plugin-dts\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.6.0\"}]]}]\n2b:[\"$\",\"$L5\",\"vitest\",{\"href\":\"/package/vitest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vitest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.0.0\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>

@mcp-ui/server

Dist Tags

📦 Model Context Protocol UI SDK

💡 What's mcp-ui?

✨ Core Concepts

$3

$3

Hello from the Web Component!

$3

💡 What's `mcp-ui`?

`$3`

`Hello from the Web Component!`

`$3`