Mila

Mila is a blog dedicated to my daughter to capture her life memories month to month.

Features

• Next.js App Router + React 19
• Supabase Auth & Database (Postgres, RLS)
• Role‑based protected routes: (protected) and (public) segments
• Responsive UI with Bootstrap 5 + SCSS
• AI chatbot streaming from OpenAI (ChatKit embed built but currently parked)
• TTS for blog posts via /api/blog/[slug]/audio
• Vercel Analytics, ready for CI/CD

Requirements

• Node.js 22.x (matches package.json engines, .nvmrc, .node-version)
• npm / pnpm / yarn
• Supabase project and keys
• OpenAI API key

Quick Start

git clone https://github.com/stozo04/mila-nextjs.git
cd mila-nextjs
npm install                # or pnpm/yarn
cp .env.example .env.local # fill in values
npm run dev

Open http://localhost:3000

Environment Variables

--- Supabase ---

NEXT_PUBLIC_SUPABASE_URL="" # Supabase project URL (from dashboard > Settings > API) NEXT_PUBLIC_SUPABASE_ANON_KEY="" # Supabase anon/public key (used in client/browser) SUPABASE_SERVICE_ROLE_KEY="" # Supabase service role key (server-side only, keep secret!)

--- OpenAI ---

OPENAI_API_KEY="" # Your OpenAI secret key OPENAI_VECTOR_STORE_ID="" # Optional: OpenAI Vector Store ID for File Search OPENAI_MODEL="" # Optional: override the default model (e.g., gpt-4.1, gpt-4o-mini) OPENAI_CHATKIT_WORKFLOW_ID="" # Workflow ID from OpenAI Agent Builder for ChatKit

--- Site URLs ---

SITE_URL="" # Used for backend or deployment config (sometimes Netlify/Vercel) NEXT_PUBLIC_SITE_URL="" # Base URL for auth callbacks (e.g., https://yourapp.com)

--- Auth / Access Control ---

NEXT_PUBLIC_ALLOWED_EMAIL="" # Legacy setting; not an enforced allowlist NEXT_PUBLIC_ADMIN_EMAIL="" # Email for admin account (grants elevated privileges)

Chatbot Architecture

• Live widget: src/components/Shared/Chatbot/OpenAIChatBot.tsx
  • Mounted in src/app/layout.tsx and pinned bottom-right — this is what users see
  • Streams from /api/chat-stream over SSE
• ChatKit embed (built, currently parked): src/components/Shared/Chatbot/ChatKitWidget.tsx
  • Commented out in src/app/layout.tsx along with its import; nothing renders it
  • Would exchange a client secret via /api/chatkit/session
• ChatKit session API: src/app/api/chatkit/session/route.ts
  • Exchanges the workflow (OPENAI_CHATKIT_WORKFLOW_ID) for a ChatKit client secret
  • Guards on missing env vars and surfaces OpenAI API errors
• Streaming API: src/app/api/chat-stream/route.ts
  • Node.js runtime, uses OpenAI Responses API streaming
  • File Search tool is included if OPENAI_VECTOR_STORE_ID is set
  • Emits SSE: token chunks (default), event: done with { conversationId, sources }, and event: error

Project Structure

src/
  app/                 # App Router
    api/               # Route handlers
      blog/[slug]/audio/route.ts
      chat-stream/route.ts
  components/          # Reusable React components
  lib/                 # Client & server helpers
  styles/              # SCSS & global CSS
docs/                  # Long‑form docs, assets

Scripts

• npm run dev: Start dev server
• npm run build: Production build
• npm run start: Start built app
• npm run lint: Shared agent synchronization check, then ESLint

Troubleshooting

• 400 Missing tools[0].vector_store_ids: Ensure OPENAI_VECTOR_STORE_ID is set and the ID exists in your OpenAI project.
• Vector store not found: Verify the ID and that your OpenAI API key has access to that project.
• Streaming works but no citations: Confirm your vector store has files and that File Search is enabled (env var set).

License

MIT

Built by Steven Gates.