MLB AI Predictions Generator
Build MLB game prediction applications with automated ML workflows, real-time data integration, and interactive playoff brackets.
What This Skill Does
This skill guides you through building and maintaining MLB prediction applications using Nuxt 3, Supabase, and external ML models. It handles:
Automated daily MLB data collection and ML model orchestrationReal-time prediction displays with confidence grades and analysisInteractive playoff bracket builders with deadline enforcementWeather data integration and stadium-specific analysisTeam and pitcher statistics aggregationAuthentication and admin access controlTechnology Stack
**Frontend:** Nuxt 3, Vue 3, TypeScript, Nuxt UI 3, Tailwind CSS v4**Backend:** Nuxt server API, Nuxt Cron for scheduling**Database:** Supabase (PostgreSQL with real-time subscriptions)**Data:** Luxon (backend), Moment.js (frontend display)**ML Integration:** External models via n8n.cloud webhooksStep-by-Step Instructions
1. Project Setup
When setting up the project:
1. Install dependencies: `npm install`
2. Configure environment variables:
- `SUPABASE_URL` - Supabase project URL
- `SUPABASE_KEY` - Supabase anon key
- `OPENWEATHER_API_KEY` - Weather data API key
- `NUXT_PUBLIC_SITE_URL` - Public site URL
3. Generate types: `npm run postinstall` (auto-runs after install)
4. Start dev server: `npm run dev` (http://localhost:3000)
2. Database Schema
Ensure these core tables exist in Supabase:
`gamePredictions` - AI predictions with scores, confidence, HTML analysis`games` - Core game information`todaysGames` - Daily matchups with starting pitchers`teamStats` - Per-game team statistics`pitcherStats` - Starting pitcher performance data`recentTeamPerformance` - Aggregated recent statistics`environment` - Weather and stadium conditions`playoff_brackets` - User postseason predictionsUse `database.types.ts` for type-safe database operations.
3. ML Workflow Orchestration
The automated daily workflow runs at 10:35 AM EST:
1. **Cron trigger:** `server/cron/mlb-model.ts` initiates the workflow
2. **API orchestrator:** `server/api/runMLBmodel.ts` coordinates:
- `getMLBDailyMatchUps.ts` - Fetch today's games
- `getMLBStats.ts` - Gather team statistics
- `getMLBRecentPerformance.ts` - Recent performance data
- `fetchAndStoreWeather.ts` - Weather conditions
3. **External ML model:** Triggered via n8n.cloud webhook
4. **Results storage:** Save predictions to Supabase with real-time updates
When building ML endpoints:
Use `serverSupabaseServiceRole` for server operations (bypasses RLS)Return structured data matching the prediction schemaInclude confidence grades (A+, A, B, C, D, F)Format analysis as HTML for rich display4. Data Processing Rules
**Weather Data:**
Convert wind direction to stadium-oriented descriptions: "Out to CF", "In from LF", "To 1B Line"Detect indoor stadiums automatically (look for "dome" in venue name)**MLB Stats:**
Convert innings pitched: "6.1" → 6.33 (6 innings + 1 out = 6⅓)Aggregate team stats for last 14 gamesAggregate pitcher stats for last 5 startsCalculate bullpen performance separately (IP, ERA, WHIP, SO9)**Predictions:**
Store AI confidence as letter gradesInclude HTML-formatted analysis summariesIntegrate Vegas odds for comparisonEvaluate predictions daily against actual results5. Authentication & Access Control
Use Supabase Auth with email/password and Google OAuthHardcode admin access: `[email protected]`Server operations: `serverSupabaseServiceRole` (bypasses RLS)Client operations: `useSupabaseClient()` (enforces RLS)Enable real-time subscriptions for live updates6. Key Pages & Features
**Main Routes:**
`/mlb` - Interactive predictions table with sortable columns, date picker, analysis modals`/mlb/postseason/[userId]` - Playoff bracket builder with countdown timer`/dashboard/mlb` - User dashboard with top games and historical accuracy`/admin/dashboard` - Manual ML workflow triggering (admin only)`/game/[gameId]` - Individual game details**Component Patterns:**
Use Nuxt UI 3 components: UTable, UButton, UModal, UCalendar, UAvatarFollow file-based routing conventionsUse Composition API with `<script setup>`Leverage Nuxt composables: `useSupabaseClient`, `useAsyncData`No state management library needed7. API Endpoints Structure
Create these server API routes:
`/api/runMLBModel` - Orchestrates entire ML workflow`/api/getMLBDailyMatchUps` - Fetches today's games and weather`/api/getMLBStats` - Fetches yesterday's game results`/api/getMLBRecentPerformance` - Aggregates recent team/pitcher stats`/api/evaluatePredictions` - Updates predictions with actual outcomes8. Real-Time Features
Implement Supabase real-time subscriptions for:
Live prediction updates as ML models completeBracket updates from other usersScore updates during gamesUse `.on('postgres_changes', ...)` pattern with cleanup on component unmount.
9. Playoff Bracket System
For playoff brackets:
Store user predictions in `playoff_brackets` tableImplement countdown timer (locks Sept 30, 2025 1:08 PM EST)Allow editing until deadlineDisplay other users' brackets after lockTrack accuracy scores as playoffs progress10. Styling Guidelines
Use Tailwind v4 with custom themePrimary: blue-ribbonSecondary: scooterNeutral: lynchReference Nuxt UI 3 docs: https://ui.nuxt.com/componentsMaintain responsive design patternsImportant Constraints
Always use `serverSupabaseServiceRole` for server-side database operations to bypass RLSNever expose service role credentials to client-side codeRespect the playoff bracket deadline enforcementHandle indoor stadiums separately for weather dataConvert innings pitched correctly using the ⅓ inning formulaUse Luxon for server-side dates, Moment.js for client displayGenerate types after schema changes: `npm run postinstall`Example Usage
**Scenario 1: Adding a new prediction feature**
1. Update `gamePredictions` schema in Supabase
2. Run `npm run postinstall` to regenerate types
3. Create API endpoint in `server/api/` using `serverSupabaseServiceRole`
4. Build UI component using Nuxt UI 3 components
5. Add real-time subscription for live updates
**Scenario 2: Integrating new ML model**
1. Add data collection endpoint in `server/api/`
2. Update `runMLBmodel.ts` orchestrator
3. Configure webhook to external model
4. Store results in appropriate Supabase table
5. Update frontend to display new predictions
**Scenario 3: Building admin dashboard**
1. Check user email against hardcoded admin list
2. Create admin-only API routes
3. Use `serverSupabaseServiceRole` for privileged operations
4. Build UI with manual workflow triggers
5. Display system health and prediction accuracy
Development Workflow
1. Make schema changes in Supabase dashboard
2. Run `npm run postinstall` to sync types
3. Develop features locally with `npm run dev`
4. Test ML workflow orchestration
5. Build for production: `npm run build`
6. Preview: `npm run preview`