← back to Dear Bubbe Nextjs

SETUP-COMPLETE.md

187 lines

# Dear Bubbe - Setup Complete! 🎉

This is the **MAIN APPLICATION** for bubbe.ai

## What's Working

### ✅ Live Website
- **URL**: https://www.bubbe.ai
- **Status**: Online and working
- **Backend**: Express.js on port 7800
- **Frontend**: Next.js on port 3011

### ✅ Features Implemented

1. **AI Chat with Bubbe**
   - Claude AI integration with Bubbe's personality
   - Multiple modes: Bubbe, Meshugana, Comedian
   - Image upload support
   - Session tracking with guilt-trip greetings

2. **Voice Integration**
   - ElevenLabs text-to-speech
   - Toggle voice on/off with 🔇/🔊 button
   - Uses "Sarah" voice for grandmother personality
   - Model: `eleven_turbo_v2_5` (free tier)

3. **Smart Greeting System**
   - Tracks time since last visit
   - Guilt trips based on how long you've been away
   - Examples:
     - "It's been 16 minutes since your last visit"
     - "It's been 7 days since you last visited!"

4. **Nudge System**
   - Reminds you to respond after 2 minutes
   - Up to 3 nudges, then gets "really annoyed"
   - Resets when you send a message

5. **Conversation Logging**
   - Logs all Q&A for social media use
   - Formatted console output

6. **Cloudflare Cache Purge** (NEW!)
   - Automated cache clearing with Puppeteer
   - No API token needed!
   - Browser automation handles everything

## Quick Commands

### Start/Restart Service
```bash
cd /root/Projects/dear-bubbe-nextjs
npm run build
pm2 restart bubbe-nextjs
```

### Purge Cloudflare Cache
```bash
cd /root/Projects/dear-bubbe-nextjs
npm run purge-cache
```

Or directly:
```bash
./purge-cache.sh
```

### View Logs
```bash
pm2 logs bubbe-nextjs
pm2 logs dear-bubbe  # Backend server
```

### Check Status
```bash
pm2 status
curl -I https://www.bubbe.ai
```

## Environment Configuration

All credentials are in `.env.local`:

- ✅ NextAuth configuration
- ✅ Google OAuth credentials
- ✅ ElevenLabs API key
- ✅ Cloudflare credentials (for Puppeteer)

## Cache Purging

The Puppeteer script (`purge-cache-puppeteer.js`) automatically:
1. Logs into Cloudflare dashboard
2. Navigates to bubbe.ai caching page
3. Clicks "Purge Everything" button
4. Confirms the purge
5. Takes screenshots for debugging

**No manual API token setup needed!** Everything is in `.env.local`.

## File Structure

```
/root/Projects/dear-bubbe-nextjs/     ⭐ MAIN APPLICATION
├── app/
│   ├── page.tsx                    # Main chat UI
│   ├── api/
│   │   ├── bubbe-voice/route.ts   # ElevenLabs TTS
│   │   ├── chat/route.ts          # Chat proxy
│   │   └── news/route.ts          # News API
├── purge-cache.sh                 # Main purge script
├── purge-cache-puppeteer.js       # Puppeteer automation
├── .env.local                     # All credentials
├── package.json                   # Dependencies & scripts
├── README.md                      # Project documentation
├── CLOUDFLARE-SETUP.md           # Cloudflare setup guide
└── SETUP-COMPLETE.md             # This file!

/root/Projects/B_Version_1/          📦 Version 1 (archived)
└── server.js                      # Express backend (port 7800)
```

## How It All Works

1. **User visits** https://www.bubbe.ai
2. **Nginx** proxies request to Next.js (port 3011)
3. **Next.js frontend** loads the chat UI
4. **User sends message** → POST to `/api/chat`
5. **Next.js** proxies to Express backend (port 7800)
6. **Express** calls Claude AI with Bubbe's personality
7. **Response** comes back through the chain
8. **Voice enabled?** → Call `/api/bubbe-voice` → ElevenLabs
9. **Audio plays** in browser

## Maintenance

### Deploy Updates
```bash
cd /root/Projects/dear-bubbe-nextjs
npm run build
pm2 restart bubbe-nextjs
npm run purge-cache  # Clear Cloudflare cache
```

### Update Backend
```bash
cd /root/Projects/dear-bubbe
pm2 restart dear-bubbe
```

### Monitor Health
```bash
pm2 monit  # Real-time monitoring
pm2 logs --lines 100  # View recent logs
```

## Skills Available

Use these Claude Code skills:

- `purge-cache` - Purge Cloudflare cache and restart
- `webapp-testing` - Test the website with Playwright

## Notes

- **Main app**: /root/Projects/dear-bubbe-nextjs
- **Backend**: /root/Projects/dear-bubbe (Express server)
- **PM2 apps**: bubbe-nextjs (frontend), dear-bubbe (backend)
- **Domain**: bubbe.ai (Cloudflare proxy)
- **SSL**: Let's Encrypt via Cloudflare

## What's Next?

The app is fully functional! You can:

1. Visit https://www.bubbe.ai and chat with Bubbe
2. Toggle voice on/off
3. Upload images
4. Switch between personality modes
5. Watch the nudge system in action

When you make updates:
```bash
npm run build && pm2 restart bubbe-nextjs && npm run purge-cache
```

That's it! Everything is working and ready to use. 🎉