MCP-UI Demo

What it does

This application demonstrates the power of MCP-UI, a framework that allows MCP servers to return interactive web components and full-page UIs. Instead of just receiving text, the AI can trigger the rendering of a live Kanban board, priority charts, and task status dashboards directly within the client's interface.

Key features

• Interactive Kanban Board: A full task management interface rendered as a UI resource.
• Dynamic Data Visualization: Real-time pie charts showing task distribution and priority breakdowns.
• Hybrid Output: Combines standard text-based tool responses with rich UI elements.
• Next.js Integration: Built with Next.js 15 and Tailwind CSS for a modern, responsive experience.

Installation

• Claude Desktop: Use mcp-remote to connect to the hosted server:

{
  "mcpServers": {
    "learn-mcpui": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "http://localhost:3000/mcp"]
    }
  }
}

• Cursor: Add the URL http://localhost:3000/mcp to your MCP server settings.

Supported hosts

Confirmed support for Cursor and Claude Desktop via HTTP transport.