Back to Apps
MCP Apps Demo
Supports UIby donghaozhang
Showcase of interactive HTML UIs rendered inside AI chat using the MCP Apps extension.
0 stars
0 views
Works in:claude
Exposes:ToolsResources
What it does
This project demonstrates the power of MCP Apps, allowing tools to return rich, interactive HTML content that renders directly in the chat UI instead of plain text. It transforms the AI interaction from a text-based chat into a dynamic application experience.
Key features
- Interactive Clock: A real-time clock widget with timezone display and server-time synchronization.
- System Dashboard: A live metrics dashboard featuring animated charts for CPU, memory, and uptime.
- Bidirectional Interaction: Uses the
@modelcontextprotocol/ext-appsSDK to allow the UI to call back to the MCP server. - Sandboxed Rendering: UI components are rendered in secure iframes within the chat interface.
Installation
- Claude Desktop: Add to
claude_desktop_config.json:
{
"mcpServers": {
"mcp-apps-demo": {
"command": "node",
"args": ["/path/to/mcp-apps-demo/server.js"]
}
}
}
- Claude Code:
claude mcp add mcp-apps-demo node /path/to/mcp-apps-demo/server.js
Supported hosts
- Claude Desktop
- Claude Code
Quick install
npm install && node server.jsInformation
- Pricing
- free
- Published
- 4/24/2026
- stars
