Vibe Coding Template · React + Tailwind · Claude Code, Cursor, Lovable
AI Companion App Coding Template
A production-ready AI companion app template built for AI coding tools. Includes a character discovery home, an intimate chat interface with companion avatars, character profile pages, a memory log, a companion browse screen, personality and mood settings, a subscription upgrade flow, and account settings. Ships as a single copy-paste multi-file code optimised for Lovable, Claude Code, Cursor, Codex, Replit, and Google Stitch.
Preview (main screen)
Copy the full multi-file code. Files are separated by // === filename === headers so Cursor and Claude Code split them automatically. Next.js 14+ App Router, Tailwind CSS v3+, Switzer font.
Vibe code the whole app with a prompt
Paste the prompt into your AI coding tool and it builds the entire AI Companion App Coding Template in a single conversation. Each version is written specifically for that tool.
Build me a complete AI companion app called Sola. It should have: a character discovery home page with a warm gradient hero and a grid of 6 companion cards (Luna, Atlas, Mira, Kai, Nova, Sage each with a soft gradient avatar, personality tagline, and trait chips), a chat page with a sidebar showing recent conversations and a main area with the character avatar floating above the messages, a character profile page with a gradient header and tabbed content, a memory log page showing what the app remembers about the user with edit and delete buttons, a browse page with a filter sidebar and a 4-column companion grid, a mood settings page with personality sliders (Warmth, Playfulness, Depth, Energy) and tone pills, a subscription upgrade page comparing Free and Sola Plus plans, and an account settings page. Design should be minimal and warm: white background, black text, small Apple-style font sizes, blue only on the primary call-to-action buttons. Use Supabase for the backend.
How to use this AI Companion App Coding Template as a prompt
- Paste the prompt into Lovable, Claude Code, or Cursor to build a complete Next.js AI companion app with all 8 screens wired together.
- Best for consumer AI founders building a Character.ai alternative, indie developers shipping a niche companion experience, and vibe coders exploring emotional AI products.
- Ask Claude Code or Cursor to wire the companion characters to a Supabase database, add a real AI model via the Vercel AI Gateway, or swap the subscription provider from Stripe to LemonSqueezy.
How to use this AI Companion App Coding Template as code
- Copy the full multi-file code and paste it into a fresh Next.js 14+ project. Cursor and Claude Code split the file automatically using the // === filename === headers.
- Built on Next.js App Router + Tailwind CSS v3 + Switzer font. Soft gradient avatars, personality trait chips, and mood sliders use only Tailwind utility classes. No motion libraries required.
- Compatible with Vercel AI Gateway for streaming character responses, Supabase for message and memory storage, Clerk or Auth.js for auth, and Stripe or LemonSqueezy for subscription billing.
Sections inside the AI Companion App Coding Template
Each section is its own page with a live preview, section-only code, and vibe coding prompts for Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
Character Discovery Screen
AI companion app character discovery home for Lovable and Claude Code: gradient hero, 6-companion grid with trait chips, and category filter chips on a warm white layout.
Chat Interface Section
AI companion app chat interface for Lovable and Claude Code: sidebar with recent conversations, floating character avatar, warm message bubbles, and composer.
Character Profile Section
AI companion app character profile page for Lovable and Claude Code: gradient hero header, avatar, About/Memory/Conversations tabs, stats row, and conversation CTA.
Memory Log Section
AI companion app memory log for Lovable and Claude Code: grouped memory cards with edit and delete actions, privacy note, and clear all button.
Discover Companions Section
AI companion app browse page for Lovable and Claude Code: filter sidebar with category and personality filters, 4-column companion grid with star ratings.
Mood and Personality Settings Section
AI companion app personality settings for Lovable and Claude Code: Warmth, Playfulness, Depth, and Energy sliders with tone and response length pills.
Subscription Upgrade Section
AI companion app subscription upgrade screen for Lovable and Claude Code: Free vs Sola Plus two-column comparison with feature table and annual pricing note.
Account Settings Section
AI companion app account settings for Lovable and Claude Code: sidebar nav, profile form, privacy toggles, notifications, subscription status, connected accounts, and danger zone.
Vibe coding guides
FAQ
How do I build a Character.ai-style companion app with Lovable?+
Open the AI Companion App template, copy the family-level Lovable prompt, and paste it into Lovable. The prompt covers all 8 screens: character discovery, chat interface, character profile, memory log, browse/discover, mood settings, subscription upgrade, and account settings. Lovable generates a working Next.js app with Supabase auth and data. Wire the chat screen to any streaming model via Vercel AI SDK v6 useChat pointed at your /api/chat route.
What AI model works best for companion conversation responses?+
Claude Fable 5 (Anthropic) is the recommended default for companion apps because its conversational warmth, empathetic phrasing, and long context handling are well-suited to persona-driven chat. GPT-5.6 Sol (OpenAI) is a strong alternative. Route both via the Vercel AI Gateway so you can switch without changing your streaming code. Set the companion persona and personality trait values in the system prompt before the first message.
How do I make companion characters remember the user across sessions?+
Create a user_memory table in Supabase (columns: id, user_id, companion_id, category, label, value, created_at). After each conversation, extract key facts about the user with a lightweight extraction call (ask Claude or GPT to identify new facts from the conversation and return them as JSON). On the next session, fetch the user's memories and prepend them to the system prompt. The Memory Log page in this template lets users view and edit everything stored.
How do I add voice mode to a companion chat app?+
Capture audio with the MediaRecorder Web API, send the blob to an /api/transcribe route that calls OpenAI Whisper or ElevenLabs speech-to-text, and inject the transcript into the chat composer. For companion voice output, pass the streamed text response to ElevenLabs v3 via their streaming TTS endpoint and play the audio chunks using the Web Audio API. Wire both behind a single voice toggle button in the composer.
Can I build a niche companion app (fitness coach, study buddy) from this template?+
Yes. Replace the six default companions with your niche personas. Each persona's system prompt drives the conversational behavior: a fitness coach persona gets goal-tracking, workout encouragement, and progress check-in behavior; a study buddy persona gets explanation, quiz, and motivation behavior. The template's personality slider values (Warmth, Energy, Depth) feed directly into the system prompt as behavioral constraints, so users can tune each persona to their preference.
How do I wire the subscription page to Stripe?+
Create a POST /api/checkout route that calls stripe.checkout.sessions.create({ mode: "subscription", price: YOUR_PRICE_ID, success_url, cancel_url }). The "Get Sola Plus" button in the subscription page posts to this endpoint and redirects to the Stripe-hosted checkout page. On success, Stripe sends a webhook to /api/webhooks/stripe where you update the user's subscription status in Supabase (users table: plan = "plus", stripe_customer_id, stripe_subscription_id).
How do I deploy an AI companion app built with this template to Vercel?+
Run npx vercel --prod after confirming the build passes with npm run build. Add environment variables (NEXT_PUBLIC_SUPABASE_URL, SUPABASE_ANON_KEY, VERCEL_AI_GATEWAY_URL, STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET) to Vercel via the dashboard or vercel env add. The app is serverless: the /api/chat streaming endpoint and /api/checkout both run as Vercel Functions with no long-running process to manage.