Learning Hour MCP

# Enhanced Miro Integration for Learning Hour MCP ## Overview The Learning Hour MCP now features a sophisticated Miro board generation system that creates beautiful, well-designed boards that Technical Coaches can use directly without needing to reorganize or redesign them. ## Key Features ### 1. Visual 4C Learning Model Flow - Each phase (Connect, Concept, Concrete, Conclusion) has its own distinct visual zone - Color-coded sections using psychology-based color choices: - **Connect (Warm Peach #FFE5B4)**: Creates energy and openness - **Concept (Soft Blue #B4D4FF)**: Promotes focus and learning - **Concrete (Soft Green #B4FFB4)**: Encourages growth and practice - **Conclusion (Soft Pink #FFB4D4)**: Inspires commitment and action ### 2. Professional Board Layout - **Header Frame**: Large, prominent title with session overview - **Navigation Sidebar**: Quick links to jump between 4C phases - **Generous White Space**: Clear visual boundaries between sections - **Consistent Alignment**: Professional grid-based layout ### 3. Interactive Elements - **Participant Workspaces**: Pre-defined areas for pair programming - **Sticky Note Clusters**: Empty templates ready for participant input - **Timer Widgets**: Visual time management for each activity - **Voting Mechanisms**: Dot voting for engagement - **Questions Parking Lot**: Dedicated area for capturing questions ### 4. Facilitator Support - **Facilitator Dashboard**: Checklist and controls in workshop style - **Pre-populated Instructions**: Clear guidance at each step - **Common Challenges Section**: Anticipate and address issues - **Time Management Tools**: Built-in timers with intervals ### 5. Code-Focused Features - **Code Demo Areas**: Dark-themed frames for before/after code - **Syntax Highlighting**: Code blocks with proper formatting - **Refactoring Steps**: Visual progression through code changes - **Test-First Approach**: Dedicated areas for test code ## Style Adaptations ### Slide Style (Default) - Optimized for screen sharing - Sequential frame navigation - Larger text for readability - Presenter notes included ### Vertical Style - Continuous scrolling layout - All content visible in one flow - Mini-maps for orientation - Section dividers for clarity ### Workshop Style - Maximum collaborative space - Multiple breakout areas - Extended practice zones - Facilitator control panel ## Technical Implementation ### Enhanced Miro Builder The `EnhancedMiroBuilder` class provides: - Sophisticated layout algorithms - Color management system - Interactive element placement - Frame and shape creation - Proper spacing and alignment ### Integration with Miro MCP Uses the `@k-jarzyna/mcp-miro` package to access: - `create_board`: Initialize new boards - `create_sticky_note`: Add interactive notes - `create_shape`: Build frames and containers - `create_text`: Add instructions and labels - `get_board`: Retrieve board links ## Usage Example ```typescript // Generate a Learning Hour session const session = await generator.generateSessionContent("Feature Envy", "workshop"); // Create an enhanced Miro board const boardId = await enhancedMiroBuilder.createEnhancedBoard(session); ``` ## Board Sections Detail ### 1. Connect Section - Pair discussion prompts - Experience sharing workspace - Pattern identification area - 8-minute timer widget ### 2. Concept Section - Live coding demo frame - Before/after code comparison - Key concepts mind map - Questions parking lot ### 3. Concrete Section - Step-by-step exercise instructions - Multiple pair workspaces (6 pairs) - Code exercise frames - 25-minute timer with intervals - Facilitator checklist ### 4. Conclusion Section - Reflection prompt cards - Commitment wall (24 sticky notes) - Voting widget for resonance - Action planning area ### 5. Resources Section - Key takeaways display - Next steps checklist - Follow-up actions - Reference materials ## Best Practices 1. **Always test with real content**: The layout adjusts based on actual session content 2. **Consider team size**: Default supports 6 pairs, adjust as needed 3. **Use appropriate style**: Choose based on delivery method 4. **Leverage timers**: Built-in time management helps facilitation 5. **Encourage interaction**: Empty sticky notes invite participation ## Future Enhancements - Custom color themes per organization - Template library for common topics - Integration with code repositories - Real-time collaboration features - Analytics and engagement tracking ## Troubleshooting ### Common Issues 1. **Board creation fails**: Check MIRO_ACCESS_TOKEN environment variable 2. **Layout issues**: Ensure session content follows expected format 3. **Missing elements**: Verify Miro MCP connection is active ### Support For issues or feature requests, please open an issue on the GitHub repository.