MCP-UI Demos
Preview MCP-UI examples: real-time weather data, interactive seat selection, and dynamic UI actions.
Weather Demo
Preview an MCP-UI resource that displays real-time weather data from Open-Meteo API with beautiful visualizations
Seat Selection
Preview an MCP-UI resource that provides an interactive seat picker with visual feedback and real-time updates
UI Actions
Preview an MCP-UI resource that demonstrates different types of message actions and user interactions
Mood Trip Planner
Plan your perfect trip based on your mood! Big emoji buttons, smooth animations, and personalized destination reveals.
What is this site?
This is a sandbox for exploring and showcasing MCP-UI examples. It provides a hands-on environment to test and visualize the capabilities of Model Context Protocol UI components.
View UI components that can be rendered by MCP-UI clients
Simulate tool calls and user interactions
Debug message passing between MCP servers and UI clients
Prototype new UI patterns for MCP applications
Test real-time data flows and state management
Explore advanced MCP-UI features and capabilities
For Developers
git clone https://github.com/aharvard/mcp_aharvardpnpm installpnpm devpnpm inspectFor MCP Clients
Add as extension in your MCP client
HTTP Endpoint:
https://mcp-aharvard.netlify.app/mcpHTTP type MCP server with streaming transport
Timeout: 300 seconds
Test with these examples:
Weather Demo:
"What's the weather in New York?""Get weather for Los Angeles"Seat Selection:
"Show me available seats for flight AA1234""I want to select seat 2A"UI Actions:
"Show me the tool actions""Demonstrate the prompt action"Mood Trip Planner:
"Help me plan a trip based on my mood""I'm feeling adventurous, suggest a destination"