Dynamic MCP UI Generator

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

🛠️ Installation

1. Clone the repository
   git clone <repository-url> cd mcp-ui-poc
2. Install dependencies
   npm install npm run install-all
3. Start the development servers
   # Terminal 1: Start backend server npm run dev # Terminal 2: Start frontend development server npm run client
4. 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 UI
• POST /api/generate-dashboard - Generate a dashboard UI
• POST /api/generate-chart - Generate a chart UI

Data Management

• POST /api/store-data - Store user data
• GET /api/get-data/:userId - Retrieve user data
• GET /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 nodemon
• npm run client - Start frontend development server
• npm run build - Build frontend for production

Installation

• npm run install-all - Install both frontend and backend dependencies
• npm run install-client - Install only frontend dependencies
• npm run install-server - Install only backend dependencies

🎯 Usage Examples

Creating a Custom Form

1. Navigate to the "Form Builder" tab
2. Set the form title and submit button text
3. Add fields with desired types and validation
4. Click "Generate Form" to create the UI component
5. The generated form will appear below with full functionality

Building a Dashboard

1. Go to the "Dashboard Builder" tab
2. Configure the dashboard title
3. Add widgets (metrics, lists, charts)
4. Generate the dashboard to see the interactive component

Creating Charts

1. Select the "Chart Builder" tab
2. Choose chart type (bar or pie)
3. Enter data values and labels
4. 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

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. 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