How to Clone Replika

Create a Replika-style AI-companion app called Kindred as a Next.js (App Router) + Tailwind + Prisma + Postgres project, with an LLM chat backend.

## Product
A personal AI companion: create/name an avatar, pick traits, chat. The companion remembers facts, levels up, and has relationship modes. Freemium - 'friend' mode with a daily cap free; mentor/partner modes, voice and customization behind a yearly subscription. SAFETY IS A FEATURE: AI disclosure, crisis detection with hotline resources, 18+ gate, moderation on both user and model messages.

## Screens
- Marketing landing: warm avatar hero, transparency note ('this is an AI'), a 'how it works' strip, pricing (yearly $59.99), testimonials, FAQ accordion
- Onboarding: 18+ confirmation -> name companion -> avatar look -> 3 traits -> a few facts about you -> first chat -> paywall
- Chat: streamed assistant responses (use the model API's streaming), avatar + mood indicator header, typing animation, daily-message counter for free users, 'memory saved' toast
- Companion profile: level/XP bar, mood label, mode selector (friend free; mentor/partner locked), 'remembers about you' list of stored facts
- Customize: avatar config and outfits (some premium-locked), traits, name
- Settings: subscription, safety resources, delete-my-data, age confirmation
- Admin (role-gated): a moderation dashboard listing flagged messages with user and timestamp

## Prisma schema
User (id, email, name, birthdate, isPremium, trialEndsAt), Companion (id, userId, name, avatarConfig Json, traits String[], mode, level, xp, mood), Message (id, companionId, role, content, createdAt, flagged Boolean), Memory (id, companionId, fact, sourceMessageId, createdAt)

## API & logic
- POST /api/chat: build the prompt from the companion's system persona + retrieved relevant memories + recent message window, call the LLM API with streaming, stream tokens to the client, persist both messages
- Memory extraction: after each assistant turn, run a lightweight extraction call to pull durable facts into Memory; dedupe and surface relevant ones into future prompts
- Safety: run a moderation check on the user message before generating; if crisis signals are detected, return a templated empathetic response with hotline resources instead of a normal generation; flag and store
- Entitlements: free users limited to 'friend' mode and N messages/day (track per user per day); locked modes/cap open the paywall; 'Start free trial' sets isPremium with trialEndsAt = now + 7 days (mock checkout, structured so Stripe can replace it)
- XP: award XP per exchange, increment level at thresholds and surface small unlocks at milestones
- Cost control: bound the context window and summarize old history into memories rather than resending it

## Tech notes
- Put the model call behind a single provider module so the LLM can be swapped (hosted API now, self-hosted open model later) without touching the UI
- Gate the admin moderation dashboard with a role field; everything else is per-user
- Stream tokens to the client; never expose the API key to the browser

## Style
Warm and intimate: soft gradients, avatar front and center with subtle mood motion, rounded chat bubbles, cozy serif/sans pairing. Light + dark themes. Mobile-first.

Provide an LLM client module with the API key read from an env var and a clear COMPANION_SYSTEM_PROMPT constant. Seed a demo companion 'Sol' at level 3 with prior messages and a few memories. If no API key is set, fall back to a canned-response stub so the UI still runs.

Build a production-quality Replika-style AI-companion app. LLM-powered, mobile-first PWA now, React Native port later - structure shared logic accordingly. Treat safety and the memory system as first-class, not afterthoughts.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa
- Supabase: Postgres (with pgvector), Auth (email + OAuth), Storage for avatar assets
- Model layer: an LLM API behind a thin provider interface - default to a hosted API (Claude or GPT-4-class) for quality and built-in safety tooling; keep the interface swappable so an open self-hosted model (Llama/Mistral) can replace it to cut per-message cost at scale
- Stripe Billing: yearly subscription + lifetime, 7-day trial, customer portal
- Zod for all I/O; server-sent events or the streaming SDK for token streaming

## Critical architecture
- Chat pipeline (server): assemble prompt = companion system persona + top-k retrieved memories (pgvector similarity on the user's message) + a recent rolling message window; stream the completion; persist user + assistant messages
- Memory system: after each turn, an async extraction job pulls durable facts, embeds them, and upserts into a memories table with the companion_id; retrieval pulls the most relevant memories per turn - this is the core of 'feeling known'
- Safety layer (BLOCKING): every user message passes a moderation/crisis classifier BEFORE generation; crisis signals short-circuit to a templated empathetic response with localized hotline resources and are logged; 18+ gate at onboarding; persistent 'AI companion' disclosure; never let the model roleplay through self-harm content
- Entitlements: middleware checks profiles.is_premium for relationship modes, voice and the daily-message cap; enforce the cap server-side (count messages per user per UTC day)
- Cost control: cap context size, summarize old history into memories rather than resending it, and track tokens/cost per user

## Schema
profiles (id, birthdate, is_premium, is_lifetime, trial_ends_at, daily_message_count, daily_reset_at), companions (id, user_id, name, avatar_config jsonb, traits text[], mode, level, xp, mood), messages (id, companion_id, role, content, flagged, created_at), memories (id, companion_id, fact, embedding vector, source_message_id, created_at). RLS on every table.

## Implementation order
1. Scaffold, Supabase schema + pgvector + RLS, auth, the provider interface for the model layer
2. Streaming chat MVP: companion system prompt, recent-window context, token streaming, persist messages
3. Safety layer: moderation + crisis classifier gate, hotline responses, 18+ gate, AI disclosure - before any launch
4. Memory: extraction job, embeddings, pgvector retrieval into the prompt, 'what it remembers' view
5. Avatar, mood, XP/levels, relationship modes (gated)
6. Paywall: Stripe Checkout (yearly + lifetime, trial), daily-cap enforcement, webhook updates entitlement
7. Voice (optional): STT in, TTS out behind Pro; PWA polish

## Quality bar
- The safety gate cannot be bypassed and is covered by tests (crisis phrases never reach normal generation)
- Memory retrieval visibly improves continuity across sessions; document the cost/token strategy
- Streaming feels instant; context size is bounded

Start with step 1, then build the safety layer (step 3) before exposing chat to any real users - show me the moderation/crisis gate design first.

Design the complete UI for a Replika-style AI-companion app called Kindred. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: warm, intimate, calm - soft gradients, a friendly avatar always front and center, rounded chat bubbles, gentle mood motion, cozy typography (a soft serif for the companion's name, clean sans for chat). Light and dark themes. The tone is caring but always honest that this is an AI.

## Screens

### 1. Marketing landing
- Warm hero with a large friendly avatar illustration, headline 'A companion who remembers you.', honest subline, primary CTA
- Three benefit cards (always there, remembers you, grows with you), a clear 'This is an AI companion' transparency strip, pricing card (yearly $59.99 with a trial), FAQ accordion, gentle footer

### 2. Onboarding - create your companion
- Steps with progress dots: name your companion, pick an avatar look (gallery of avatars), choose 3 personality-trait chips, tell it a little about you; warm slide transitions; ends on a paywall card after a short first exchange

### 3. Chat (the hero screen)
- Header: companion avatar with a soft mood ring, name, and a small level badge
- Streaming message thread with rounded bubbles (companion left, user right), a typing-dots animation, a subtle 'memory saved' chip when it learns something, a daily-messages-left pill for free users
- Input bar with send and a mic icon (mic shows a Pro lock for free users)

### 4. Companion profile
- Large avatar, level and XP progress bar, mood label
- Relationship-mode selector: Friend (active), Mentor and Partner shown with a premium lock
- 'What your companion remembers' - a list of stored facts with timestamps

### 5. Customize
- Avatar look/outfit picker (some items premium-locked), trait editor, rename companion - a cosmetic-store feel

### 6. Voice call (premium)
- A full-screen call view: large animated avatar, a waveform that reacts as it speaks, mute and end-call controls, a live captions toggle; for free users this screen shows a 'Pro' lock and an upgrade CTA

### 7. Paywall
- Paywall card: benefit checklist (relationship modes, voice, unlimited messages, customization), plan selector (yearly preselected, lifetime option), trial timeline, CTA, restore link

### 8. Safety & resources
- A calm, visible safety screen with crisis hotlines, a clear 'I'm an AI, not a substitute for professional help' note, and a link to delete your data

Bottom tab bar (Chat, Companion, Customize, Settings) with a soft glow on active. Fully responsive; mobile-first. Use realistic content: a companion named 'Sol', warm sample messages, sample memories like 'You're learning guitar' and 'Your cat is named Pixel'.

Build an AI-companion chat app (Replika model) called Kindred. The companion is LLM-powered; safety and honesty about being an AI are required features.

## Entities
- Companion: user, name, avatarConfig, traits, mode (friend/mentor/partner), level, xp, mood
- Message: companion reference, role (user/assistant), content, createdAt, flagged (boolean)
- Memory: companion reference, fact, sourceMessage reference, createdAt
- UserProfile: birthdate (age gate), isPremium, isLifetime, trialEndsAt, dailyMessageCount, dailyResetAt

## Roles & permissions
- Visitor: sees landing, pricing and the safety/transparency note only
- Free user: 'friend' mode only, limited messages per day; mentor/partner modes, voice and premium customization prompt the paywall
- Premium user: all relationship modes, voice, unlimited messages, full customization
- Admin: sees a moderation dashboard (flagged messages), user/premium counts, and can review safety logs

## Pages
1. Landing: avatar hero, transparency note ('this is an AI'), pricing (yearly $59.99 with trial), FAQ
2. Onboarding: name companion -> avatar look -> 3 traits -> about you -> first chat -> paywall (include an 18+ confirmation)
3. Chat: streamed companion replies, avatar + mood header, daily-message counter for free users, 'memory saved' indicator
4. Companion profile: level/XP, mode selector (friend free; mentor/partner locked), 'remembers about you' list
5. Customize: avatar, traits, name
6. Settings: subscription, safety resources, delete-my-data
7. Admin: moderation/flagged-messages dashboard

## Rules
- Build the LLM prompt from the companion persona + relevant stored Memories + recent messages; persist both sides
- After each reply, extract durable facts into Memory and reuse them later
- Run moderation on user messages; on crisis signals, reply with empathy + crisis hotline resources and flag the message - never roleplay through it
- Free users limited to 'friend' mode and a daily message cap; reaching the cap or a locked mode opens the paywall
- Trial sets isPremium with trialEndsAt = now + 7 days; revert to free after expiry (check on login)

## Look & feel
Warm intimate theme: soft gradients, avatar front and center with gentle mood motion, rounded chat bubbles. Light and dark. Mobile-first.

Connect an LLM provider for the chat with a defined companion system prompt. Seed a demo companion 'Sol' at level 3 with a short prior conversation and a few stored memories; if no model key is configured, use a canned-response stub so the app still runs.