mcp-ui
UI over MCP. Create next-gen UI experiences with the protocol and SDK!
claude mcp add --transport stdio mcp-ui-org-mcp-ui node path/to/server.js \ --env PORT="Port to run the MCP UI server on" \ --env MCP_API_BASE="Base URL for MCP API (if applicable)"
How to use
mcp-ui is an MCP Apps UI SDK server that powers the UI resources and tools for MCP-based hosts. It provides the server-side support to create, register, and serve UI resources that tools can reference via _meta.ui.resourceUri, enabling hosts to render rich UIs alongside tool results. With the @mcp-ui/server package, you can programmatically create UI resources (UIResource objects) and wire them to tools using the MCP Apps pattern. This server is intended to be deployed alongside your MCP-enabled host and can be consumed by MCP hosts or apps that render MCP UI content.
How to install
Prerequisites:
- Node.js (v14+ recommended) and npm/yarn installed
- Git (optional, for cloning)
Install and run the MCP UI server from source or by using npm (adjust if you publish to npm):
Option A: Clone and install from source
- git clone https://github.com/your-org/mcp-ui.git
- cd mcp-ui
- npm install
- npm run build (if a build step exists)
- npm run start
Option B: Install as an npm package (preferred for distribution)
- npm install -g @mcp-ui/server
- create a small config or run with your desired entry; see docs for CLI usage
Configuration example (env-based): PORT=3000 MCP_API_BASE=https://api.example.com node path/to/server.js
Notes:
- Ensure your environment can reach the MCP API if you set MCP_API_BASE or related vars.
- If deploying behind a reverse proxy, configure appropriate host headers and TLS at the proxy level.
Additional notes
Tips and common issues:
- Ensure the MCP_UI server is reachable by hosts that will render the UI resources; check CORS settings if applicable.
- When linking tools to UIs, use the _meta.ui.resourceUri field to point to your created UIResource URIs.
- If you upgrade @mcp-ui/server, verify compatibility with your hosts and any adapters you rely on.
- For production deployments, consider persistence for UI resources and robust error handling for resource fetches.
- Environment variables: PORT, MCP_API_BASE, and any authentication tokens required by your MCP backend should be kept secure (use a secrets manager in production).
Related MCP Servers
tool-ui
UI components for AI interfaces
mcp-graphql
Model Context Protocol server for GraphQL
lihil
2X faster ASGI web framework for python, offering high-level development, low-level performance.
recall
Persistent cross-session memory for Claude & AI agents. Self-host on Redis/Valkey, or use the managed SaaS at recallmcp.com.
rohlik
MCP server that lets you shop groceries across the Rohlik Group platforms (Rohlik.cz, Knuspr.de, Gurkerl.at, Kifli.hu, Sezamo.ro)
nestjs
NestJS module for seamless Model Context Protocol (MCP) server integration using decorators.