# 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.

- Skill: `agentskillexchange/render-interactive-mcp-tool-uis-with-mcp-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add agentskillexchange/render-interactive-mcp-tool-uis-with-mcp-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agentskillexchange/render-interactive-mcp-tool-uis-with-mcp-ui/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: agentskillexchange (https://skillmd.com/u/agentskillexchange)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/agentskillexchange/render-interactive-mcp-tool-uis-with-mcp-ui

---


# 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.

## Prerequisites

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.

## Installation

Use the upstream install or setup path that matches your environment:
- npm install @mcp-ui/server @mcp-ui/client
- pnpm add @mcp-ui/server @mcp-ui/client
- yarn add @mcp-ui/server @mcp-ui/client
- gem install mcp_ui_server

Requirements and caveats from upstream:
- <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>
- **mcp-ui-server (Python)**: Create UI resources in Python.
- UI 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 t...

Basic usage or getting-started notes:
- <a href="#-getting-started">Getting Started</a> •
- **Usage:**

- Source: https://github.com/MCP-UI-Org/mcp-ui
- Extracted from upstream docs: https://raw.githubusercontent.com/MCP-UI-Org/mcp-ui/HEAD/README.md

## Documentation

- https://github.com/MCP-UI-Org/mcp-ui

## Source

- [Agent Skill Exchange](https://agentskillexchange.com/skills/render-interactive-mcp-tool-uis-with-mcp-ui/)