Dynamic MCP UI Generator
A comprehensive full-stack application that demonstrates the power of MCP (Model Context Protocol) UI components with dynamic generation capabilities. This application allows users to create, customize, and generate interactive UI components through a sophisticated MCP server with a modern glassmorphism design.
🚀 Features
Core MCP UI Components
- Dynamic UI Generation: Create custom forms, dashboards, and charts on-the-fly
- Real-time Communication: PostMessage API integration for seamless parent-child communication
- Notification System: Toast notifications for user feedback and system events
- Modern Glassmorphism Design: Beautiful glass-like UI with backdrop blur effects
Dynamic UI Generation
- Form Builder: Create custom forms with various field types (text, email, number, select, textarea)
- Dashboard Builder: Generate analytics dashboards with metrics, lists, and charts
- Chart Builder: Create bar charts and pie charts with custom data
- Real-time Preview: See generated components immediately after creation
Advanced MCP Server Features
- Component Management: Track and manage generated UI components
- User Data Storage: Store and retrieve user-specific data
- Dynamic HTML Generation: Server-side HTML generation with embedded JavaScript
- Responsive Design: All generated components are mobile-friendly
Modern Design System
- Glassmorphism: Translucent glass-like components with backdrop blur
- Animated Background: Subtle animated gradient background
- Modern Typography: Inter font family for clean, readable text
- Smooth Animations: Fluid transitions and hover effects
- Responsive Layout: Optimized for all device sizes
🏗️ Project Structure
mcp-ui-poc/
├── client/ # React frontend
│ ├── src/
│ │ ├── App.jsx # Main React component with UI builders
│ │ ├── App.css # Modern glassmorphism styling
│ │ ├── index.css # Global styles and utilities
│ │ └── main.jsx # React entry point
│ ├── package.json # Frontend dependencies
│ └── vite.config.js # Vite configuration
├── server/ # Node.js backend
│ ├── index.js # Express server with API endpoints
│ ├── mcp-server.js # MCP server for dynamic UI generation
│ └── mcp-ui-example.js # Static MCP UI example
├── package.json # Backend dependencies
└── README.md # Project documentation
🛠️ Installation
-
Clone the repository
git clone <repository-url> cd mcp-ui-poc -
Install dependencies
npm install npm run install-all -
Start the development servers
# Terminal 1: Start backend server npm run dev # Terminal 2: Start frontend development server npm run client -
Access the application
- Frontend: http://localhost:3000
- Backend API: http://localhost:3001
📊 API Endpoints
Health Check
GET /api/health- Server status and health information
MCP UI Components
GET /api/mcp-ui-example- Get the static MCP UI demo component
Dynamic UI Generation
POST /api/generate-form- Generate a custom form UIPOST /api/generate-dashboard- Generate a dashboard UIPOST /api/generate-chart- Generate a chart UI
Data Management
POST /api/store-data- Store user dataGET /api/get-data/:userId- Retrieve user dataGET /api/component-info/:componentId- Get component information
🎨 UI Components
Form Builder
Create dynamic forms with:
- Field Types: Text, email, number, select dropdown, textarea
- Validation: Required field support
- Customization: Placeholder text, labels, submit button text
- Real-time Preview: See form changes immediately
Dashboard Builder
Generate analytics dashboards with:
- Metric Widgets: Display key performance indicators
- List Widgets: Show activity feeds and data lists
- Chart Widgets: Embedded data visualizations
- Responsive Layout: Auto-adjusting grid system
Chart Builder
Create data visualizations:
- Bar Charts: Horizontal bar charts with custom data
- Pie Charts: Circular charts with color-coded segments
- Custom Data: Input values and labels via comma-separated format
- Export Functionality: Chart export capabilities
🎨 Design System
Glassmorphism Components
- Translucent Backgrounds: Semi-transparent glass-like surfaces
- Backdrop Blur: Modern blur effects for depth
- Subtle Borders: Light borders for definition
- Soft Shadows: Layered shadow system for depth
Color Palette
- Primary Gradient: Purple to blue gradient (#667eea to #764ba2)
- Success Gradient: Blue to cyan (#4facfe to #00f2fe)
- Warning Gradient: Green to teal (#43e97b to #38f9d7)
- Danger Gradient: Pink to yellow (#fa709a to #fee140)
Typography
- Font Family: Inter (Google Fonts)
- Font Weights: 300, 400, 500, 600, 700
- Responsive: Fluid typography scaling
Animations
- Smooth Transitions: 0.3s cubic-bezier easing
- Hover Effects: Subtle lift and glow effects
- Loading States: Pulse animations for feedback
- Background Animation: Subtle gradient shifts
🔧 Technologies Used
Frontend
- React 18: Modern React with hooks and functional components
- Vite: Fast build tool and development server
- CSS3: Advanced styling with glassmorphism effects
- Inter Font: Modern, readable typography
Backend
- Node.js: JavaScript runtime
- Express.js: Web framework for API endpoints
- CORS: Cross-origin resource sharing
- @mcp-ui/server: MCP UI server SDK
Development Tools
- Nodemon: Automatic server restart on file changes
- ES6 Modules: Modern JavaScript module system
🚀 Scripts
Development
npm run dev- Start backend server with nodemonnpm run client- Start frontend development servernpm run build- Build frontend for production
Installation
npm run install-all- Install both frontend and backend dependenciesnpm run install-client- Install only frontend dependenciesnpm run install-server- Install only backend dependencies
🎯 Usage Examples
Creating a Custom Form
- Navigate to the "Form Builder" tab
- Set the form title and submit button text
- Add fields with desired types and validation
- Click "Generate Form" to create the UI component
- The generated form will appear below with full functionality
Building a Dashboard
- Go to the "Dashboard Builder" tab
- Configure the dashboard title
- Add widgets (metrics, lists, charts)
- Generate the dashboard to see the interactive component
Creating Charts
- Select the "Chart Builder" tab
- Choose chart type (bar or pie)
- Enter data values and labels
- Generate the chart for visualization
🔄 Real-time Features
Form Submission
- Forms automatically send data to the parent application
- Real-time notifications show submission results
- Data can be stored and retrieved via API
Dashboard Interactions
- Refresh buttons update dashboard data
- Widget interactions trigger notifications
- Component state is managed by the MCP server
Chart Export
- Export functionality for generated charts
- Notification system for export events
- Customizable chart appearance and data
🎨 Styling and Design
Modern UI Design
- Glassmorphism: Translucent glass-like components
- Animated Background: Subtle gradient animations
- Responsive Design: Works on all screen sizes
- Interactive Elements: Hover effects and transitions
Component Styling
- Custom CSS Variables: Consistent design tokens
- Grid-based Layouts: Flexible field management
- Toast Notifications: Different types with animations
- Tab Navigation: Active states with smooth transitions
🔒 Security and Best Practices
Data Handling
- User data is stored securely on the server
- Form submissions are validated and sanitized
- API endpoints include proper error handling
Component Isolation
- Generated components run in isolated iframes
- PostMessage API ensures secure communication
- No cross-site scripting vulnerabilities
Accessibility
- Focus States: Clear focus indicators
- High Contrast: Support for high contrast mode
- Reduced Motion: Respects user motion preferences
- Screen Reader: Proper ARIA labels and structure
🚀 Future Enhancements
Planned Features
- More Chart Types: Line charts, scatter plots, area charts
- Advanced Form Validation: Custom validation rules and error messages
- Component Templates: Pre-built templates for common use cases
- Real-time Collaboration: Multi-user editing and sharing
- Export Options: PDF, image, and code export capabilities
Technical Improvements
- Database Integration: Persistent storage for user data
- Authentication: User accounts and session management
- Component Library: Reusable UI component system
- Performance Optimization: Lazy loading and code splitting
Design Enhancements
- Dark/Light Mode: Theme switching capability
- Custom Themes: User-defined color schemes
- Animation Library: Advanced motion design
- Micro-interactions: Delightful user experience details
🤝 Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
Built with ❤️ using React, Node.js, and MCP UI technology with modern glassmorphism design