Get the FREE Ultimate OpenClaw Setup Guide →

mcp-ui

UI over MCP. Create next-gen UI experiences with the protocol and SDK!

Installation
Run this command in your terminal to add the MCP server to Claude Code.
Run in terminal:
Command
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

  1. git clone https://github.com/your-org/mcp-ui.git
  2. cd mcp-ui
  3. npm install
  4. npm run build (if a build step exists)
  5. npm run start

Option B: Install as an npm package (preferred for distribution)

  1. npm install -g @mcp-ui/server
  2. 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

Sponsor this space

Reach thousands of developers