> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/darkzOGx/youtube-automation-agent/llms.txt > Use this file to discover all available pages before exploring further. # Dashboard Guide > Complete guide to using the web dashboard for monitoring and controlling your YouTube automation ## Overview The YouTube Automation Agent includes a beautiful web dashboard for real-time monitoring and control. Access it at `http://localhost:3456` while the agent is running. The dashboard auto-refreshes every 30 seconds to show the latest data without manual intervention. ## Accessing the Dashboard ### Starting the Dashboard The dashboard automatically starts when you launch the agent: ```bash theme={null} npm start ``` You'll see: ``` ✅ YouTube Automation Agent running on port 3456 ────────────────────────────────────────────────── 📊 Dashboard: http://localhost:3456 🔧 API Health: http://localhost:3456/health 📅 Schedule: http://localhost:3456/schedule 📈 Analytics: http://localhost:3456/analytics ────────────────────────────────────────────────── 🤖 Automation is active. Content will be generated and posted daily. ``` ### Opening the Dashboard Navigate to `http://localhost:3456` in any modern web browser. The dashboard will automatically fetch and display: * System health status * Upcoming schedule * Performance analytics * Agent status * Recent activity Data refreshes automatically every 30 seconds. Look for the Last Updated timestamp. ### Remote Access To access the dashboard from other devices on your network: ```bash theme={null} # Find your local IP address ifconfig | grep "inet " | grep -v 127.0.0.1 # Access dashboard from other devices http://YOUR_LOCAL_IP:3456 ``` For remote access over the internet, use a reverse proxy like nginx or deploy behind a VPN for security. ## Dashboard Layout ### Header Section The dashboard header displays: * **Project Name**: Ethereal Dreamscript * **Subtitle**: YouTube Automation Dashboard * **Gradient Background**: Purple/blue gradient for visual appeal ### Status Bar Four real-time status cards at the top: #### System Status Card * **🟢 Green**: System healthy, all agents running * **🔴 Red**: System error or agents not initialized * Updates based on `/health` endpoint response #### Content Generated Card * Shows total number of videos created * Increments with each successful generation * Data from `/analytics` endpoint #### Videos Published Card * Total count of successfully published videos * Updates when videos go live on YouTube * Synced with YouTube channel data #### Next Generation Card * Displays next scheduled content generation time * Default: "6:00 AM" for daily automation * Shows "Tomorrow" if next generation is next day * Updates from `/schedule` endpoint ### Action Buttons Three primary action buttons: Triggers immediate content generation, bypassing the schedule. Opens analytics data in JSON format in new tab. Opens upcoming schedule in JSON format in new tab. ## Dashboard Cards ### 1. System Overview Card Shows high-level system health: ``` 📈 System Overview Status: Initialized Agents Active: 7/7 Uptime: 24h 15m Last Updated: 10:45:23 AM ``` **What it shows:** * **Status**: Initialized or Initializing * **Agents Active**: Count of running agents (should be 7/7) * **Uptime**: How long the system has been running * **Last Updated**: Time of last data refresh If Agents Active shows less than 7/7, check the console logs for initialization errors. ### 2. Upcoming Schedule Card Displays next 3 scheduled content items: ``` 📅 Upcoming Schedule ┌─ The Art of Digital Storytelling └─ January 16, 2024 at 2:00 PM ┌─ Understanding Visual Narratives └─ January 17, 2024 at 2:00 PM ┌─ Creative Expression in Modern Media └─ January 18, 2024 at 2:00 PM ``` **Information displayed:** * Content title * Scheduled publish date and time * Sorted by publish time (earliest first) **If schedule is empty:** ``` 📅 Daily Content Generation Scheduled for 6:00 AM daily 📊 Analytics Collection Scheduled for 9:00 AM daily 🔧 Optimization Tasks Scheduled for 10:00 PM daily ``` ### 3. Content Strategy Card Shows current content focus and settings: ``` 🎯 Content Strategy Current Focus: Animated Storytelling Target Audience: Creative individuals interested in storytelling and imagination Content Types: Story-driven content, Explainers, Tutorials Posting Frequency: Daily Optimal Time: 2:00 PM ``` **Strategy elements:** * **Current Focus**: Main content theme * **Target Audience**: Who the content is for * **Content Types**: Formats being produced * **Posting Frequency**: How often content publishes * **Optimal Time**: Best time for maximum engagement The optimal publishing time is automatically adjusted based on analytics data during the weekly strategy review. ### 4. Recent Activity Card Live log of recent automation events: ``` 📊 Recent Activity ✅ System initialized successfully ℹ️ All 7 agents are active ℹ️ Content strategy loaded ℹ️ Automation scheduler started ✅ Ready for content generation ``` **Activity indicators:** * ✅ **Success**: Tasks completed successfully * ℹ️ **Info**: Informational messages * ⚠️ **Warning**: Non-critical issues * ❌ **Error**: Failed operations ### 5. Agent Status Card Shows status of all 7 agents: ``` 🤖 Agent Status ✅ strategy Agent ✅ scriptWriter Agent ✅ thumbnailDesigner Agent ✅ seoOptimizer Agent ✅ production Agent ✅ publishing Agent ✅ analytics Agent ``` **Agent descriptions:** | Agent | Purpose | | --------------------- | ------------------------------------------ | | **strategy** | Analyzes trends and selects content topics | | **scriptWriter** | Generates video scripts and narratives | | **thumbnailDesigner** | Creates eye-catching thumbnail images | | **seoOptimizer** | Optimizes titles, descriptions, and tags | | **production** | Compiles and validates content assets | | **publishing** | Schedules and uploads videos to YouTube | | **analytics** | Tracks performance and generates insights | ### 6. Performance Metrics Card Shows aggregated performance data: ``` 📈 Performance Metrics Average Performance: 78.5 Total Content: 15 videos System Health: Excellent ``` **When starting fresh:** ``` 📈 Performance Metrics Status: System just started First Content: Will generate within 24 hours Automation: Active and ready ``` **Metrics explained:** * **Average Performance**: Composite score 0-100 based on engagement, retention, CTR * **Total Content**: Number of videos generated by the system * **System Health**: Overall system status (Excellent, Good, Needs Attention) ## Interactive Features ### Generate Content Button Manually trigger content generation: Click the **🎬 Generate Content Now** button in the status bar. Confirm the prompt: "Generate content now? This will create a new video for your channel." A loading alert appears. The system processes through all 6 agents (typically 2-5 minutes). Success alert shows: "Content generation started! Title: \[Video Title]" Dashboard automatically updates to show new content in the schedule. **What happens behind the scenes:** ```javascript theme={null} POST /generate { topic: null, style: 'story', length: 'medium' } ``` ### View Analytics Button Inspect raw analytics data: Click **📊 View Analytics** in the status bar. Analytics endpoint opens in new browser tab. See formatted JSON with: * `totalVideos`: Count of analyzed videos * `averagePerformanceScore`: Mean score across all videos * `topPerformers`: Array of top 3 videos * `recentAnalytics`: Detailed metrics for each video **Example analytics response:** ```json theme={null} { "totalVideos": 15, "averagePerformanceScore": 78.5, "topPerformers": [ { "videoId": "dQw4w9WgXcQ", "title": "The Art of Digital Storytelling", "performanceScore": 92, "videoDetails": { "statistics": { "viewCount": "12500", "likeCount": "850", "commentCount": "143" } } } ] } ``` ### View Schedule Button Inspect upcoming content: Click **📅 View Schedule** in the status bar. Schedule endpoint opens in new browser tab. See array of scheduled content with: * `id`: Unique content identifier * `title`: Video title * `publishTime`: ISO 8601 timestamp * `status`: Current status (scheduled/published) ### Refresh Button Manually refresh dashboard data: * **Location**: Bottom-right corner (floating button) * **Icon**: 🔄 circular arrow * **Action**: Immediately refetches all data from API endpoints * **Use Case**: Get latest data without waiting for 30-second auto-refresh ## Auto-Refresh Behavior The dashboard implements smart auto-refresh: ```javascript theme={null} // Refresh every 30 seconds setInterval(refreshDashboard, 30000); async function refreshDashboard() { // Fetch health data const health = await fetch('/health').then(r => r.json()); // Fetch schedule const schedule = await fetch('/schedule').then(r => r.json()); // Fetch analytics (optional, may fail if no data yet) try { const analytics = await fetch('/analytics').then(r => r.json()); } catch (error) { console.log('Analytics not available yet'); } // Update UI updateAllCards(health, schedule, analytics); } ``` **What gets refreshed:** * System status indicator (green/red) * Agent status (7/7 active check) * Uptime counter * Upcoming schedule items * Content and published counts * Performance metrics * Recent activity log ## Status Indicators ### Color Coding The dashboard uses consistent color coding: | Color | Meaning | Example | | --------- | --------------- | ---------------------------- | | 🟢 Green | Healthy, Active | System status indicator | | 🔴 Red | Error, Inactive | System down or agent failed | | 🟡 Yellow | Warning | Low performance score | | 🔵 Blue | Info | General information messages | ### Performance Scoring **Score Interpretation:** * **90-100**: Exceptional performance * **80-89**: Excellent performance * **70-79**: Good performance * **60-69**: Average performance * **50-59**: Below average, needs improvement * **0-49**: Poor performance, requires attention ## Customizing the Dashboard ### Changing Port Run on a different port: ```bash theme={null} PORT=8080 npm start ``` Dashboard now accessible at: `http://localhost:8080` ### Branding Customization Edit `/source/dashboard/index.html` to customize: ```html Title theme={null} Your Brand - YouTube Automation Dashboard ``` ```html Header theme={null}

