µLM AI Playground 🚀

Visual AI Workflow Builder - From Idea to Production in Minutes

🏆 Built for Hackathons, Ready for Production

Transform natural language descriptions into production-ready AI workflows with visual drag-and-drop interface, real-time simulation, and universal deployment.

Features

• 🎨 Modern Glassmorphism Design - Inspired by Lovable.dev with beautiful glass effects
• ✨ Animated Background - Flowing data particles create an immersive experience
• 🌓 Dark/Light Theme Toggle - Seamless theme switching with smooth animations
• 📱 Mobile Responsive - Optimized for all screen sizes using Tailwind CSS
• 🚀 Smooth Animations - Powered by Framer Motion for delightful interactions
• 💬 Interactive Prompt Input - Large, beautiful input box with example suggestions
• 🎯 Example Prompts - Clickable suggestions to get users started quickly

🎯 Example Prompts

Try these prompts to get started:

• "Build a document analyzer that extracts insights and generates summaries"
• "Create a multimodal search engine for images and text"
• "Build a sentiment analysis pipeline with custom routing"
• "Design a chatbot with multiple AI expert agents"

🛠️ Tech Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite - Lightning-fast HMR and optimized builds
• Styling: Tailwind CSS - Utility-first CSS framework
• Animation: Framer Motion - Production-ready animations
• Icons: Lucide React - Beautiful, customizable icons
• Workflow Canvas: React Flow - Interactive node-based editor
• Code Editor: Monaco Editor - VS Code's editor
• Routing: React Router v7 - Client-side routing

🎨 Design Features

Prerequisites

• Node.js 16+
• npm or yarn

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd MuLM
   

2. Install dependencies

   npm install
   

3. Set up environment variables

   cp .env.example .env
   # Edit .env and add your OpenAI API key if using AI features
   

4. Start development server

   npm run dev
   

5. Open your browser

   • Navigate to http://localhost:3000
   • Start building AI workflows visually!

📦 Available Scripts

📚 Documentation

• Project Structure - Detailed codebase organization
• API Reference - API documentation
• Deployment Guide - How to deploy
• Troubleshooting - Common issues
• OpenAI Integration - AI setup guide

Design Features

Glassmorphism Effects

• Backdrop blur with transparent backgrounds
• Subtle borders and shadows
• Hover animations with scale transforms

Animated Background

• 50+ floating particles with random properties
• Continuous animation loops
• Responsive gradient backgrounds

Theme System

• Automatic dark/light mode detection
• Smooth theme transitions
• Theme-aware color schemes

Mobile Optimization

• Responsive grid layouts
• Touch-friendly interactions
• Optimized typography scaling

🤝 Contributing

Contributions are welcome! Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with inspiration from modern low-code/no-code platforms
• Powered by cutting-edge web technologies
• Designed for the hackathon community

📧 Support

For issues, questions, or suggestions:

• Open an issue on GitHub
• Check Troubleshooting Guide
• Review Documentation

---

Made with ❤️ for the AI and hackathon community