Lumina - AI Chat App

Lumina is a complete Ionic React starter template for building AI-powered chat assistant applications. It ships with every screen and flow a typical AI chat product needs - from onboarding and authentication through to conversation management, account settings, and a subscription upgrade page - all built on a dark, branded UI ready to drop a real AI backend into.

The template uses a fully mocked service layer (localStorage for auth, in-memory for conversations), so every screen is interactive and navigable out of the box. Replacing the mock services with your own API is the intended next step for buyers - all service calls are isolated in src/services/ and all state management flows through two clean React Context providers (AuthContext, ChatContext).

The visual design uses Ionic's iOS mode throughout with a custom dark theme: near-black backgrounds, a deep violet/magenta gradient brand palette, blurred headers, and consistent component styling via CSS custom properties.

Key Features

• Three assistant modes - Swift (speed-focused), Balanced (default), and Deep (complex reasoning) - with distinct icons, colors, and per-conversation persistence
• Streaming message animation - character-by-character text reveal with a blinking cursor, auto-scrolling as content renders
• Markdown rendering - custom renderer supports headings, ordered/unordered lists, bold, italic, inline code, and fenced code blocks with - language labels
• Full conversation management - create, rename, pin, search, and delete conversations; pinned conversations surface at the top of history
• Complete auth flow - sign in, create account (with password strength indicator), forgot password (two-state flow), and sign out with confirmation
• Onboarding wizard - two-step first-run experience for mode selection and feature introduction
• Subscription UI - monthly/annual billing toggle, three-tier plan cards (Free / Pro / Team) with feature lists and pricing
• Account and settings - profile editing, password change, notification toggles, clear history, and sign-out
• Suggested prompts - six categorised prompt cards (research, code, write, brainstorm, summarise, plan) on the home screen
• Relative timestamps - messages and conversation previews show human-readable times ("just now", "3h ago", "Dec 10")
• PWA-ready - standalone manifest, custom SVG favicon, mobile-capable meta tags

Technology Stack

• Ionic React (iOS mode) with @ionic/react component library
• React 18 with TypeScript and TSX throughout
• React Context API for auth and chat state - no third-party state library
• React Router via IonReactRouter and IonRouterOutlet
• Ionicons for all iconography
• Vite build tooling
• localStorage for auth session persistence (mock)
• In-memory store for conversations and messages (mock, resets on reload)
• Inline styles throughout - no Tailwind, Styled Components, or CSS modules

Best For

• Developers building a ChatGPT-style wrapper or AI assistant product who need a polished starting UI
• Teams prototyping an AI SaaS application and want screens for auth, billing, and conversation management from day one
• Developers learning Ionic React patterns - routing, bottom sheets, modals, alerts, forms, and context providers
• Founders validating an AI chat product concept before investing in a real backend

Notes

• All backend services are mocked - authService.ts and chatService.ts simulate network delays using setTimeout but make no real HTTP calls. Integrating a real AI API (OpenAI, Anthropic, etc.) requires replacing chatService.ts.
• Auth data is stored in localStorage in plain text - suitable only for demos; replace with a proper auth provider before any production use.
• Conversation data is in-memory only and resets on page reload. Adding real persistence requires replacing chatService.ts with a database-backed API.
• The Deep mode is marked as Pro-only in the UI but is not gated in the mock - the upgrade flow shows the plan selection screen but contains no payment integration.