🎬 Your Channel Name

YouTube Automation Dashboard

``` ```css Colors theme={null} body { background: linear-gradient(135deg, #YOUR_COLOR1 0%, #YOUR_COLOR2 100%); } ``` ### Adding Custom Metrics Extend the dashboard with custom data: ```javascript theme={null} // In index.html, add new fetch async function loadCustomMetrics() { const response = await fetch('/api/custom-metrics'); const data = await response.json(); // Update custom card document.getElementById('custom-metrics').innerHTML = `

Custom Metric: ${data.value}

`; } ``` ## Troubleshooting ### Dashboard Won't Load **Symptoms:** * Browser shows "Cannot connect" * Page loads but shows errors **Solutions:** Check terminal for "YouTube Automation Agent running on port 3456" ```bash theme={null} lsof -i :3456 ``` If port is in use by another process, change port with `PORT=3457 npm start` Ensure port 3456 is allowed through firewall: ```bash theme={null} sudo ufw allow 3456 ``` Test with another browser to rule out browser-specific issues. ### Data Not Updating **Symptoms:** * Dashboard loads but shows stale data * "Loading..." messages persist **Solutions:** 1. **Force Refresh**: Click the 🔄 button in bottom-right 2. **Check API Health**: ```bash theme={null} curl http://localhost:3456/health ``` 3. **Review Browser Console**: Open DevTools (F12) and check for JavaScript errors 4. **Restart Agent**: Stop and restart the agent with `npm start` ### System Status Shows Red **Symptoms:** * Status card shows 🔴 instead of 🟢 **Causes:** * Agent not fully initialized * Database connection failed * Missing credentials **Solutions:** ```bash theme={null} # Check health endpoint directly curl http://localhost:3456/health # Expected: {"status": "healthy", "initialized": true} # If false, check console logs for errors # Verify credentials npm run credentials:validate # Reinitialize database if needed npm run db:init ``` ### Agents Show Less Than 7/7 **Symptoms:** * Agent Status card shows "5/7" or similar **Cause:** * Some agents failed to initialize **Solution:** 1. Check console logs for specific agent errors 2. Verify all API credentials are configured 3. Ensure sufficient API quotas 4. Restart with `npm start` ## Mobile Access ### Responsive Design The dashboard is fully responsive: * **Desktop**: Full 6-card grid layout * **Tablet**: 2-column responsive grid * **Mobile**: Single-column stacked layout ### Mobile Optimization Tips On mobile, use landscape orientation for best viewing experience. * Buttons are touch-friendly (44px minimum hit area) * Text is readable without zooming (16px base font) * Cards stack vertically for easy scrolling * Auto-refresh works seamlessly on mobile ## Best Practices ### Daily Monitoring * [ ] Check system status is 🟢 green * [ ] Verify all 7 agents are active * [ ] Review upcoming schedule has 2-3 items * [ ] Check performance metrics are improving * [ ] Scan recent activity for errors ### Weekly Review * [ ] Analyze performance score trends * [ ] Review top performing content * [ ] Adjust content strategy if needed * [ ] Verify automation schedule is working * [ ] Check database backup was created ### When to Take Action **Immediate Action Required:** * 🔴 Red system status * Less than 5/7 agents active * No scheduled content * Multiple errors in recent activity **Monitor Closely:** * Performance score below 60 * Declining view counts * Failed automation events * System health below 80 ## Advanced Features ### Browser Integration Bookmark these URLs for quick access: * **Main Dashboard**: `http://localhost:3456` * **Health Check**: `http://localhost:3456/health` * **Analytics JSON**: `http://localhost:3456/analytics` * **Schedule JSON**: `http://localhost:3456/schedule` ### Embedding in Tools Embed dashboard in other tools: ```html theme={null} ``` ### API Integration Build custom dashboards using the same APIs: ```javascript theme={null} // Custom monitoring script const monitorDashboard = async () => { const health = await fetch('http://localhost:3456/health').then(r => r.json()); if (health.status !== 'healthy') { sendAlert('YouTube Automation: System Unhealthy!'); } }; setInterval(monitorDashboard, 60000); // Check every minute ``` ## Next Steps Explore all API endpoints used by the dashboard Learn manual control and API usage Understand the automation schedule Solve common dashboard issues