Skill Detail

Render interactive MCP tool UIs with mcp-ui

Build an MCP Apps resource, attach it to a tool through _meta.ui.resourceUri, and verify the host renders the interactive UI alongside tool results.

Integrations & ConnectorsMCP
Integrations & Connectors MCP Security Reviewed
⭐ 4.9k GitHub stars ⬇ 1.6M/wk npm
INSTALL WITH ANY AGENT
npx skills add agentskillexchange/skills --skill render-interactive-mcp-tool-uis-with-mcp-ui Copy
Works best when you want a reusable capability, not another fragile one-off prompt.
At a glance
Tools required
MCP server, MCP Apps-compatible host or legacy MCP-UI host, TypeScript packages @mcp-ui/server and @mcp-ui/client; Python and Ruby server SDKs are also available.
Install & setup
For TypeScript, run npm install @mcp-ui/server @mcp-ui/client, or pnpm add @mcp-ui/server @mcp-ui/client. Create a UI resource with createUIResource, register it with the MCP Apps resource handler, then link a tool to the resource using _meta.ui.resourceUri. For Python use pip install mcp-ui-server; for Ruby use gem install mcp_ui_server.
Author
MCP-UI-Org
Publisher
Open Source Organization
Last updated
Jun 4, 2026
Quick brief

Use mcp-ui when an MCP server needs to return more than plain text or JSON and the operator must expose a reviewable interactive surface beside tool results. The workflow is to install the server and client SDKs, create a UI resource with createUIResource, register the resource handler, link the tool through _meta.ui.resourceUri, and test rendering in an MCP Apps-compatible host or legacy MCP-UI host. Invoke this instead of normal SDK usage when a tool result needs a form, dashboard, confirmation panel, or guided interaction that remains tied to the MCP resource contract. The operator should validate the resource URI, MIME type, sandbox behavior, tool input, tool result, and message handlers before exposing the surface to users. Document the host compatibility and fallback behavior for clients that cannot render apps. The scope boundary is UI resource creation and host rendering for a specific MCP tool. It is not a broad front-end framework, design system, or generic MCP server listing.