Worksona MCP Server

# Worksona Agents Microsite ## 🎉 Overview A beautiful, modern microsite for the Worksona Agents MCP Server project. This single-stop resource provides comprehensive documentation, an interactive agent directory, real-world examples, and deployment instructions. ## ✨ Features ### 🏠 Homepage (`site/index.html`) - Hero section with project overview - Feature highlights (6 key features) - Category preview (20+ agent categories) - Quick start guide - Call-to-action sections - Full responsive design ### 🤖 Agent Directory (`site/agents.html`) - Interactive browser for all 86+ agents - Real-time search functionality - Category filtering and tabs - Detailed agent modal views - Shows capabilities, coordination info, and usage examples - Dynamically generated from agent metadata ### 📚 Documentation (`site/documentation.html`) - Complete installation guide - Usage instructions - MCP tools reference - Configuration options - Comprehensive troubleshooting ### 💡 Examples (`site/examples.html`) - 5 real-world use cases: - Startup MVP Development - Enterprise Security Audit - Performance Crisis Resolution - AI-Powered Feature Development - Legacy System Modernization - Each with detailed prompts, agent coordination, and results ## 📁 Project Structure ``` worksona-mcp-server-local/ ├── site/ # Microsite files │ ├── index.html # Homepage │ ├── agents.html # Agent directory │ ├── documentation.html # Full documentation │ ├── examples.html # Use case examples │ ├── css/ │ │ └── styles.css # Modern, responsive styles │ ├── js/ │ │ ├── main.js # General functionality │ │ └── agents.js # Agent browser logic │ ├── data/ │ │ └── agents.json # Generated agent data │ └── README.md # Site-specific documentation │ ├── generate-site-data.js # Agent data generator ├── build-site.sh # Build script │ ├── .github/workflows/ │ └── deploy-site.yml # GitHub Pages deployment ├── netlify.toml # Netlify configuration └── vercel.json # Vercel configuration ``` ## 🚀 Quick Start ### Local Development ```bash # Generate agent data npm run site:generate # Build and validate site npm run site:build # Serve locally npm run site:serve # Opens at http://localhost:8080 ``` ### Building for Production ```bash # Create production build npm run site:build:dist # Output: dist-site/ directory ``` ## 🌐 Deployment Options ### 1. GitHub Pages **Automated (Recommended):** - Push to main branch - GitHub Actions automatically deploys - Configured in `.github/workflows/deploy-site.yml` **Manual:** ```bash npm run site:build:dist cd dist-site git init git add -A git commit -m "Deploy site" git push -f git@github.com:YOUR-USERNAME/worksona-mcp-server.git main:gh-pages ``` ### 2. Netlify **Option A: Connect Repository** 1. Connect repo to Netlify 2. Build command: `npm run site:build:dist` 3. Publish directory: `dist-site` 4. Deploy! **Option B: Netlify CLI** ```bash npm run site:build:dist cd dist-site netlify deploy --prod ``` ### 3. Vercel ```bash npm run site:build:dist cd dist-site vercel --prod ``` ### 4. AWS S3 + CloudFront ```bash npm run site:build:dist aws s3 sync dist-site/ s3://your-bucket-name --delete aws cloudfront create-invalidation --distribution-id YOUR-DIST-ID --paths "/*" ``` ## 🎨 Design Features - **Modern UI**: Clean, professional design with gradient accents - **Responsive**: Mobile-first design, works on all devices - **Fast**: Optimized for performance, < 100KB total - **Accessible**: Semantic HTML, ARIA labels, keyboard navigation - **No Dependencies**: Pure HTML/CSS/JS, no frameworks - **SEO Optimized**: Meta tags, structured data, semantic markup ## 📊 Technical Details ### Agent Data Generation The `generate-site-data.js` script: 1. Scans the `agents/` directory 2. Reads all `metadata.json` files 3. Extracts agent information 4. Generates `site/data/agents.json` 5. Includes 86 agents across 18 categories ### Interactive Features - **Search**: Real-time agent search by name, description, capabilities - **Filtering**: Category-based filtering with URL parameters - **Modals**: Detailed agent views with usage instructions - **Animations**: Smooth transitions and scroll animations - **Mobile Menu**: Responsive navigation ### Performance - **Static Site**: No server-side processing - **Lightweight**: ~80KB HTML/CSS/JS combined - **Fast Loading**: < 1 second on 3G - **Cached Assets**: Long cache headers for CSS/JS - **CDN Ready**: Works perfectly with CDNs ## 🔄 Maintenance ### Updating Agent Data When agents are added/modified: ```bash npm run site:generate ``` Regenerates `site/data/agents.json` with latest data. ### Updating Content - **Homepage**: Edit `site/index.html` - **Documentation**: Edit `site/documentation.html` - **Examples**: Edit `site/examples.html` - **Styles**: Edit `site/css/styles.css` - **JavaScript**: Edit `site/js/main.js` or `site/js/agents.js` ## 🎯 Features Implemented ✅ Modern, responsive homepage ✅ Interactive agent directory with search/filter ✅ Comprehensive documentation ✅ Real-world example use cases ✅ Agent data generator ✅ Build script ✅ GitHub Pages deployment ✅ Netlify configuration ✅ Vercel configuration ✅ Mobile-friendly design ✅ Accessible (WCAG 2.1) ✅ SEO optimized ✅ Fast loading (< 1s) ## 📝 Next Steps (Optional Enhancements) - [ ] Add dark mode toggle - [ ] Add agent comparison feature - [ ] Add workflow visualization - [ ] Add search analytics - [ ] Add newsletter signup - [ ] Add blog/changelog section - [ ] Add video tutorials - [ ] Add interactive playground - [ ] Add agent performance metrics - [ ] Add community showcase ## 🤝 Contributing To contribute to the microsite: 1. Make changes in the `site/` directory 2. Run `npm run site:build` to validate 3. Test locally with `npm run site:serve` 4. Submit a pull request ## 📞 Support - **Issues**: [GitHub Issues](https://github.com/worksona/worksona-mcp-server/issues) - **Discussions**: [GitHub Discussions](https://github.com/worksona/worksona-mcp-server/discussions) - **Email**: support@worksona.com (if applicable) ## 📄 License MIT License - Same as the main project --- **Built with ❤️ for the Worksona community**